Why doesn't Internet Explorer fire the send event sequentially?

Found a clear error in Internet Explorer today, but could not verify through research. Has anyone come across this and / or can explain please?

Summary

Internet Explorer (at least 9 and 11) does not always trigger (or handle?) A send event. I noticed a case where pressing the submit button quickly leads to the omission of some items. This issue is not observed in Chrome and Firefox.

Test case

  • Simple form with one input and one submit button.
  • Javascript handler in the form of submit: display submit , and then returns false
  • Javascript pens when clicking submit button: display click
  • jQuery is used for clarity (the same problem is noticed with an equivalent solution other than jQuery)
  • To run the test, the user must quickly double-click the Submit button and see what events are being processed.

Test results

Firefox and Chrome work as expected:

 click submit click submit 

Internet Explorer does something weird (as usual):

 click submit click 

There is no second! Only with IE, the client handler is not called, and Fiddler shows that the request never occurs in the production environment. (Note that this code example will not actually send a request, although due to return false .)

Working snippet: Scroll down the page and click "Run Snippet", then double-click the "Quick Press" of the "Submit" button and see the results. Jsfiddle

 feedback = function (t) { $div = $("<div class='line'></div>"); $div.html(t); $("#feedback").append($div); }; $("#theForm").on("submit", function (e) { feedback("submit"); return false; // don't actually submit form, or SO chokes }); $("#btnSubmit").on("click", function (e) { feedback("click"); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id='theForm' action="DISABLED BY RETURN FALSE" method="POST"> <input type='text' /> <input id='btnSubmit' type='submit' /> </form> <div id='feedback'></div> 
+7
javascript html internet-explorer forms
source share
1 answer

Not sure what you are trying to achieve with this, but I assume that you are trying to prevent a double representation of the form? In this case, perhaps you could use something like:

 feedback = function (t) { $div = $("<div class='line'></div>"); $div.html(t); $("#feedback").append($div); }; $("#theForm").on("submit", function (e) { feedback("submit only once"); $(this).find("#btnSubmit").attr("disabled", "disabled"); }); 
0
source share

All Articles