Jquery Ajax Form from ajax request

1
votes

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

2
javascriptjqueryajax

2 Answers

0
votes

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.

0
votes

This is because the form is being submitted in the traditional sense. This is the default action of the submit event. You need to suppress this:

$("#form2").submit(function(evt) {
    evt.preventDefault(); //<-- prevent the event's default action
    //code here...