CODEWITHSUNDEEP
javascriptjquery
Ralph
Ralph

Reputation: 897

JQuery: Dynamic Form Won't Submit

I have a form that i append to a top of a table to add a new row but for some reason I can't capture the submit event. The row shows just fine at the top of the table with the form input elements.

$("#btn_addrow").on("click", function () {
    $("#tbl_list").prepend("<tr><form id='frm_add'><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='submit' value='add row'></td></form></tr>");

});

I can't get this event to trigger:

$("body").on("submit", "#frm_add", function (event){
   event.preventDefault();
   alert('test');
   /* $.ajax function will go here to save row */
});

Upvotes: 2

Views: 914

Answers (3)

Emil Borconi
Emil Borconi

Reputation: 3467

Your code seems to be working, see: HERE, however instead of inserting forms with ID's you should insert forms with class. ID should be unique all the time, so I will do like this:

$("#btn_addrow").on("click", function () {
    $("#tbl_list").prepend("<tr><form class='frm_add'><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='submit' value='add row'></td></form></tr>");

});

$("body").on("submit", ".frm_add", function (event){
   event.preventDefault();
   alert('test');
   /* $.ajax function will go here to save row */
});

UPDATE

The code will not work in Firefox, due to a firefox bug, or call it what ever you want. To get this code working, you can do the following, add and ID or some sort of identifier to your table, wrap the new row into the form, instead of wrapping the form in the row, and use jQuery insertAfter method to inject the new form in the DOM.

Please see an updated example here: HERE, and the code should look similar to this:

$("#btn_addrow").on("click", function () {
 $("<form class='frm_add'><tr><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='submit' value='add row'></td></tr></form>").insertAfter($("#my_table"));

});

$("body").on("submit", ".frm_add", function (event){
   event.preventDefault();
   alert('test');
   /* $.ajax function will go here to save row */
});

Upvotes: 1

Rajesh Dhiman
Rajesh Dhiman

Reputation: 1896

If you are using a ajax call, Then you can just change your submit button to simple button and bind your method to it. Just keep in mind you have to bind the method after the control is added to DOM. 

$("#btn_addrow").on("click", function () {
    $("#tbl_list").prepend("<tr><form id='frm_add'><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='button' id='btnSubmit' value='add row'></td></form></tr>");

$('#btnSubmit').click(function(e){  
       event.preventDefault();
       alert('test');
       /* $.ajax function will go here to save row */
    });

});

And I haven't tried but may be moving your event binding to or after the control generation method would work.

Upvotes: 0

Petar Vasilev
Petar Vasilev

Reputation: 4755

You need to add action attribute to the form:

<form action=""></form>

So you can update your code to:

$("#btn_addrow").on("click", function () {
    $("#tbl_list").prepend("<tr><form action="" id='frm_add'><td><input type='text' name='date'> </td><td><input type='text' name='note'></td><td><input type='submit' value='add row'></td></form></tr>");
});

Upvotes: 0

Related Questions