Short version:
How can I have my form’s button label text differ from the value submitted to the server without using the <button> tag?
Long version:
I wanted to have the text that appeared in a button in a form to be different than the value submitted in the query string. So, I looked around, and came across this approach…
<button name="method" type="submit" value="repackage">Update Config</button>
…and that worked on IE9 on one of my laptops and I was happy. The user saw “Update Config” and the server received method=repackage in the query string.
Then I brought this app to work and ran it on a workstation, also with IE9. But something had gone wrong. The user still saw “Update Config”, but the server now received method=Update%20Config in the query string.
So I investigated some more. I found that http://www.w3schools.com recommmended not using a <button> tag in a form. They say: “If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form” in this article. This seems to be what I am experiencing.
So I looked some more, and found lots of conflicting information about the right way to do this. For example here is a Stack Overflow post that asks exactly this question, but the accepted answer is to use the <button> tag. I can say from experience and research that this is not a reliable approach.
If there’s no other way try this:
Use an image button, instead of button. An image button will work as ordinary submit button, but you create an image of the desired button text (no one can change your text then).