JavaScript Form Submit Test
28th November 2005 · Last updated: 5th October 2016
Today I coded a form which disabled the submit button when the user pressed it. This was to avoid duplicate forms being processed, as can happen. The code is nothing new, but I tested it successfully in Opera 8.51 at first. Then I tried Internet Explorer 6. The button was disabled as expected, but then the page just stuck. After a long wait, an unusual JavaScript error message came up that I didn't understand. So I tried it in Firefox 1.5 RC3. The same. Opening the JavaScript console didn't reveal any errors (though it did catch one in my stylesheet, oddly enough). Hmmm, highly frustrating!
I gave up and removed the code. Only later did I realise I was coding it wrongly. I had put the JavaScript function call on the <input> element, but the form had another function call that occured on submit. D'oh!
It occured to me that since the code did work in Opera, Explorer was perhaps acting on the two clashing function calls in a different order. So I devised a test. The results are interesting in that Explorer seems to be the less capable browser when it comes to onmouseup. I've abandoned using that action before, due to problems in Explorer. In my test it actually stops the form from being submitted! Here is the test:
Click on the two input buttons and observe the results. The form also has an alert (pop-up message) when submitted. And yet the results vary between browsers. It may be useful to someone battling with JavaScript and forms to know this.
I recall once reading about Mozilla and Explorer differing in the way events bubble in JavaScript. This might explain the behaviour of my test.
I'd like to leave you with a summary of what I am getting on Windows XP. Your results may differ. If so, let me know.
| onmouseup | onclick | |
|---|---|---|
| Opera 8.51 | Occurs last, after onsubmit | Occurs first, then onsubmit |
| Firefox 1.5 RC3 | Occurs first, then onsubmit | Occurs first, then onsubmit |
| Internet Explorer 6 & 7 | Occurs, but onsubmit doesn't! | Occurs first, then onsubmit |
Comments (1)
Comments are locked on this topic. Thanks to everyone who posted a comment.
- Nick Fitzsimons:
Ah, another IE event peculiarity! I've been bitten a number of times by IE's strange ideas about event sequences - for example, IE 4 had a very odd sequence of blur/focus events when focusing form fields in different frames.
For the purpose you describe, I would have probably have disabled the Submit button in the onsubmit handler, as there is a logical connection between the reason for disabling the button and the act of submitting the form. Using mousedown/mouseup events on the button could lead to unexpected effects if, say, the user pressed the mouse button on another element or a link, decided they didn't want to click on it after all, moved the mouse away (so as to cancel the click action on that element, but such that the pointer happened to be over the submit button) and then released the button again; I believe the button would then receive the mouseup event, even though the user had made no attempt to submit the form.
Thanks for another post that I'll remember after driving myself mad debugging the selfsame problem in a few months
Posted on 17 January 2006 at 7:45 pm ¶