Two submit buttons (or the like) for different options in a form

[djr33]

Ok... so... a form would generally be organized like this:

<form ...>
<input(s)>
<[submit button]>
</form>

...but what if you want to have two submit buttons? Well... sure... just copy that code. But, I want them to actually do two different things.

What i'm trying to do is basically what is happening below me as I type, having a preview button and a submit button.
You can't just have a link because that won't get the values of the form and move them to the next page.
You can't have two submit buttons because they'd do the same thing, defeating the purpose.


Btw, I realized that you could just have a checkbox and check 'preview only' and the script on the next page would then preview it for you instead of submitting... but that seems ugly from a user perspective.
Maybe the name of the second submit button could differ and that would relate to the script on the next page?

There's probly a simple answer.

Thanks.

[mwinter]

<form ...>
<input(s)>
<[submit button]>
</form>

...but what if you want to have two submit buttons?

Make the submit buttons successful controls.

For a submit button to work, one usually only needs to write:

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

Unlike the other controls within the form, the value of that submit button won't be sent with the rest of the form data. This is because it isn't successful: in this case, it has no name attribute[1].

To use two (or more) submit buttons, name them (the same name, if preferred). One can then check server-side which was pressed by looking for the name/value pair. Only the activated button will be submitted.

Be careful with multiple submit buttons, though. Users are often familiar with the ability to submit a form just by pressing Enter. Usually, this action activates the first submit button in document order, which may or may not be the desired result.

Mike


[1] The HTML Specification defines successful controls.

[djr33]

Hmm... good info. I played with a few things and this worked out... though just in a test page, not for a real application (*yet).

It's a good point about pressing enter.

So... if I had:
<form ...>
<inputs...>
<[send]>
<[preview (send)]>
</form>

it would work?
'cause you'd assume send/submit would be what you'd want, not preview...