CODEWITHSUNDEEP
htmlformsbuttoninput
aamiri
aamiri

Reputation: 2440

i need to make an input that looks like this button

I have a button on an html page declared like so:

<button type="submit" name="action" value="sort">SAVE CHANGES</button>

My company demands we support older versions of IE, and in versions 8 and lower when the user goes to submit the form, it passes the text between the 2 button tags. So i need to use an input tag instead. Can someone help me figure out how to create an input tag where the type=submit, the name=action and the value=sort, but hte text on the button says 'SAVE CHANGES'.

Thanks!

Upvotes: 0

Views: 169

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201648

The requirements seem to exclude solutions other than using <input type=image>, which has serious problems; in particular, the coordinates of the clicked location are transmitted, and probably a revision of the requirements will therefore exclude this, too.

Using JavaScript, you could tweak the data before it gets sent, or maybe use an image with an onclick handler that turns it to a button in a sense.

Normally, problems like this should be solved by modifying the server-side code. But if you have some reason why the field name (in the submitted data) must be different from the text in the button, then there does not seem to be any solution, with the given conditions.

Upvotes: 0

vivek
vivek

Reputation: 2004

An option is to use an image button with the text SAVE CHANGES on it.

<input type="image" src="save_changes.png" name="action" value="sort" />

Upvotes: 1

gen_Eric
gen_Eric

Reputation: 227270

Don't give your submit button a name, make a hidden field with the name and value you want.

<button type="submit">SAVE CHANGES</button>
<input type="hidden" name="action" value="sort" />

So, when the form is submitted, the value "action=sort" will be submitted.

Upvotes: 0

Barry Kaye
Barry Kaye

Reputation: 7759

Like this:

<input type="submit" name="action" value="SAVE CHANGES" />

However if the value="sort" is important to you perhaps you could move it to an input type="hidden" element.

Upvotes: 4

Related Questions