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 reguardless 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 (and the client never specified handheld use).

Has anyone built a javascript to remedy this, or if possible, a jQuery plugin? Thank you

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

You should check for the button's value.

http://www.w3schools.com/tags/tag_button.asp

Always specify the type attribute for the button. The default type for Internet Explorer is "button", while in other browsers (and the W3C specification) it is "submit".

Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

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

Answer 4

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".