Dynamically created form is not submitting

Question

I have a set of forms which is dynamically created.

<form action='test.php' method='post' name='addtocart' id='form1'>
<input class="qty" type="text" size="3" name="quantity" value="1">
<input class="btnStandard" type="button" name="submit" value="Add to Cart">
</form>
<form action='test.php' method='post' name='addtocart' id='form2'>
<input class="qty" type="text" size="3" name="quantity" value="1">
<input class="btnStandard" type="button" name="submit" value="Add to Cart">
</form>

By clicking the button with class btnStandard the corresponding form will get submit. My jquery code

$(document).ready(function(){
    $(document).on('click', '.btnStandard', function(event){
            var formId = $(this).parent("form[name='addtocart']").attr('id');
            alert(formId);  //gives the form id
            $('form#'+formId).submit(); 
    });
});

But the form is not submitting.

EDIT

I missed it: I edited the Question as suggested in comment. Still the form is not get submit, but the alert is working.

Change: `$(".btnStandard").on('click', function(event){` to `$(document).on('click', ".btnStandard", function(event){` — Stuart, Jul 03 '19 at 10:29
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Stuart, Jul 03 '19 at 10:29

score 0 · Answer 1 · answered Jul 03 '19 at 10:30

There's two main issues here. Firstly if the form elements are dynamically created you will need to use a delegated event handler.

Secondly, to submit a form it has to have a submit button, so change the type on the input type="button" elements.

$(document).ready(function() {
  $(document).on('click', '.btnStandard', function(event) {
    var formId = $(this).parent("form[name='addtocart']").attr('id');
    alert(formId); //gives the form id
    $('form#' + formId).submit();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action='test.php' method='post' name='addtocart' id='form1'>
  <input class="qty" type="text" size="3" name="quantity" value="1">
  <input class="btnStandard" type="submit" name="submit" value="Add to Cart">
</form>

<form action='test.php' method='post' name='addtocart' id='form2'>
  <input class="qty" type="text" size="3" name="quantity" value="1">
  <input class="btnStandard" type="submit" name="submit" value="Add to Cart">
</form>

However, with that said retrieving the DOM element to get an id from it to select it again by that id is entirely redundant. Just use closest() to get the form and remove the name and id from them:

$(document).ready(function() {
  $(document).on('click', '.btnStandard', function(event) {
    $(this).closest('form').submit();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="test.php" method="post">
  <input class="qty" type="text" size="3" name="quantity" value="1">
  <input class="btnStandard" type="submit" name="submit" value="Add to Cart">
</form>

<form action="test.php" method="post">
  <input class="qty" type="text" size="3" name="quantity" value="1">
  <input class="btnStandard" type="submit" name="submit" value="Add to Cart">
</form>

In which case you must have another underlying issue as you can see from the above example. Try checking the console for errors — Rory McCrossan, Jul 04 '19 at 07:34

Dynamically created form is not submitting

1 Answers1