donglu9872 2013-05-11 12:28
浏览 28
已采纳

too long

Field Item                   Field Qty
--------                        -----
--------                        ------
--------                        -----
--------                        ------
ADD MORE

Item field and quantity are manually entered by user and if they need more items to be entered they will click on add more button

I have a form of 5 rows with two column each as above .

I want to add more text field dynamically, onclick add more button and I need to get the values through POST using PHP .

I have seen similar post but they either add only one input field at a time or a bunch of fields.

I want both fields item and qty to be added on a single click . 

<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>
  • 写回答

1条回答 默认 最新

  • dsfds2343 2013-05-11 13:24
    关注

    Working jsFiddle Demo

    • [!] This solution need jQuery.

    Put the Add More button outside the 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" />

    And add a click handler to your button:

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

    Note that this need jQuery. Don't forget to check jsFiddle demo.

    [BONUS] How to include jQuery in your project:

    Put jQuery file and the above function inside the <head> tag.

    <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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 自适应 AR 模型 参数估计Matlab程序
  • ¥100 角动量包络面如何用MATLAB绘制
  • ¥15 merge函数占用内存过大
  • ¥15 Revit2020下载问题
  • ¥15 使用EMD去噪处理RML2016数据集时候的原理
  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大
  • ¥15 单片机无法进入HAL_TIM_PWM_PulseFinishedCallback回调函数
  • ¥15 Oracle中如何从clob类型截取特定字符串后面的字符
  • ¥15 想通过pywinauto自动电机应用程序按钮，但是找不到应用程序按钮信息
  • ¥15 如何在炒股软件中，爬到我想看的日k线