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

Question

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();
    });
});

Check your Javascript console for errors. Some of the newlines in your string are not escaped, that will cause a syntax error. — Barmar, Aug 27 '16 at 11:25
Downvote is for posting a Javascript question without checking the console first. — Barmar, Aug 27 '16 at 11:25
Barmar thanks for your response I have shorten the code when i submit for that reason you are seeing the not escaped correctly.But it is not the problem with the escape. — Santosh Reddy, Aug 27 '16 at 11:27
Post real code. How are we supposed to guess which errors are for real and which are artifacts of your shortening. — Barmar, Aug 27 '16 at 11:29
`$(this).parent("form").submit()` can't be right. You can't have a form inside another form. — Barmar, Aug 27 '16 at 11:38

score 0 · Accepted Answer · edited May 23 '17 at 12:32

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?

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

1 Answers1