IN jquery UI tabs us a form and using ajax submit it

Question

I have used a jquery UI tabs plugin in my page and in one of the tab i have put a form. SO for example , the tab calls a page form.php which has the form tag of html. Now form.php uses ajax and jquery to submit the form. Does this sound feasible.

    $(document).ready(function(){

    $("form#formdata").submit(function() {

            var str = $("#formdata").serialize();
            $.ajax({
            type: "POST",
            url: "submit.php",
            data: $("#formdata").serialize(),
            success: function(msg){
                     alert(msg);
                    }
    });

return false; });

});

SO the above code comes in my form.php

The form gets submitted but , not via ajax, and am directed to submit.php I want to reflect the result in my UI tabs itself.

Please suggest..thanks

EDIT : i put preventdefault() and return false , but it did not help..

Answer 1

put return false in the form submit function after the ajax call.

Answer 2

event.preventDefault() is the preferred way to handle this

$(document).ready(function() {
  $('form#formdata').submit(function(event) {
    event.preventDefault();
    var str = $('#formdata').serialize();
    $.ajax({
      type: 'POST',
      url:  'submit.php',
      data: $('#editmachine').serialize(),
      success: function(msg) { alert(msg); }
    });
  });
});

Answer 3

Hi, you have to prevent that behavior with return false into submit event:

$(document).ready(function(){

    $("form#formdata").submit(function() {

            var str = $("#formdata").serialize();
            $.ajax({
            type: "POST",
            url: "submit.php",
            data: $("#editmachine").serialize(),
            success: function(msg){
                     alert(msg);
                    }
    });
return false;
    });

});

Answer 4

Finally i got it working.

This is what i did.

in my UI tabs code

<div id="tabs">
            <ul>
                <li><a href="link.html">Link1</a></li>
                <li><a href="form.html">Data</a></li>
            </ul>
</div>

The form.html contained the form details and from there i was using ajax.

SO to correct it i used the form details on the same page under a div like this

<div id="tabs">
                <ul>
                    <li><a href="link.html">Link1</a></li>
                    <li><a href="#form">Data</a></li>
                </ul>

<div id = "form">
//form details here
</div>

    </div>

And used the ajax jquery code on this page.

Thanks to all who replied to my question and special thanks to @cheekysoft

Hope this comes handy and useful..