jQuery - Unable to submit dynamically created form

Question

I am having trouble submitting a dynamically created form. I have tried a lot of methods but the form is not getting submitted. Here are couple of methods I have tried.

In this code tosubmit is actually a json string created using JSON.stringify. I am also not getting any error when I debug this using Opera Dragonfly. I can see the form properly added to the DOM.

Method 1

var frmstr = '<form id="tbl_tmpfrm" method="post" action="/test.php">';
frmstr +='<input type="hidden" name="submit" value="true"/><input type="hidden" name="data" value=""/></form>';
$('body').append(frmstr);
$('#tbl_tmpfrm').find('input[name="data"]').val(tosubmit);
$('#tbl_tmpfrm').submit();

Method 2

var frmstr = '<form id="tbl_tmpfrm" method="post" action="/test.php">';
frmstr +='<input type="hidden" name="submit" value="true"/><input type="hidden" name="data" value="'+tosubmit+'"/></form>';
$('body').append(frmstr).submit();

I am able to successfully submit the tosubmit and validate at the server side when i use ajax. But I want a normal commit. What am I doing wrong?

Please help. Thanks.

Answer 1

For dynamically added elements use this form

$(document).on('submit','#tbl_tmpfrm',function(){})

EDIT: This was not what was required exactly. Try adding the form as an object not string

var frmstr = $('<form id="tbl_tmpfrm" method="post" action="/test.php"></form>');
$(document).append(frmstr);
frmstr.append('<input type="hidden" name="submit" value="true"/><input type="hidden" name="data" value="'+tosubmit+'"/>');
frmstr.submit();

Also, as suggested by roland, dont use the name submit for the hidden field