Why doesn't JavaScript trigger submit get caught by onsubmit?

I notice that if I trigger a form's submit event with javascript, as below, control goes straight to the action page rather than being cought by the onsubmit event code in the opening form tag.  But if I trigger the submit event with a submit button, control IS caught first by the onsubmit in the opening form tag.  I'm just wondering what's going on here and why triggering submit with JavaScript doesn't get caught by onsubmit.


<form name="sw1" action="managecart.html" id="sw1Info" onsubmit="alert('submitting');">
          <label for="whole"><input type="radio" class="check" id="whole" name="bread" value="Whole Grain Ciabatta Roll"/>Whole Grain Ciabatta Roll </label><br/>
          <label for="white"><input type="radio" class="check" id="white" name="bread" value="White Ciabatta Roll"/>White  Ciabatta Roll</label> <br/>
          <label for="full"><input type="radio" class="check" id="full" name="size" value="Full"/>Full</label><br/>
          <label for="half"><input type="radio" class="check" id="half" name="size" value="Half"/>Half </label><br/>
          <h2>Special Instructions:</h2>
          <textarea name="instructions" cols=40 rows=2></textarea>
           <p><a href="javascript:document.getElementById('sw1Info').submit();">Add to Order</a></p>

Who is Participating?
onsumbit event means when <input type="submit"> is clicked. then only the event will fires. But u've used sumbit(), it'll directly submit the form.
Ryan ChongCommented:
>>I'm just wondering what's going on here and why triggering submit with JavaScript doesn't get caught by onsubmit.

It's the behaviour of Javascript that it will only trigger the scripts you executed. That means by executed a javascript in hyperlink will not actually trigger the onsubmit event on the form.
onsubmit event of the form will be triggered only when a submit button submits a form.

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

stevaAuthor Commented:

That's the clearest answer so far, so I gave you the points. if you have any references to where this is documented I'd be very interested.

Sorry steva, that is not from any documents. I came to a situation like this, long ago and i confirmed that after a lot of struggling.
Dave BaldwinFixer of ProblemsCommented:
I got curious and did some research on http://www.w3.org/.  <input type="submit"> is part of the HTML <form> definition.  document.getElementById('sw1Info').submit(); is javascript talking to the DOM.  Apparently they are not actually the same thing.

I made up a form from the code above and added a submit button and several more variations of the javascript method.  I also included a text input.  The only things that went thru the form process were the submit button and pressing enter in a text field. Using the javascript with the anchor, <p> text, or an <input type="button" skips directly to the submit process.
stevaAuthor Commented:

Thanks for the extra information.  By the way, one more thing that will trigger the form's onsubmit event before action  is <input type="image" src=...
Dave BaldwinFixer of ProblemsCommented:
<input type="image" src=... is defined in the 'standards' as a submit button.  I had to look that one up recently too.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.