0

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

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

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

我想动态添加更多文本字段，单击添加更多按钮，我需要使用 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>
4

1 回答 1

3

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>
于 2013-05-11T13:24:11.277 回答