61

I am really new to javascript, and stumbled upon the return keyword. Basically, what is the difference in terms of these 2 statements?

<input type="checkbox" onclick="doAlert()" />

vs 

<input type="checkbox" onclick="return doAlert();" />

Essentially, both returned the same results and called the function, but is there more to it? Any help greatly appreciated :). Thanks!

Glenn Ferrie
  • 10,290
  • 3
  • 42
  • 73
Shiroi98
  • 842
  • 1
  • 9
  • 13
  • 3
    Since you say you're new to javascript, I *strongly* suggest you learn how to attach event handlers rather than define them inline like you do here. There's [debate](http://stackoverflow.com/questions/6941483/) but there are [good reasons](http://stackoverflow.com/questions/5127037/disappearing-google-map/5127272#5127272) why you shouldn't use inline handlers. – Stephen P Oct 18 '11 at 23:58
  • Good sources for beginners: [MDN JavaScript Guide](https://developer.mozilla.org/en/JavaScript/Guide) and [quirksmode.org - Introduction to event handlers](http://www.quirksmode.org/js/introevents.html). – Felix Kling Oct 19 '11 at 08:00
  • possible duplicate of: http://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-an-onclick-event (untagged) – Ciro Santilli OurBigBook.com Jun 20 '14 at 10:52

3 Answers3

51

Some html elements have JS events that behave differently when true/false is returned. For instance:

<input type='submit' value='Click Me' onSubmit='ValidateForm();'>

...vs...

<input type='submit' value='Click Me' onSubmit='return ValidateForm();'>

In the second instance, if the ValidateForm function returned false the form will not submit, in the first even if the function returns false the form will still submit.

I think this scenario, you can see the different between using the return keyword and not.

UPDATED To simplify, if you use the return keyword you are passing a value back to the function that called the onsubmit. Without it, you are simply calling the function that you name in the event handler and do not return anything.

UPDATE 2021-01-21 This functionality also work for the onclick method on html anchors / links (a):

Sample Usage:

<a href="#never-used" onclick="alert('click clack'); return false;" >

Click Me

Glenn Ferrie
  • 10,290
  • 3
  • 42
  • 73
  • What if `ValidateForm` returns `0` or `null` or `23 `instead of `true` or `false` in syntax `onSubmit='return ValidateForm();'`? – overexchange Dec 10 '15 at 13:05
  • 3
    @overexchange test it and see what happens. :-) – Glenn Ferrie Dec 11 '15 at 14:52
  • It works for all those values. Is ValidateForm suppose to return something? – overexchange Dec 11 '15 at 17:45
  • 1
    i do not know the details of the implementation, but i'd expect its something like `if (returnValue === false) { /* do something here*/ }`. so unless you return 'false' -- i think the form will submit – Glenn Ferrie Dec 12 '15 at 06:01
  • To clarify on the question from @overexchange -- in JavaScript, when you evaluate an `if` or in other situation where a boolean is expected. The value (`0`, `null`, `23`) will be evaluated to see if it is "truthy" -- that is explained in depth here: https://developer.mozilla.org/en-US/docs/Glossary/Truthy – Glenn Ferrie Aug 26 '20 at 03:17
46

Returning false from the function, will abort the effect of the checking. Because the native of functions that written hardcoded into html properties (it became some new local function), writing the html without the word "return" will just run the function, and lose its returning value, as if you've wrote:

function doAlert() {
   if(some_condition)
     return false;
   else
     return true;
}
function some_local_function() {
   doAlert();
}

Function some_local_function won't return any value, although doAlert returns.

When you write "return", it's like you wrote the second function like this:

function some_local_function() {
   return doAlert();
}

which preserves the returning value of doAlert, whatever it will be. If it's true - the action will perform (the checkbox will be checked) - otherwise - it will cancel.

You can see live expamle here: http://jsfiddle.net/RaBfM/1/

Bere
  • 1,627
  • 2
  • 16
  • 22
Yaakov Shoham
  • 10,182
  • 7
  • 37
  • 45
  • Note that JSFiddle won't recognize the JS function by default in the HTML, and so if you make your own fiddle you'll have to set the JavaScript "load type": https://stackoverflow.com/a/14499852/1599699 – Andrew Nov 08 '17 at 16:00
  • (Moved the script tag to the JS section and did that and it works: http://jsfiddle.net/RaBfM/369/) – Andrew Nov 08 '17 at 16:01
-1

adding return to a function(), it disables the default behaviour of the browser, it disables the job of submit. Means it will keep you on the same page if the function returns false and you can fill up the value into the field again.

If you do not use return with the function() then submit function will perform its job, it will redirect to the next specified page, without caring about the returned result whether it was true or false.

Arun Raaj
  • 1,762
  • 1
  • 21
  • 20
  • 1
    Simply adding `return` in front of the function call _does *not*_ disable the default behavior of the browser — it depends on what the function call _returns_. If the function called returns something _truthy_ the default behavior is performed; if the function returns something falsy, _then_ the default behavior is cancelled. Y. Shoham's accepted answer from 7 years before this answer covers that, while this answer is factually incorrect. – Stephen P Dec 13 '18 at 00:35