Internet Explorer submits the wrong button

Question

I have an HTML form with two buttons as follows:

<input type="submit" name="confirm" value="Yes, Delete"  />
<button name="confirm" type="button" onclick="history.back()" value="No, Go Back" >No, Go Back</button>

Now, when I click on either in Firefox, the behavior is as expected. If I click the submit button, then "Yes, Delete" gets posted and if I click "No, Go Back" it's as if I hit the back button on the browser. However, in Internet Explorer (6 or 8), if I click on "Yes, Delete" then "No, Go Back" gets posted. Why is that?

Answer 1

Because the control with the name “confirm” has the value “No, Go Back”.

Answer 2

I believe this is because the names of both buttons are the same. The second button must be "overriding" the attributes of the first button. At any rate, changing the name of the second button solved the problem.

Answer 3

Because you are using the same identifier for both buttons. Rename your button and your problem will be solved!

Answer 4

Just FYI, There are issues with having more than one <button> element in Internet Explorer (even IE7). Check out here and here for example.

I found this out when trying to make a "Save / Update / Delete" kind of page with three <BUTTON> elements - worked perfectly in Firefox...

Answer 5

Firefox, Safari, Chrome, Opera all play the "first match wins" game, but IE plays the "last match wins" game.

(see bug/feature report here)

In general, I would name the buttons differently unless they are part of a radio/checkbox set.