What Is The Difference Between Onsubmit="submitform();" And Onsubmit="return Submitform();"

Does this the example below mean the form will be submitted twice?

function submitForm(){

Solution 1:

onsubmit="" on a form element defines an event function. The return value, if defined, will be passed back to the browser. A falsy value (false, null, undefined, etc.) will prevent the browser from proceeding with form submission.

It's similar to any other functions

functionisValid(form) {
  if (someBadCondition) {
    // record some error somewherereturnfalse;
  }
  if (someHorribleCondition || someEquallyBadCondition) {
    // record some other errorreturnfalse;
  }
  returntrue;
}

functioncanSubmitForm(form) {
  isValid(form);
}

The last line never passes the return value back. Therefore

console.log(isValid(someForm));  // true
console.log(canSubmitForm(someForm));  // undefined

Think of the onsubmit="submitForm()" as being your canSubmitForm. That is actually exactly what it is. Whatever you define in onsubmit="" is evaluated as a function to answer the question "can we submit this?".

You would fix the above example like:

function canSubmitForm(form) {
  return isValid(form);
}

Notice the return statement will now pass the result of isValid through to the caller of canSubmitForm.

Therefore, the diffrence between

onsubmit="submitForm();"

and

onsubmit="return submitForm();"

Is that in the former, the return value of submitForm is ignored. In the later example, if submitForm were to return a value, it would be passed to the caller of onsubmit, which is the browser.

You are most likely submitting your form twice because your code says "when submitting the form, submit the form".

If the submitForm javascript function needs to own the submitting process (common for thing like ajax w/ graceful degradation), then you need to add a return false in your event handler.

onsubmit="submitForm(); return false"

or change submitForm to return false and then onsubmit to pass it on

onsubmit="return submitForm();"function submitForm() {
  // do some submission stuffreturnfalse;
}

I recommend the former, where you put an explicit false in the event handler. The reason for that is the event handler is the reason false is needed. Submitting isn't false. You didn't somehow fail or reject. submitForm should focus on submission stuff and let your event handler handle the browser event handling stuff. Plus it error-proofs the code a bit.

Solution 2:

The return statement returns the results of the function called on submission. If false is returned it will stop the form from being submitted.

Solution 3:

The reason that you are submitting it twice is that you are both running submit and then your submitForm function. If you want custom submit logic in your function, you would want to do something like:

onsubmit="submitForm();return false;"

What that will do is run your submit function, but prevent the default behavior of the submit button.

(Mind you, in your example above, the submitForm function doesn't really do anything so the whole thing is superfluous, but presumably you were planning more logic in that function once you solved the double-submit issue)