CODEWITHSUNDEEP
html
John Fitzpatrick
John Fitzpatrick

Reputation: 4349

Button text different than value submitted in query string

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

Upvotes: 5

Views: 3153

Answers (3)

Murat Tutumlu
Murat Tutumlu

Reputation: 780

For newcomers: With some CSS this works like a charm as of September 2017:

<form>
    <label style="padding:5px; cursor:pointer; border:solid 1px; border-color:#ccc">
    	<input style="display:none" type="submit" name="method" value="repackage">
    	<span>Update Config</span>
    </label>
</form>

Upvotes: 2

Ilesanmi John
Ilesanmi John

Reputation: 256

This works as well. Manipulate the appearance using the bootstrap button classes. 

<label class="btn btn-primary">
 <input class="d-none" type="submit" name="method" value="repackage">
 Update Config
</label>

Upvotes: 1

codeVerine
codeVerine

Reputation: 762

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

 <input type="image" src="http://images.webestools.com/buttons.php?frm=2&btn_type=31&txt=Update+Config" name="method" value="repackage">

Upvotes: 1

Related Questions