back to index

Using Multiple "buttons" Elements in IE6

Internet Explorer 6 exhibits some bizarre behaviour when using the "button" tag, especially if more than one button with the same name attribute is used. Where browsers like Safari and Firefox will submit the name=value pair of the button pressed, IE will submit all the button labels (not the values!). The "button" tag is much more flexibile than the "input" tag when styling with CSS. However, because of this behaviour, many have reverted to using "input" or have hacked around the limitation in various ways.

When running into this issue, I found a really neat solution by Kimmo Laine at http://www.codecomments.com/JavaScript/message756646.html. I adapted this to my liking as follows:

  1. The original solution clobbers any existing onclick handlers which you may have already defined. This version skips any buttons which have already registered an onclick event handler
  2. The original solution still submits the button label. This version submits the value attribute of the button (see http://www.sporniket.com/page/blog/david/200601251721)
  3. IE7 apparently doesn't have this problem (I haven't been able to verify this yet, b.t.w.) , so we don't want the workaround to apply to anything above IE6

Advantages

The main advantage of this workaround is that it doesn't require any changes to the markup or the names of the form fields (which would require server side changes). Also if javascript is disabled, it doesn't affect non-IE6 browsers which will continue to work.

The Code

Save this as buttonfix.js

function buttonfix() {
    var buttons = document.getElementsByTagName('button');
    for (var i=0; i<buttons.length; i++) {
        if(buttons[i].onclick) continue;
        
        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;
            this.value = this.attributes.getNamedItem("value").nodeValue ;
        }
    }
}
window.attachEvent("onload", buttonfix);

On each page which you need the fix, include the following:

<!--[if lt IE 7]>
    <script type="text/javascript" src="buttonfix.js"></script>
<![endif]-->

If the problem is also present in IE7, instead use:

<!--[if IE]>
    <script type="text/javascript" src="buttonfix.js"></script>
<![endif]-->

How it works

When the page is loaded, buttonfix() loops over all "button" elements which haven't been assigned an onclick event. For each of these buttons, it registers a new event handler on the onclick event which: When a button is clicked, disables all other buttons and assigns the "value" attribute (which is accessible using the DOM) to the button's form value property (which is used in the submit).

Copyright (c) 2007 Michiel Toneman : rot13(zvpuvry@xbcm.bet)
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. The full text of the license is found at: http://www.gnu.org/copyleft/fdl.html