<button type="submit"> compatibility?

Question

I'd like to have a submit button that submits a different value than is displayed on the button. With <input type="submit"> you can't seem to do this. With <button type="submit"> however, these can be two different values. The question is, will it work in all browsers?

Trying this test code here:

<form method="get" action="">
    <input type="text" name="txt"/>
    <button type="submit" name="btn" value="val">text</button>
</form>

In FF 3.6 it updates my address bar with both values appropriately (and responds to me pressing enter in the text box). In IE 8, it also accepts pressing enter, displays the text value in the address bar, but it show the button's value as a GET param at all... does that mean it's not submitting it?

---

I can't use hidden inputs. I need to determine which button is clicked (without JS).

---

Test 2:

<form method="get" action="">
    <input type="text" name="txt"/>
    <button type="submit" name="submit1" value="submit1">submit</button>
    <input type="submit" name="submit2" value="submit2"/>
    <input type="submit" name="submit3" value="submit3"/>
</form>

In IE8, hitting enter does not submit any of the buttons, but clicking submit1 will send a value. It'll send "submit", not "submit1" which is inconsistent with FF. However, submitting the form only sends the value of one button in both browsers, which means I might be able to check which button was clicked by checking if GET['submitX'] exists instead! Chrome has slightly different behavior on pressing enter (submits button2). Opera seems consistent with FF... but all 4 browsers only ever submit one button. I don't have any earlier versions of the browsers installed though.... does anyone know if it works in earlier versions, particularly IE6?

Answer 1

Use hidden fields, they are the best way to do it.

<input type="hidden" value="any value you want to enter" />

Answer 2

Here is an alternative if you aren't sure about using a button tag.

<form method="get" action="">
    <input type="text" name="txt" />
    <input type="hidden" name="myinput" value="myvalue" />
    <input type="submit" name="submit" />
</form>

This will be more consistent than a button tag as as some browsers actually submit the text inside of the button tags rather than its value attribute. For example

<button name="mybutton" type="submit" value="one">Two</button>

In some browsers, you would have "one" submitted, in others, "Two".

If you want to act conditionally depending on the particular button pressed, you would have to do so based on the text on the input...

In this example, the display text ("Button 1" or "Button 2") would be posted back.

Firefox: "?txt=&submit=Button+1" IE: "?txt=&submit=Button+1" Safari: "?txt=&submit=Button+1"

And so on. Giving two form elements the same name is generally accepted as being possible as browsers support it. It isn't formally documented though, so you'll have to decide if you want to act on it.

As a final alternative, is there any reason why you can't give them a form field that let's them choose the control flow rather than having two buttons?

<form method="get" action="">
    <input type="text" name="txt" />
    <select name="myname">
        <option value="A">A</option>
        <option value="B">B</option>
    </select>
    <input type="submit" name="submit" value="Go" />
</form>

UPDATE

If you want two buttons for the case you mention in your comment... i.e. one button half-way down the form to refresh something based on a sub-set of inputs and another button at the bottom to submit, this is how you should do things...

1) The buttons should both do the same thing - simply submit the form.

2) You should detect server-side if you have a valid form (if they are working sequentially and have hit the first of the two submits, you will have blank inputs for the second half of the form - rendering it invalid).

3) You should detect server-side if you have enough information to perform the calculation or refresh that you mention in your comment.

In cases 2 and 3, you should mark the fields that are required for the user to proceed.

This negates the need for particular buttons to do particular things - the user could type in the first half of the form and still hit the button at the bottom - so you don't want to base your logic on which button was pressed.

Answer 3

Don't attach values to buttons of type submit. A button with type submit submits a form. That is all it does and should ever hope to do. Any submission method of any form is equal to all other submission methods of that same form in purpose and data scope. To be logically correct to the intent of HTML you need to use separate forms if you wish different data to be conditionally returned upon submission.

I understand my answer is inconvenient but it is the only correct answer without adding and removing hidden input fields using JavaScript.

Answer 4

You are trying to accomplish something that is not meant to be done with a button.

Rules are clear on this

The <button> tag defines a push button.

Inside a button element you can put content, like text or images. This is the difference between this element and buttons created with the input element.

Always specify the type attribute for the button. The default type for Internet Explorer is "button", while in other browsers (and in the W3C specification) it is "submit".

So, reading this you know that you should use <input type="submit">

The Submit Attribute has some rules as well

When activated, a submit button submits a form. A form may contain more than one submit button

so...

<html>
<head></head>
<body>
    <form method="get" action="">
      <input type="submit" value="vA" name="nA">
      <input type="submit" value="vB" name="nB">
      <input type="submit" value="vC" name="nC">
    </form>
</body>
</html>

results:

test.htm?nA=vA
test.htm?nB=vB
test.htm?nC=vC

no matter what browser you use