Question

字段项目字段数量
-------- -----
-------- ------
-------- -----
-------- ------
添加更多

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

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

我想动态添加更多文本字段，onclick添加更多按钮，我需要使用PHP通过POST获取值。

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

我希望只需点击一下即可添加字段item和qty。

<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>

Answer 1

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 demo。

[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>

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

1 个答案: