7

I want to create a form-submit button on an HTML form which has different text than the keyword which will be submitted to the host. So I used 

<button type="submit" name="SubmitAction" value="Done" accesskey="D"><u>D</u>one for Now</button>

But W3Schools warns:

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

Is there any way to create a button using <input> the text showing on the button different from the value that will be submitted to the host?

What are the variations that different browser send with a <button>?

Note: I do not have to support anything older that IE 9 and the use will actually be with current versions of Chrome and FireFox.

Lawrence Dol
  • 63,018
  • 25
  • 139
  • 189
  • possible duplicate of [Difference between and ](http://stackoverflow.com/questions/3543615/difference-between-input-type-submit-and-button-type-submittext-button) – Wesley Murch Feb 11 '13 at 21:19
  • You could use an onsubmit function to append the value you want to the form when the input is pressed like explosion pills says. – nathan hayfield Feb 11 '13 at 21:19
  • 7
    You appear to be quoting http://www.w3schools.com/tags/tag_button.asp — Please don't confuse W3Schools with the W3C. The W3C maintain a number of web standards. W3Schools bask in the reflected glory of having a similar name while hosting some (mostly out of date) tutorials, many of which have errors and security problems. – Quentin Feb 11 '13 at 21:19
  • Not directly related to your question but here are other html 5 input types that are supported by different browsers in case you are interested: http://www.wufoo.com/html5/ – PmanAce Feb 11 '13 at 21:22
  • @Quentin: I didn't realize that - thanks. I have not been able to find an HTML5 and CSS3 reference on w3c.com to use. The standards abstracts are not helpful for use as a reference. – Lawrence Dol Feb 11 '13 at 21:24
  • The only browser i've noticed having a problem with ` – cHao Feb 11 '13 at 21:25
  • @cHao: Does IE7 have issues? I know IE6 does (submitting the innerHTML of the button). What's IE7's situation? – Wesley Murch Feb 11 '13 at 21:26
  • @WesleyMurch: Probably the same as IE6's. It submits the innerHTML of the button as the value, even if there's a `value` attribute on the button. The `value` property, and even `getAttribute('value')`, returns the button's HTML. You have to get `attributes.value.value` or something like that in order to even see the real value attribute. – cHao Feb 11 '13 at 21:26
  • @cHao: I could be wrong but I think it's just IE6. – Wesley Murch Feb 11 '13 at 21:27
  • @WesleyMurch: I wish it were just IE6. Would have made a recent project of mine a bit simpler. :) What's more, IE7 seems to submit the content of every ` – cHao Feb 11 '13 at 21:29
  • Thankfully, I don't have to support anything other that current browsers for this. – Lawrence Dol Feb 11 '13 at 21:29

1 Answers1

7

The <button> vs. <input> difference is pretty antiquated, and you should have no problem getting away with using either one in modern browsers.

If you want to use <input type="submit"> to submit a value other than what is displayed ... don't. Instead, just add another input element:

<input type="submit" value="Displayed Value">
<input type="hidden" name="name" value="Actual Value">
Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • 1
    About the multiple `input` idea: But I have multiple buttons, each submitting a different action - Save, Done, Publish, Discard. – Lawrence Dol Feb 11 '13 at 21:20
  • 1
    just append the hidden input when the form is submitted depending on which button is pressed with some javascript on the onsubmit event – nathan hayfield Feb 11 '13 at 21:21
  • @SoftwareMonkey you can rely on the submit button's name, but not its value – Explosion Pills Feb 11 '13 at 21:22
  • @ExplosionPills yeah i always use the name attribute to see what button got pressed – nathan hayfield Feb 11 '13 at 21:23
  • 1
    @Nathan: I really hate using JS for critical functionality (as opposed to augmentation) - It would be simpler to map different submit names to a singular SubmitAction on the host. But thanks for the idea. – Lawrence Dol Feb 11 '13 at 21:31