With form validation: why onsubmit=”return functionname()” instead of onsubmit=”functionname()”?

by

You need the return so the true/false gets passed up to the form’s submit event (which looks for this and prevents submission if it gets a false).

Lets look at some standard JS:

function testReturn() { return false; }

If you just call that within any other code (be it an onclick handler or in JS elsewhere) it will get back false, but you need to do something with that value.

...
testReturn()
...

In that example the return value is coming back, but nothing is happening with it. You’re basically saying execute this function, and I don’t care what it returns. In contrast if you do this:

...
var wasSuccessful = testReturn();
...

then you’ve done something with the return value.

The same applies to onclick handlers. If you just call the function without the return in the onsubmit, then you’re saying “execute this, but don’t prevent the event if it return false.” It’s a way of saying execute this code when the form is submitted, but don’t let it stop the event.

Once you add the return, you’re saying that what you’re calling should determine if the event (submit) should continue.

This logic applies to many of the onXXXX events in HTML (onclick, onsubmit, onfocus, etc).

More Related Contents:

  1. event.preventDefault() vs. return false
  2. What is DOM Event delegation?
  3. What is event bubbling and capturing?
  4. How can I trigger a JavaScript event click
  5. The value of “this” within the handler using addEventListener
  6. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  7. How to get a word under cursor using JavaScript?
  8. Intercept page exit event
  9. Listening for variable changes in JavaScript
  10. React onClick function fires on render
  11. DOM event precedence
  12. How can I get the destination URL for the onbeforeunload event?
  13. How to check whether dynamically attached event listener exists or not?
  14. Reading client side text file using Javascript
  15. Accessing an object’s property from an event listener call in JavaScript
  16. Enter key press behaves like a Tab in Javascript
  17. Detect mousemove when over an iframe?
  18. How to delay calling of javascript function?
  19. cloning javascript event object
  20. JavaScript KeyCode Values are “undefined” in Internet Explorer 8
  21. Only fire an event once?
  22. Call a Javascript function every 5 seconds continuously [duplicate]
  23. How to listen for child window closing?
  24. JavaScript Event prototype in IE8
  25. How browser executes Javascript and renders asynchronously
  26. How to optimize website for touch devices
  27. Prevent click event from firing when dblclick event fires
  28. How do you force your Javascript event to run first, regardless of the order in which the events were added?
  29. Are dynamically inserted tags meant to work?
  30. Display Spreadsheet Data to HTML Table

Leave a Comment