What does "return false;" do?
In this instance, return false;
prevents the default action (which is the form submitting).
Although it's probably better to use e.preventDefault();
What I'll write here is true for jQuery events,
For vanilla javascript events read @T.J. Crowder comment at the bottom of the answer
return false
inside a callback prevents the default behaviour. For example, in a submit
event, it doesn't submit the form.
return false
also stops bubbling, so the parents of the element won't know the event occurred.
return false
is equivalent to event.preventDefault()
+ event.stopPropagation()
And of course, all code that exists after the return xxx
line won't be executed. (as with all programming languages I know)
Maybe you find this helpful:
Stop event bubbling - increases performance?
A "real" demo to explain the difference between return false
and event.preventDefault()
:
Markup:
<div id="theDiv">
<form id="theForm" >
<input type="submit" value="submit"/>
</form>
</div>
JavaScript:
$('#theDiv').submit(function() {
alert('DIV!');
});
$('#theForm').submit(function(e) {
alert('FORM!');
e.preventDefault();
});
Now... when the user submit the form, the first handler is the form submit, which preventDefault()
-> the form won't be submitted, but the event bubbles to the div, triggering it's submit handler.
Live DEMO
Now, if the form submit's handler would cancel the bubbling with return false
:
$('#theDiv').submit(function() {
alert('DIV!');
});
$('#theForm').submit(function(event) {
alert('FORM!');
return false;
// Or:
event.preventDefault();
event.stopPropagation();
});
The div wouldn't even know there was a form submission.
Live DEMO
What does return false
do in vanilla javascript events
return false from a DOM2 handler (
addEventListener
) does nothing at all (neither prevents the default nor stops bubbling; from a Microsoft DOM2-ish handler (attachEvent
), it prevents the default but not bubbling; from a DOM0 handler (onclick="return ..."
), it prevents the default (provided you include the return in the attribute) but not bubbling; from a jQuery event handler, it does both, because that's a jQuery thing. Details and live tests here – T.J. Crowder
because of ajax you do not want your form to be submitted with the normal way. So you have to return false in order to prevent the default behavior of the form.
Any code after return
statement in a function will never be executed. It stops executing of function and make this function return value passed (false
in this case). Your function is "submit" event callback. If this callback returns false
, form will not be submitted actually. Otherwise, it will be submitted as it would do without JavaScript.