How do I tell which button was pushed?

When using <button>s on <form>s

[grahamstewart]

Today I moved my old forms over to using the

<button type="submit">Okay</button>

tag instead of the

<input type="submit" value="Okay">

But this had some unexpected consequences.
The old html looked like this...

<form method="get" action="thispage.php">
<div>
<input type="submit" name="okay" value="Okay">
<input type="submit" name="cancel" value="Cancel">
</div>
</form>

..and when I pressed one of the buttons I got a query string like "thispage.php?okay=Okay" or "thispage.php?cancel=Cancel" so it was easy to figure out which button was pressed in my server-side handling.

But when I switched to the new code, which looks like this..

<form method="get" action="thispage.php">
<div>
<button type="submit" name="okay">Okay</button>
<button type="submit" name="cancel">Cancel</button>
</div>
</form>

..the query string always looks like "thispage.php?okay=Okay&cancel=Cancel" regardless of which button is pressed.

So how do I figure out which button was pressed when I'm using the <button> tag? Is there something else I can add to the html?

I'd like to stick with the <button> tag if possible, because its a lot more flexible and easier to style with css. And I don't want to have to add a client-side solution like a javascript.

Thoughts?

[ShawnR]

Try the value="..." atribute

<button type="submit" name="okay" value="pressed">

[grahamstewart]

Nope - thought of that unfortunately - value appears to be completely ignored and doesn't appear in the query string at all.

[rainborick]

Perhaps you could add a hidden field and add an onclick handler to your buttons that would record which button was pressed, as in:

<form method="get" action="thispage.php">
<div>
<input type="hidden" name="whichone" value="">
<button type="submit" onclick="this.form.whichone.value=okay;" name="okay">Okay</button>
<button type="submit" onclick="this.form.whichone.value=cancel;" name="cancel">Cancel</button>
</div>
</form>

{Note: thoroughly untested code).

[WibbleWobble]

Have you tried type="reset" on the cancel button? Would this have any effect on the query string parsed? Who knows :\

[Lennie]

This should work
<form method="get">
<div>
<input type="button" value="Okay" onClick=location.href="thispage.php?okay=Okay">
<input type="button" value="Cancel" onClick=location.href="thispage.php?cancel=Cancel"></div>
</form>

[grahamstewart]

Thanks for the various suggestions.

Unfortunately, I need a page that doesn't use Javascript so the onclick handlers solution is a non-starter. :(

> Have you tried type="reset" on the cancel button?

Yup, but reset just sets the form data back to its original values - it doesn't cause a submit or affect the url.

Surely there must be some way to do this or is it just a gaping hole in the standard?

I might have to go back to <input type="submit"> :(

[ShawnR]

I don't think it is a gap in the standard. According to the standard, the value="..." attribute should do what you want, so either there is a bug in the browser, or you are doing something else wrong. Can't really see what, though.

You could try setting the id="..." attribute of each of the buttons to a unique value. (Just a guess; I haven't had a chance to play with it myself)

Shawn

[garann]

If all you have in your form is the two buttons, or you only look at the rest of the data in your form when the "Okay" button is pressed, you could just use two seperate forms..

Other than that, I'd think you'd have to use either the <input> tag or javascript. Or, if you're using ASP.NET on the server side, you might be able to work something out with post-back and server controls.

Luck,
g.

[ShawnR]

PS

I know you don't want to use Javascript, but in case anyone else is trying to do a similar thing...

This should work
<form method="get">
<div>
<input type="button" value="Okay" onClick=location.href="thispage.php?okay=Okay">
<input type="button" value="Cancel" onClick=location.href="thispage.php?cancel=Cancel"></div>
</form>

I don't think that will work well. What will happen is you will get 2 calls to the .php page. The first with "...?okay=Okay", and the second (before the browser has finished loading the first) with "...?all the form variables". It will be as if the user cancelled his action with the first post, went back, and submitted the form again, but this time without the stuff which identifies the button. If you stop the processing of the second call with "return false;", the first call contains none of the form data, other than which buitton was pressed.

[grahamstewart]

Grrrr... looks like its an IE 'feature'!

Opera7 and Netscape7 only add a value in the query string for the button you press. IE always adds both.

A clear breach of the HTML4.01 forms spec [w3.org] which says..

Every successful control has its control name paired with its current value as part of the submitted form data set.. yada..yada.. If a form contains more than one submit button, only the activated submit button is successful.

In fact it gets worse than that. The button tag [w3.org] is supposed to offer you rich rendering because it can contain html, but if you do something like this..

<form method="get" action="thispage.html">
<p>
<button name="okay" value="1"><img src="prettybutton.gif"><br><b>Okay</b></button>
</p>
</form>

It will produce a query string like this_page.html?okay=1 in Opera and NN but IE will produce this instead..

thispage.html?okay=%3CIMG+src%3D%22prettybutton.gif%22%3E%3CBR%3E%3CB%3EOkay%3C%2FB%3E

..encoding the entire html content of the button tag instead of its value.

Sad sad sad :( :(

Thanks for everyones help, but I think I'll have to go back to the <input type="submit"> style. At least that works as documented.

Now if I could just figure out how to write a CSS selector so I could style those <input> buttons without having to give them all classes ( input[type=submit] should work but doesn't in IE! )

(PS Shawn: setting id had no effect either. Garann: two forms is the only way I can see to make it work too but given the flawed implementation of button I'm giving up)

[ShawnR]

Yes, I thought it may be a bug in the browser. I didn't think id would have any effect, I was just clutching at straws.

If you get the CSS going, please post back.

Shawn