Question

I did a jQuery form (form1) which bring another form(form2) in that page through ajax.
Now I want to submit the form2 data through ajax.

But whenever I click the button, it submit the whole page. I mean the whole page reloads.

$(document).ready(function() {
        $("#form2").submit(function() {
            $(this).ajaxSubmit({
                    beforeSubmit: function(before) {
                        $('.loading_result').html('Loading...');
                    },
                    success: function(dd) {
                        $('.loading_result').html(dd);
                    }
            }); 
            return false;
        });

    });

All the JavaScript codes in the parent page. I don’t have any JavaScript codes in ajax pages

//

page.php
* There is a form (form1) in this page.
* All the jQuery functions are inside the page.php

When the form1 is submitted, it brings data from page2.php // It works good.
** page2.php gives form2.

Now when i submit the from2 (which is also in page.php after the ajax request) it does not trigger the jquery function inside page.php

Answer 1

Instead of binding the form submit on $(document).ready, I usually just include an “onclick” event to the form’s button:

<button type='submit' onclick='MyAjaxFunction();return false;'>Submit</button>

The return false; portion of the onclick will prevent the form from submitting.