IE sends inner HTML when clicking on a button elem

Question

I have the following html in my webpage (simplified).

<button type="submit" name="action" value="ButtonA">Click Here</button>

In Firefox, it submits "ButtonA" as the value for the "action" form value. However, in IE7, it submits "Click Here". Is there any way to resolve this? I don't want to use input tags, because I need to be able to customize the text without affecting the values sent back to the form (localization). Basically, I want to be able to have multiple buttons with the same name, and depending on their value, do a different action when submitted. Is there any easy with to get IE to act correctly in this case?

[MORE]

Maybe I should be more clear, but I can't use

<input type="submit" name="Action" value="ButtonA">

because I need to be able to change the text displayed for localization rules, without affecting the actual value of the button that's submitted with the form.

[MORE]

To elaborate even more, Basically, I want the button to be able to say "Save" or "Sauver" depending on the language, but not have the value submitted to the server change. I also want to have multiple buttons with the same name, and depending on the value, do something, rather than depending on the button name, and testing if there is a value for that button. The code is already written from that perspective, and I just want to be able to change the displayed text in the values, without existing server side processing code.

Here is a link with a very good explanation of the problem, with some possible work arounds.

Answer 1

I think you should be using an <input type="submit" /> instead of <button>.

Answer 2

I think that you should reconsider this whole concept. I have a feeling your scenario goes something like this:

• User clicks Save or Cancel
• Server-side, you check for "Save" or "Cancel" value
• You perform actions based on this

In reality, it shouldn't matter what the value of a Save button is. In PHP, for example, you can simply check for a value in the Save element. Regardless of whether the value is "Save" or "Sauver", you can perform the saving functionality.

I apologize if I'm way off base here. Let me know if my assumptions are accurate.

Answer 3

The usual workaround to get it working with an input-submit is to munge the value into multiple 'name' attributes, eg.:

<input type="submit" name="submit.buttonA" value="Sausage" />
<input type="submit" name="submit.buttonB" value="Mash" />

The form layer I personally use will automatically convert that as if a 'submit' control with value 'buttonA' or 'buttonB' were clicked, but it should be easy to do manually in most environments.

Answer 4

The link you provided in the question explains that IE6 submits all the buttons with every form submission, so your app won't work with IE6 no matter what workaround you use. I tested this and verified that IE6 does indeed do this. This means that without Javascript the <button> tag is useless with IE6, and given the other limitation it is severely limited with IE7 as well. The only non-Javascript workaround I can think of is to put your <button> tags outside your main <form>, in their own forms. You could do this with <a> tags as well, but I can't recommend that since links are always GET requests and GET requests should never have side-effects, such as modifying data.

<div style="float:left">
  <form name="shoppingCart" action="#c" method="GET">
    <input type="hidden" name="item1" value="hat">
    <input type="text" name="item1quantity" value="1"> Hat, red<br>
    <input type="hidden" name="item2" value="scarf">
    <input type="text" name="item2quantity" value="1"> Scarf, red<br>
    <button type="submit" name="button" value="purchase">Buy now!</button>
  </form>  
</div>
<div style="float:right">
  <form name="remove" action="#a" method="GET">
    <input type="hidden" name="item" value="item1">
    <button type="submit" name="button" value="delete1">Remove this item</button>
  </form>
  <form name="remove" action="#b" method="GET">
    <input type="hidden" name="item" value="item2">
    <button type="submit" name="button" value="delete2">Remove this item</button>
  </form>
</div>

The downside of using multiple forms is that you are limited in what you can transmit; if the user changes the quantity in the above form that information won't be submitted when the user clicks 'remove'. But you could consider that graceful degredation for non-JS users, and use JS to synchronize the data in the main form with the hidden forms.

Answer 5

Check out this ie-button-fix project which uses IE behaviors (i.e. javascript) to neatly solve the problem.

Answer 6

A simple workaround without using javascript is this:

<button type="submit" name="action" value="ButtonA" onclick="this.value='ButtonA'">Click Here</button>