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 doesn’t 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 because 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

Oldish post but I think there is a solution that has been missed here. The button[type=submit] has always had problems with inconsistent behaviour, particularly with old IEs, and from @Mark’s tests looks like we still have problems.

Instead you can use two different values for the name attribute of the input[type=submit] and parse these server-side to get the correct action. For example, you can do:

<form method="get" action="">
    <input type="text" name="txt"/>
    <input type="submit" name="action[do_something]" value="Do Something Cool"/>
    <input type="submit" name="action[do_another]" value="Do Something Dangerous"/>
</form>

Only the successful (clicked or default) name-value pair gets submitted so, say, in PHP you can easily do something like:

<?php
if (isset($_GET['action']['do_something'])) {
    // do something
} else {
    // do another thing
}
?>

Note the default action will always be the first that appears in the source.