I know that the onsubmit event occurs when a form is submitted.

Generally, we are calling a method on the onsubmit event, like <form action="" onsubmit="myfunction()">.

Today I saw this, "<form action="" onsubmit="return false">". How does it work? I could not understand what is the meaning of onsubmit="return false".

PS: I found this when learning Ajax. It was a tutorial which explains how to submit data to a database without refreshing the page.

I know that the onsubmit event occurs when a form is submitted.

Generally, we are calling a method on the onsubmit event, like <form action="" onsubmit="myfunction()">.

Today I saw this, "<form action="" onsubmit="return false">". How does it work? I could not understand what is the meaning of onsubmit="return false".

PS: I found this when learning Ajax. It was a tutorial which explains how to submit data to a database without refreshing the page.

• javascript
• jquery
• forms

• 4 return false cancels the default submit action(stops the submission of form). – Satpal Commented Jan 27, 2016 at 12:13
• It means Do nothing. Return the control flow.. – Rayon Commented Jan 27, 2016 at 12:13
• It means that do nothing on submit. – RK12 Commented Jan 27, 2016 at 12:14
• 1 If we did not call a function via onsubmit event then it will work as it is intended to work that is To submit the form – Rayon Commented Jan 27, 2016 at 12:22
• 1 this is typically used to cancel the form submission if it does not meet criteria. For example after perform validation in the form fields. If form is not valid you probably want to cancel submission – Sandcar Commented Jan 27, 2016 at 12:35

4 Answers 4

This is basically done to handle the form submission via JavaScript.

For example - for validation purposes

See the below code and see how it can be beneficial:

<script language="JavaScript">
myFunctionName() {
    if (document.myForm.myText.value == '')
        return false;
        // When it returns false - your form will not submit and will not redirect too
    else
        return true;
     // When it returns true - your form will submit and will redirect
// (actually it's a part of submit) id you have mentioned in action
}
</script>

<form name="myForm" onSubmit="return myFunctionName()">
<input type="text" name="myText">
<input type="submit" value="Click Me">
</form>

According to the HTML standard, onsubmit is the name of an event handler. The event handler content attribute is treated as the FunctionBody of a JavaScript function which will be used to handle the associated events. In step 5 of "The event handler processing algorithm", it says "Process return value as follows":

• If event is a BeforeUnloadEvent object and event's type is beforeunload
  • In this case, the event handler IDL attribute's type will be OnBeforeUnloadEventHandler, so return value will have been coerced into either null or a DOMString.
  • If return value is not null, then:
    • Set event's canceled flag.
    • If event's returnValue attribute's value is the empty string, then set event's returnValue attribute's value to return value.
• If special error event handling is true
  • If return value is true, then set event's canceled flag.
• Otherwise
  • If return value is false, then set event's canceled flag.

So, in short, return false will cancel the event (or in this case, cancels the form submission).

If you are using a button instead of submit as in my case below:

 <form name="myForm" onSubmit="myFunctionName(); return false">
    <input type="text" name="myText">
    <input type="button" value="Click Me" onclick="myFunctionName()">
 </from>

This effectively prevents the form from being submitted in any circumstances except under script control (via form.submit(), which doesn’t trigger a submit event)

Reference : Query in Action THIRD EDITION (AFFECTING EVENT PROPAGATION AND SEMANTIC ACTIONS, Page no. 143)