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

<form name="myForm" action="demo_form.asp" onsubmit="submitForm();" method="post">

function submitForm(){
   document.myForm.submit();
}

I have a bug which records two of each record sometimes. and i'm suspecting its because the form is submitting twice

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

<form name="myForm" action="demo_form.asp" onsubmit="submitForm();" method="post">

function submitForm(){
   document.myForm.submit();
}

I have a bug which records two of each record sometimes. and i'm suspecting its because the form is submitting twice

• javascript
• html

Share Improve this question Follow edited May 10, 2013 at 14:05 124697 asked May 10, 2013 at 13:56 124697124697 21.9k6969 gold badges197197 silver badges319319 bronze badges 4

• Your example makes no sense, why would you call a function onsubmit and than in that function resubmit the same form? Lucky the browser exits or you would have an infinite loop – epascarello Commented May 10, 2013 at 14:00
• And I love how you just changed the question so now title does not match the question. – epascarello Commented May 10, 2013 at 14:01
• @epascarello so you can understand it better. – 124697 Commented May 10, 2013 at 14:02
• 2 Title still has nothing to do with your question. – epascarello Commented May 10, 2013 at 14:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

function isValid(form) {
  if (someBadCondition) {
    // record some error somewhere
    return false;
  }
  if (someHorribleCondition || someEquallyBadCondition) {
    // record some other error
    return false;
  }
  return true;
}

function canSubmitForm(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 (mon 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 stuff
  return false;
}

I remend 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.

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

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)