0

I wrote the following code to post data with jQuery, It's working fine, but without return false;, the code didn't work, I found this return statement after 1 full day of searching...

Could somebody please tell me, what is the use of return false; after the end of $.post?
I am a newbie in jQuery and would like to get a better understanding of this.

$("#formid").submit( function () {    
  $.post(
   'ajax.php',
    $(this).serialize(),
    function(data){                 
       $("#result").html(data);
       $("#result").fadeIn('slow');
    }
  );
  return false;   
}); 
albertjan
  • 7,739
  • 6
  • 44
  • 74
Karthik Sekar
  • 180
  • 3
  • 12

4 Answers4

2

The return false; here is not used for $.post method of AJAX instead it is used to prevent the form(#formid) submission which can cancel your AJAX request

bugwheels94
  • 30,681
  • 3
  • 39
  • 60
  • Thanks Gautam, makes sense, coz when i remove the return false, the whole page reloads!!! – Karthik Sekar Jul 25 '12 at 05:12
  • `return false` not only prevents default action but also stops event propagation. See [this](http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/) article. – Mics Jul 25 '12 at 05:15
  • @Mics Thanks for the article, I understand return false can be mis used, now I remember facebook has written in there form tag like onsubmit = return Event.__inlineSubmit(this,event), Basically i was actually trying to write a status update in a wall with jQuery... – Karthik Sekar Jul 25 '12 at 05:33
2

If you remove the return false;, you will see that the browser continues to submit the form (not using AJAX). Returning false will prevent the browser from doing the default action, resulting in only the AJAX call occurring.

A similar result can be gotten by calling preventDefault() on the event object passed into the submit event.

For example:

$("#formid").submit( function (event) {    
      $.post(
       'ajax.php',
        $(this).serialize(),
        function(data){                 
           $("#result").html(data);
           $("#result").fadeIn('slow');
        }
      );
    event.preventDefault();   
});  
Andrew M
  • 4,208
  • 11
  • 42
  • 67
0

The return false is actually preventing the default action that is form submit. If you don't write that statement, your form is getting submitted.

Taryn
  • 242,637
  • 56
  • 362
  • 405
Pawan
  • 605
  • 1
  • 6
  • 18
0

Return false stops the default form action from being executed whenever a user clicks the submit button. Only the jQuery part is executed. Else, the whole page would have been reloaded upon form submission.

You can read about that on the.submit() page on jQuery API.

There's the following paragraph:

when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler. We can trigger the event manually when another element is clicked:

RRikesh
  • 14,112
  • 5
  • 49
  • 70