Button text different than value submitted in query string

Question

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.

@Daedalus: Thank you for that link. Do you think perhaps w3schools.com is wrong in this case? — John Fitzpatrick
– John Fitzpatrick, Commented Oct 30, 2012 at 9:39

bimimicah · Accepted Answer · 2019-07-31 19:38:20Z

2

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>

edited Jul 31, 2019 at 19:38

bimimicah

31 silver badge3 bronze badges

answered Sep 28, 2017 at 3:08

Murat Tutumlu

7806 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gijs · Accepted Answer · 2012-10-30 08:32:33Z

1

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

edited Oct 30, 2012 at 8:32

Gijs

5,2401 gold badge29 silver badges42 bronze badges

answered Oct 30, 2012 at 8:09

codeVerine

7623 silver badges14 bronze badges

1 Comment

John Fitzpatrick Over a year ago

Thanks, I was starting to think that would be necessary. But it feels just a little work-intensive, especially if I will do this often.

Ilesanmi John · Accepted Answer · 2019-07-10 19:31:00Z

1

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>

edited Jul 10, 2019 at 19:31

answered Jul 10, 2019 at 19:24

Ilesanmi John

2563 silver badges5 bronze badges

Collectives™ on Stack Overflow

Button text different than value submitted in query string

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related