Submit a form from a loaded page

Question

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 code of the loaded page:

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

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 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.

Answer 1

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;       

});

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

Answer 2

Move the onSubmit handler outside the click handler.

$('#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;       

});