Fix for IE button bug

I noticed a bug in IE, when using button-elements instead of input submits.
One button works okay, but when you use multiple button-elements on the same
form, they are all submitted, instead of the one that was clicked. So I
wrote a little script to workaround it, I attach an onclick-event to each
button on the page, and once the button is clicked, it loops through all
button-elements on the form disabling them, and finally enabling the one
that was clicked.

I use this as a separate .js file and include it to every page that uses
multiple button-elements.
and I use the following syntax to include it only when the browser is IE:
<!--[if IE]>
<script type="text/javascript" src="buttonfix.js"></script>
<![endif]-->

buttonfix.js:
----
function buttonfix(){
var buttons = document.getElementsByTagName('button');
for (var i=0; i<buttons.length; i++) {
buttons[i].onclick = function () {
for(j=0; j<this.form.elements.length; j++)
if( this.form.elements[j].tagName == 'BUTTON' )
this.form.elements[j].disabled = true;
this.disabled=false;
}
}
}
window.attachEvent("onload", buttonfix);
----

I hope this helps someone who is struggling with the same thing. Also: if
you find something to correct or something that can be improved, please let
me know.

(If you wonder why I wanted to use buttons instead of input-elements, the
answer is that button elements allows html-formatting and images inside the
button, so you can insert images inside the submit buttons that way or
underline certain letter from the button label. That's why.)

Sincerelly,
Kimmo Laine

--
"En ole paha ihminen, mutta omenat ovat elinkeinoni." -Perttu Sirviö
spam@outolempi.net | Gedoon-S @ IRCnet | rot13(xvzzb@bhgbyrzcv.arg)

We adopted the solution for multiple button submission as you suggested.  The s
ubmission thing works fine.  But whenever there is any validation error, the bu
tton which is clicked only is enabled and rest of the buttons on the form are d
isabled.  I understood this behaviour is because of the (this.form.elements[j].
disabled = true;) 
work around.  

I wanted to ask you whether is there any way to find out in javascript that 
validation failed or not. 
If i am able to find that i can enable the buttons again if the validation f
ails.

We are using struts 1.3.8 

Please let me know if you have any idea on the above problem.

Thanks,
Shiva.


quote:
Originally posted by Kimmo Laine 
I noticed a bug in IE, when using button-elements instead of input submits.
One button works okay, but when you use multiple button-elements on the same
form, they are all submitted, instead of the one that was clicked. So I
wrote a little script to workaround it, I attach an onclick-event to each
button on the page, and once the button is clicked, it loops through all
button-elements on the form disabling them, and finally enabling the one
that was clicked.

I use this as a separate .js file and include it to every page that uses
multiple button-elements.
and I use the following syntax to include it only when the browser is IE:
<!--[if IE]>
<script type="text/javascript" src="buttonfix.js"></script>
<![endif]-->

buttonfix.js:
----
function buttonfix(){
var buttons = document.getElementsByTagName('button');
for (var i=0; i<buttons.length; i++) {
buttons[i].onclick = function () {
for(j=0; j<this.form.elements.length; j++)
if( this.form.elements[j].tagName == 'BUTTON' )
this.form.elements[j].disabled = true;
this.disabled=false;
}
}
}
window.attachEvent("onload", buttonfix);
----

I hope this helps someone who is struggling with the same thing. Also: if
you find something to correct or something that can be improved, please let
me know.

(If you wonder why I wanted to use buttons instead of input-elements, the
answer is that button elements allows html-formatting and images inside the
button, so you can insert images inside the submit buttons that way or
underline certain letter from the button label. That's why.)

Sincerelly,
Kimmo Laine

--
"En ole paha ihminen, mutta omenat ovat elinkeinoni." -Perttu Sirviö
spam@outolempi.net | Gedoon-S @ IRCnet | rot13(xvzzb@bhgbyrzcv.arg) 
 this.form.elem
ents[j].disabled = true;