代码之家  ›  专栏  ›  技术社区  ›  Santosh Reddy

从jquery提交表单并在jquery内捕获表单提交事件

  •  0
  • Santosh Reddy  · 技术社区  · 10 年前

    我试图从jquery调用表单提交,我想在单击表单提交后禁用该按钮。但由于某些原因,它甚至没有发出警报。如果按了“取消”或“付费”按钮,我想得到提示hello。但它并没有发出警报。请帮忙。

    $(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();
        });
    });
    
    1 回复  |  直到 10 年前
        1
  •  0
  •   Community Mohan Dere    9 年前

    您使用AJAX将表单动态添加到DOM中,这是异步的。所以当你打电话的时候 $('form').submit() 要绑定处理程序,表单尚未在DOM中。您需要在添加表单后调用它,方法是在 success: 作用

    而且 $(this).parent("form").submit() 应该是 $(this).submit() . $(this) 是表单,您不需要转到它的父级。你应该使用 event.preventDefault() 以防止正常表单提交的发生。

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

    或者可以使用事件委托,如中所述 Event binding on dynamically created elements?