[javascript] With form validation: why onsubmit="return functionname()" instead of onsubmit="functionname()"?

The question is pretty self-explanatory. I don't understand what the return is doing in the following code:

<form onsubmit="return somefunction()">

This question is related to javascript dom-events

The answer is


Returning false from the function will stop the event continuing. I.e. it will stop the form submitting.

i.e.

function someFunction()
{
    if (allow) // For example, checking that a field isn't empty
    {
       return true; // Allow the form to submit
    }
    else
    {
       return false; // Stop the form submitting
    }
}

When onsubmit (or any other event) is supplied as an HTML attribute, the string value of the attribute (e.g. "return validate();") is injected as the body of the actual onsubmit handler function when the DOM object is created for the element.

Here's a brief proof in the browser console:

var p = document.createElement('p');
p.innerHTML = '<form onsubmit="return validate(); // my statement"></form>';
var form = p.childNodes[0];

console.log(typeof form.onsubmit);
// => function

console.log(form.onsubmit.toString());
// => function onsubmit(event) {
//      return validate(); // my statement
//    }

So in case the return keyword is supplied in the injected statement; when the submit handler is triggered the return value received from validate function call will be passed over as the return value of the submit handler and thus take effect on controlling the submit behavior of the form.

Without the supplied return in the string, the generated onsubmit handler would not have an explicit return statement and when triggered it would return undefined (the default function return value) irrespective of whether validate() returns true or false and the form would be submitted in both cases.


An extension to what GenericTypeTea says - Here is a concrete example:

<form onsubmit="return false">

The above form will not submit, whereas...

<form onsubmit="false">

...does nothing, i.e. the form will submit.

Without the return, onsubmit doesn't receive a value and the event is executed just like without any handler at all.


<script>
function check(){
    return false;
}
 </script>

<form name="form1" method="post" onsubmit="return check();" action="target">
<input type="text" />
<input type="submit" value="enviar" />

</form>

HTML event handler code behaves like the body of a JavaScript function. Many languages such as C or Perl implicitly return the value of the last expression evaluated in the function body. JavaScript doesn't, it discards it and returns undefined unless you write an explicit returnEXPR.