Cloned form cannot be submitted
clone, forms, jquery, submit
Solution
Try
$(this).closest('tr').find('form').submit();
instead of
$(this).closest('form').submit();
but better would be to avoid invalid markup, and either:
- Don't use a table for layout
- Don't use `form` elements - use jQuery to serialize and submit the rows on demand
Problem
I have a table, where each row corresponds to a form. While the markup is invalid (`<form>` tags come after `<tr>` immediately), submit buttons work as expected (ie. they submit their containing form). So far, so good. Now I prepare a new row to be appended to the table mentioned above. It resides hidden in a separate table. When the 'Add a year' button pressed, I clone the `tr` with the form and append it to the table. But here comes the suprise: the newly created submit button does not submit. (I tried the same without cloning, makes no difference.) Here are the code snippets (included in a JSFiddle): HTML ``` <div id="min" style="display:none">2010</div> <div id="div_newyr" style="display:none"> <table> <tr> <form action="" method="post" name="form1" id="form1"> <td class="td_yr"> <span></span> <input type="hidden" name="yr" value="" /> </td> <td><input type="submit" name="sub_close" value="Close" /></td> </form> </tr> </table> </div> <table> <tbody id="tb_yrs"> <tr> <form action="" method="post" name="form2" id="form2"> <td class="td_yr last"> <span>2010</span> <input type="hidden" name="yr" value="2010" /> </td> <td><input type="submit" name="sub_close" value="Close" /></td> </form> </tr> </tbody> <tbody> <tr> <td><input type="button" id="but_newyr" value="Add a year" /></td> </tr> </tbody> </table> ``` JS ``` jQuery(document).ready(function() { $('#but_newyr').click(function() { var firstYear = parseInt($('div#min').html()); firstYear--; newRow = $('#div_newyr').find('tr').clone(true); newRow.find('td.td_yr').children('span').html(firstYear).next('input').val(firstYear); $('#tb_yrs').append(newRow); $('div#min').html(firstYear); }); }); //added on a tip from a deleted answer $(document).on('click', "input[type=submit]" ,function(){ $(this).closest('form').submit(); }); ``` If I make the to-be-cloned form visible in order to check whether it works before cloning, I can submit that form. So, the question is: what is the difference between the original and the appended/cloned form or submit button? (Just a sidenote: the appended row begins in line with the second cell under Chrome - but I think it has nothing to do with the submit.)