IE 6 and the multiple button elements all sending their name & values

Question

When using multiple button elements in a form, I realised that IE7 sends the innerHTML instead of the value of the button. All good I thought, I'll simply change my PHP code to this

<?php

if (isset($_POST['button-name'])) {
   add_product_to_cart(2);
}

?>

Now my old friend IE6 is going a little step further at being a nuisance. It sends all of the button elements regardless of which one I click. For example, I have 3 button elements named 'mint', 'near-mint' & 'standard'. A quick print_r($_POST) tells me that all 3 names have been submitted.

I guess to remedy this will be some JavaScript, not the most elegant situation, but I can imagine that the average user still using IE6 is not bright enough to turn off their JavaScript.

How can I remedy this?

Answer 1

I found a solution at http://www.codecomments.com/JavaScript/message756646.html

All credit to the author on that page.

Per request, here is the code

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);

Answer 2

This is a known bug in Internet Explorer.

http://www.dev-archive.net/articles/forms/multiple-submit-buttons.html describes a workaround that does not depend on JavaScript.

It boils down to "Use <input> and don't design your buttons to need anything other than simple text for their labels".

Answer 3

An solution is to use <input type="button"> and <input type="submit"> in your page instead of <button type="button"> and <button>.

Update: if you change your button elements to input elements you should be able to find them using jQuery with the following selector:

var buttons = $('input[type=submit], input[type=button]');