38

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sasa1234
  • 898
  • 2
  • 13
  • 21
  • 2
    `return false` cancels the default submit action(stops the submission of form). – Satpal Jan 27 '16 at 12:13
  • It means `Do nothing`. Return the control flow.. – Rayon Jan 27 '16 at 12:13
  • It means that do nothing on submit. – RK12 Jan 27 '16 at 12:14
  • @Satpal, That will contradict with the `preventDefault` then.. – Rayon Jan 27 '16 at 12:14
  • This question is blatantly lacking in research. –  Jan 27 '16 at 12:19
  • Generally what you do is also incorrect I suppose, it must be `
    `(_If you are not using event.preventDefault() or you do not want to prevent form submission_ )
     – Rayon Jan 27 '16 at 12:19
  • @RayonDabre What we want to use it? If we did not call a function via onsubmit event, it means also do nothing, isn't it? – Sasa1234 Jan 27 '16 at 12:20
  • 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 Jan 27 '16 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 Jan 27 '16 at 12:35

4 Answers4

51

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>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Amar Singh
  • 5,464
  • 2
  • 26
  • 55
  • 2
    Please can you explain me what happen if it is return true? What happen if it is return false? – Sasa1234 Jan 29 '16 at 13:06
  • 2
    @Sasa1234 i have edited the he above code and i have explained in the comment . "when it `return false` - your form will not submit and will not redirect too and if it `return true`- your form will submit and will redirect (actually its a part of submit) id you have mentioned in action" – Amar Singh Jan 29 '16 at 13:31
  • It is mainly used to stop the form from appending the form data to the url if the action is actually carried out by a JavaScript event listener. – ThisGuyCantEven Apr 12 '18 at 03:21
  • @AmarSingh To test for empty field the correct is `...value === ??` – Duck May 15 '20 at 19:32
  • 1
    Any document on this feature? I didn't find any official document except this W3C recommendation: https://www.w3.org/TR/html52/sec-forms.html – Jing He Jun 28 '20 at 09:25
  • This gives me the following warning: `A return statement can only be used within a function` although code worked perfectly! – mig001 Mar 10 '22 at 17:38
  • @mig001 Can you create a fiddle and show what you are trying? – Amar Singh Mar 17 '22 at 08:31
10

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

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

AXO
  • 8,198
  • 6
  • 62
  • 63
  • 1
    Wow, your answer is the only explanation on the internet that actually explains what is happening (and somehow you still got downvoted). Even in the [HTML spec](https://html.spec.whatwg.org/), they repeatedly use `
     – schulwitz Apr 16 '22 at 06:11
2

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>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Vikas
  • 31
  • 4
0

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)

Basit
  • 137
  • 7