What is the meaning of onsubmit="return false"? (JavaScript, jQuery)

Question

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.

Answer 1

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>

Answer 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>

Answer 3

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)

<\/blockquote>

Answer 4

According to the HTML standard<\/a> , onsubmit<\/code> is the name of an event handler<\/a> . The event handler content attribute is treated as a script<\/a> . This script will be used to process the associated events. In

• <\/li>
  • <\/li>
    • <\/li><\/ul><\/li><\/ul><\/li>
    • <\/li><\/ul><\/li>
      • <\/li><\/ul><\/li><\/ul><\/blockquote>

        So, in short, return false<\/code> will cancel the event (or in this case, cancels the form submission).

        "