动态输入字段会以表格的形式自动删除

时间:2020-08-10 14:11:51

标签: javascript html jquery forms html-table

请参考图片

  1. 我尝试编写一个“ +”按钮,当您单击它时,我的Jquery动态添加另一个大小输入字段 image1

  2. 问题在于,当它位于“ form”标签中并且单击按钮时,它会显示1秒钟,然后自动消失。当我删除“ form”标签时,它可以按预期工作并且不会消失。 image2

这是我的代码输入部分,导致出现问题:

<form method="POST" action="addProduct.php">
   <div class="col-lg-4 topmargin">
   <span><h4>Size</h4></span>
   <table class="table borderless sizeTable" id="dynamic_price" >
      <tr>
        <td> <input class="form-control "type="text" name="size[]" placeholder="200 ml" size="100%"> </td> 
        <td><button  class="btn btn-primary" name="addSize" id="addSize">+</button></td>
      </tr>
  </table>
</div>
</form>

这是JQuery:

   <script> 
    
    $("#addSize").click(function(){
        $('.sizeTable tbody tr:last').after('<tr><td> <input class="form-control "type="text" name="size[]"  placeholder="9.99" size="100%"> </td><td><button  class="btn btn-danger" name="removeSize">-</button></td></tr>');
    });
    </script>

如何使其在表单中起作用?

1 个答案:

答案 0 :(得分:1)

您的button必须具有type="button",否则默认值为type="submit"。如果您想保留type="submit"(暂时),则需要在事件监听器上使用preventDefault(),以防止它在表单上执行默认的“提交”操作。

相关问题