Question

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

Answer 1

Try

$(this).closest('tr').find('form').submit();

instead of

$(this).closest('form').submit();

but better would be to avoid invalid markup, and either:

1. Don’t use a table for layout
2. Don’t use form elements – use jQuery to serialize and submit the rows on demand