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

Question

请参考图片

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

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

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

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

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

Answer 1

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