Dynamic input field gets removed automatically in a form

Question

Please refer to images

I am trying to code a "+" button that when you click on it, my Jquery dynamically adds another size input field
The problem is that when it is inside the "form" tag and I click on the button, it appears for 1 second and disappears automatically. When I remove the "form" tag, it works as expected and does not disappear.

Here is my the part of my code for the size input causing the problem:

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

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

How can I make it work inside my form?

you seem to have missed including the images in your post. Use [edit] — Suraj Rao, Aug 10 '20 at 14:13
your `button` needs to be `button type="button"` (otherwise it would be defined as a submit, in which case you would need to set `e.preventDefault()`) — Icepickle, Aug 10 '20 at 14:14
can you put it in the answer, there was a running example, I think it would be helpful — King A, Aug 10 '20 at 14:21

score 1 · Accepted Answer · answered Aug 10 '20 at 14:45

Your button needs to have type="button" otherwise its default is type="submit". If you want to keep the type="submit" (for now), you'll need to use preventDefault() on your event listener to prevent it from doing the default 'submit' action on the form.

Dynamic input field gets removed automatically in a form

1 Answers1