CODEWITHSUNDEEP
javascripthtmlformsgoogle-chromeinternet-explorer-11
Ishant Sharma
Ishant Sharma

Reputation: 33

<button type="submit" > behaviour different in IE and chrome : Why?

Form Submitted Twice in IE( internet explorer version : 11.713.10586.0 ) but only once in Chrome.

<div id="pageButtons">
  <button type="submit" onClick="sendAction('submit')"> Submit </button>
</div>

And the sendAction function was like :

function sendAction(anAction){
   document.form._action.value = anAction ;
   document.form.submit();
}

So since the button type is submit and also in the function sendAction I am doing submit by code, so the form was getting submitted twice concurrently.

So I changed the button HTML part to :

<div id="pageButtons">
      <button type="button" onClick="sendAction('submit')"> Submit </button>
</div>

Then It worked fine in IE. Now what I am not able to understand is, if the type="submit" thing was resulting into form submission twice in IE, why was it working fine in Chrome. In chrome also, it should submit twice because button type is submit and I have also hardcode "document.form.submit()".

Can anyone give me the reason ?

Upvotes: 2

Views: 1211

Answers (1)

Patrick Moore
Patrick Moore

Reputation: 13344

Your button is continuing to execute after sendAction() function executes, leading to a double form submission (once as part of sendAction() function, and once as part of normal HTML <form> <button type="submit"> behavior.

Try adding return false in your function:

function sendAction(anAction){
   document.form._action.value = anAction ;
   document.form.submit();
   return false;
}

And add return in your onClick:

<button type="button" onClick="return sendAction('submit');"> Submit </button>

This will allow sendAction() to trigger form submit, but then return false back to onClick() which will prevent <button> from its normal behavior.

Chrome is smart enough to know better as Sagar V indicates above. IE, not so smart :}

Upvotes: 1

Related Questions