With form validation why onsubmit return functionname instead of onsubmit functionname

Question

The question is pretty self-explanatory  I don t understand what the return is doing in the following code    lt form onsubmit  return somefunction    gt

User · Answer

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     lt form onsubmit  return validate       my statement  gt  lt  form gt    var form   p childNodes 0    console log typeof form onsubmit        gt  function  console log form onsubmit toString          gt  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

User · Answer

lt script gt  function check        return false      lt  script gt    lt form name  form1  method  post  onsubmit  return check     action  target  gt   lt input type  text    gt   lt input type  submit  value  enviar    gt    lt  form gt

User · Answer

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

User · Answer

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

User · Answer

An extension to what GenericTypeTea says - Here is a concrete example    lt form onsubmit  return false  gt    The above form will not submit  whereas      lt form onsubmit  false  gt       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

User · Answer

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

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

Examples related to javascript

Examples related to dom-events