Santosh Reddy Santosh Reddy - 3 months ago 17
jQuery Question

Submit a form from jquery and catch the form submitted event inside jquery

I'm trying to call the form submit from jquery and i want to disable the button after i click on form submit.But for some reason it is not even calling alert.If button cancel or paid is pressed i want to get the alert hello.But it is not calling alert.Please help.

$(document).ready(function() {
var table = $('#myTransactionitems').dataTable(); //Initialize the datatable
var user = $(this).attr('id');
if(user != '')
{
$.ajax({
url: 'transactions',
dataType: 'json',
cache:false,
success: function(s){
console.log(s);
table.fnClearTable();
for(var i = 0; i < s.length; i++) {
var disp1 = '';
if (s[i][4] != 'Reserved') {
disp1 = 'display:none;'
}
table.fnAddData([
"<form method='post' action='reservesplit'><input name = 'transactionID' type='hidden'\
value='"+s[i][0]+"'></input><input type='submit' id = 'btn-bank' name='btn-bank' value = '"+s[i][0]+"' class='btn btn-link'>\
</input></form>",
s[i][1],
s[i][2],
s[i][3],
s[i][4],
s[i][5],
"<form method='post'><input name = 'transactionID' type='hidden'\
value='"+s[i][0]+"'><input name = 'donationID' type='hidden'\
value='"+s[i][2]+"'><input name = 'splitAmount' type='hidden'\
value='"+s[i][3]+"'></input></input><input type='submit' id = 'btn-paid' name='btn-paid' value = 'Paid' style='" + disp1 +"' class='btn btn-success btn-sm pull-left '>\
</input></form><form method='post'><input name = 'transactionID' type='hidden'\
value='"+s[i][0]+"'><input name = 'donationID' type='hidden' \
value='"+s[i][2]+"'><input name = 'splitAmount' type='hidden'\
value='"+s[i][3]+"'></input><input type='submit' id = 'btn-cancel' name='btn-cancel' value = 'Cancel' style='" + disp1 +"' class='btn btn-danger btn-sm pull-right'>\
</input></form>"
]);
} // End For

},
error: function(e){
console.log(e.responseText);
}
});
}

$('form').submit(function(){
alert("hello");
$(this).find(':submit').attr('disabled','disabled');
$(this).parent("form").submit();
});
});

Answer

You're adding the form to the DOM dynamically with AJAX, which is asynchronous. So when you call $('form').submit() to bind your handler, the form isn't yet in the DOM. You need to call it after you add the form, by doing it in the success: function.

Also, $(this).parent("form").submit() should just be $(this).submit(). $(this) is the form, you don't need to go to its parent. And you should use event.preventDefault() to prevent the normal form submission from happening.

$(document).ready(function() {
    var table  = $('#myTransactionitems').dataTable();  //Initialize the datatable
    var user = $(this).attr('id');
    if(user != '') 
    { 
        $.ajax({
            url: 'transactions',
            dataType: 'json',
            cache:false,
            success: function(s){
                console.log(s);
                table.fnClearTable();
                for(var i = 0; i < s.length; i++) {
                    var disp1 = '';
                    if (s[i][4] != 'Reserved') {
                        disp1 = 'display:none;'
                    }
                    table.fnAddData([
                        "<form method='post' action='reservesplit'><input name = 'transactionID' type='hidden'\
                    value='"+s[i][0]+"'></input><input type='submit' id = 'btn-bank' name='btn-bank' value = '"+s[i][0]+"' class='btn btn-link'>\
                   </input></form>",
                        s[i][1],
                        s[i][2],
                        s[i][3],
                        s[i][4],
                        s[i][5],
                        "<form method='post'><input name = 'transactionID' type='hidden'\
                    value='"+s[i][0]+"'><input name = 'donationID' type='hidden'\
                    value='"+s[i][2]+"'><input name = 'splitAmount' type='hidden'\
                    value='"+s[i][3]+"'></input></input><input type='submit' id = 'btn-paid' name='btn-paid' value = 'Paid'   style='" + disp1 +"' class='btn btn-success btn-sm pull-left '>\
                   </input></form><form method='post'><input name = 'transactionID' type='hidden'\
                    value='"+s[i][0]+"'><input name = 'donationID' type='hidden' \
                    value='"+s[i][2]+"'><input name = 'splitAmount' type='hidden'\
                    value='"+s[i][3]+"'></input><input type='submit' id = 'btn-cancel' name='btn-cancel' value = 'Cancel'  style='" + disp1 +"' class='btn btn-danger btn-sm pull-right'>\
                   </input></form>"
                        ]);                             
                } // End For

                $('form').submit(function(e){
                    alert("hello");
                    e.preventDefault();
                    $(this).find(':submit').attr('disabled','disabled');
                    $(this).submit();
                });
            },
            error: function(e){
                console.log(e.responseText);    
            }
        });
    }
});

Or you could use event delegation, as described in Event binding on dynamically created elements?