从加载的页面提交表单 [英] Submit a form from a loaded page

问题描述

我想提交属于已加载页面的表单(我使用load()).当我单击按钮提交时，什么也没发生.

I want to submit a form which belongs to a loaded page (I use load()). When I click onto the button submission, nothing happens.

已加载页面的HTML代码:

Html code of the loaded page:

    <form id="my_form" method="post" >
         *** some inputs ***
        <input id="submit_button" type="submit" value="Confirm" />
    </form> 

已加载页面的jQuery代码:

jQuery code of the loaded page:

$("#submit_button").on('click', function() {        

    $('#my_form').submit(function(){ 
        var myForm = $(this);       

        $.ajax({
            dataType: 'json',               
            type: "POST",
            url: "../treatment_page.php", 
            data:myForm.serialize(),
            success: function(data){
                    if (data.a == true){
                          parent.$.colorbox.close();
                    }else{
                         alert("Problem!");
                    }          
            }
        });                 
    return false;       

    });

});

treatment_page.php可以，它对待我的其他表单不要使用on().treatment_page.php进入父文件夹.除此表单提交外，所有jQuery动作在加载的页面脚本中都可以正常工作.

treatment_page.php is OK, it treats my others forms don't usnig on(). treatment_page.php is into a parent folder. All the jQuery actions work fine in the loaded page script except this form submission.

推荐答案

在单击提交"按钮时，您只是将 submit 处理程序附加到表单中.您不需要提交按钮单击处理程序.只需将此代码保留在父页面上，并且不需要呈现此脚本以及 load 响应.

On submit button click you are just attaching a submit handler to form. You don't need the submit button click handler. Just keep this code on the parent page and also rendering this script along with load response is not required.

$(document).on('submit', '#my_form', function(){ 
        var myForm = $(this);       

        $.ajax({
            dataType: 'json',               
            type: "POST",
            url: "../treatment_page.php", 
            data:myForm.serialize(),
            success: function(data){
                    if (data.a == true){
                          parent.$.colorbox.close();
                    }else{
                         alert("Problem!");
                    }          
            },
            error: function(){
                //Error handler
            }
        });                 
    return false;       

});

jQuery 1.7中引入了

on ，如果您使用的是旧版本，则可以使用 delegate .试试这个.

on is introduced in jQuery 1.7 if you are using older version then you can use delegate. Try this.

$(document).delegate('#my_form', 'submit', function(){ 
        ....
        ....
});

这篇关于从加载的页面提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！