使用Javascript和php添加动态文本字段

Add Dynamic text field using Javascript and php

本文关键字：动态 文本 字段 添加 php Javascript 使用      更新时间：2023-09-26

字段项 nbsp nbsp nbsp nbsp；字段数量
-------- nbsp nbsp nbsp nbsp nbsp&nbsp-----
-------- nbsp nbsp nbsp nbsp nbsp&nbsp------
-------- nbsp nbsp nbsp nbsp nbsp&nbsp-----
-------- nbsp nbsp nbsp nbsp nbsp&nbsp------
添加更多

项目字段和数量由用户手动输入，如果他们需要输入更多项目，他们将单击添加更多按钮

我有一个5行的表格，每行两列，如上所述。

我想动态添加更多的文本字段，点击addmore按钮，我需要使用PHP通过POST获得值。

我看到过类似的帖子，但它们要么一次只添加一个输入字段，要么添加一堆字段。

我想在一次点击中添加两个字段项目和数量。

<form id="quick_post" method="post"> 
<table id="input_fields">
 <tr> 
   <td><input class="orderinput" type="text" name="product[]">        
   </td> 
     <td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3">  
  </td>
</tr> 
   <tr>
       <td>
           //In here i want to add more Input Text product fields 
        </td>
       <td>
           //In here i want to add more Input Text Quantity fields 
        </td>
   </tr>
     <tr>
       <td><input class="more" type="submit" value="Addmore" name="addmore"></td>  
    </tr>
 </table> </form>

Working jsFiddle Demo

  • [!]这个解决方案需要jQuery

将Add More按钮置于form:之外

<form id="quick_post" method="post"> 
    <table id="input_fields">
        <tr> 
            <td><input class="orderinput" type="text" name="product[]" /></td> 
            <td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
        </tr>
    </table>
</form>
<input class="more" type="button" value="Addmore" name="addmore" />

并为您的按钮添加一个click处理程序：

$(function () {
    $('input.more').on('click', function () {
        var $table = $('#input_fields');
        var $tr = $table.find('tr').eq(0).clone();
        $tr.appendTo($table).find('input').val('');
    });
});

请注意，这需要jQuery。不要忘记查看jsFiddle演示。

[BONUS]如何在项目中包含jQuery：

将jQuery文件和上述函数放入<head>标记中。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        $('input.more').on('click', function () {
            var $table = $('#input_fields');
            var $tr = $table.find('tr').eq(0).clone();
            $tr.appendTo($table).find('input').val('');
        });
    });
</script>
相关文章：