<button> tags in IE 6 issue

Recently, I encountered a problem with IE6. As we know, IE6 is the worst browsers ever. However, there are still lots of users using it. The problem was using <button> on IE6.

The first issue was if you have a button tag like this:

<button name="myBtn" value="123">Remove Item</button>

In FireFox, you'll get myBtn=123 after your form submitted. However, in IE6, you'll receive myBtn=Remove Item

The other issue was if you have two <button> in the same form, they will all be submitted. My case was trying to create a service agreement page with two buttons. One is ACCEPT button and the other is DECLINE. However, in IE6, if I use <button> tags, I will alway get both of them and don't know how to handle it.

One way to fix the problem is using <input> tags instead of <button>. However, there are a lot of benefits using <button>, such as you can have content in <button> tags.

My way to handle the issue was making one disabled when the other one clicked. Therefore I alway get only one button value/content.

<button name="accept" value="accept" onClick="disableBtnDecline();">accept</button>
<button name="declinie" value="decline" onClick="disableBtnAccept();">decline</button>