IE 6 and a few button elements sending their name and values

Question

When using multiple button elements in a form, I realized that IE7 sends innerHTML instead of the button value. Everything is good, what I thought, I just changed my PHP code to this

<?php

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

?>

Now my old friend IE6 goes a little further, being a nuisance. It sends all the button elements no matter which one I click on. For example, I have three button elements named "mint", "near-mint" and "standard". Quick print_r($_POST)tells me that all 3 names have been sent.

I think there will be some kind of JavaScript to fix this, and 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 fix this?

Answer 1

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

All credit to the author on this page.

Upon 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 is JavaScript independent.

It boils down to "Use <input>and don't create your buttons for anything other than plain text for your labels."

Answer 3

<input type="button"> <input type="submit"> <button type="button"> <button>.

Update: if you change the elements buttonto elements input, you can find them using jQuery with the following selector:

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