Multiple submit buttons on a HTML form

Question

Let's say you create a Wizard in an HTML form. One button goes back and one goes forward. Since the "back" button appears first in the markup, when you press Enter it will use that button to submit the form.

Ex:

<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

   <input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

What I would LIKE to do, is get to decide which button is used to submit the form when a user presses Enter. That way, when you press Enter the Wizard will move to the next page, not the previous. Do you have to use tabindex to do this?

Answer 1

One ideas is to use two buttons and use javascript to submit the form but this will rely on the user using javascript and there is probably a better way of completing the task

Answer 2

Give your submit buttons same name like this:

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

When the user presses enter and the Request goes to server, you can check the value for submitButton on your server-side code which contains a collection of form name/value pairs. For example in classic ASP:

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

Reference: Using multiple submit buttons on a single form

Answer 3

Would it be possible for you to change the previous button type int a button like this:

<input type="button" name="prev" value="Previous Page" />

Now the Next button would be the default, plus you could also add the default attribute to it so that your browser will highlight it like so:

<input type="submit" name="next" value="Next Page" default />

Hope that helps,
Wally

Answer 4

@huseyint

If I give the button the same name, won't the first button that shows up in the markup still be used when I press ENTER? So it will still go to the previous page...

Answer 5

Give them two different IDs. They can have the same name, whatever.

Then, use Javascript to detect the enter key press on the textbox, or whatever. Once there, determine which to click, then get a reference to the button and call the click() method on that button.

Answer 6

If the fact that the first button is used by default is consistent across browsers, why not put them the right way round in the source code, then use CSS to switch their apparent positions? float them left and right to switch them around visually, for example.

Answer 7

@huseyint - great answer but you didn't read the question properly! :) The issue is not to do with handling the different buttons, but which action gets activated by pressing return in the form...

Answer 8

I would use Javascript to submit the form. The function would be triggered by the OnKeyPress event of the form element, and would detect whether the Enter key was selected. If this is the case, it will submit the form.

Here are two pages that give techniques on how to do this: 1, 2. Based on these, here is an example of usage (based on here):

<SCRIPT TYPE="text/javascript"><!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) { 
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />

Answer 9

@Flubba That would work but for users using screen-readers or users without CSS enabled or with poor CSS support for floats (eg. mobile device browsers) they would get the buttons in the order they are in the source code. That may or may not be a huge issue though.

@Yaakov There are a few minor issues with this but a big one is that you would want to check that there is not another link that currently has focus otherwise you break conventional keyboard navigation.

Answer 10

@Power-coder

Sorry, I just tested this and it does not work. "Default" is not a valid attribute for a submit button.

However, reverting "previous page" to a button instead of a submit does seem to work. Unfortunately you can't submit with that button anymore without javascript.

Answer 11

Using the example you gave:

<form>
<input type="text" name="field1" /><!-- put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

If you click on "Previous Page" only the value of "prev" will be submitted. If you click on "Next Page" only the value of "next" will be submitted.

If however, you press enter somewhere on the form, neither "prev" nor "next" will be submitted.

So using pseudo code you could do the following:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

Answer 12

@GateKiller

The first button will be submitted (previous).

I think some of you don't quite understand what I'm trying to accomplish here... It's not exactly something that translates to the web though... Imaging you are installing a program on windows. You can pretty much just breeze through the installer by pressing Enter. Usually, the button to progress to the next screen is on the right, and the button to go the previous screen is on the left. That's what I'm trying to do, although I doubt it is possible without CSS like was stated before.

Answer 13

If you really just want it to work like an install dialog, what about just giving focus to the "Next" button OnLoad. That way if the user hits Return, the form submits and goes forward. If they want to go back they can hit Tab or click on the button.

Answer 14

Kevin, this cannot be done with pure HTML. You must rely on JavaScript for this trick.

However, if you place two forms on the HTML page you can do this.

Form1 would have the previous button.

Form2 would have any user inputs + the next button.

When the user presses Enter in Form2, the Next submit button would fire.

Answer 15

Hi, I hope this helps. I'm just doing the trick of floating the buttons on the right - like in normal wizard :-)

This way the Prev button is left of the Next button but the Next comes first in the HTML code:

<html>
<head>
    <style>
        .f {
            float: right;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <input type="text" name="abc">
        <div id="buttons">
            <input type="submit" class="f" name="next" value="Next">
            <input type="submit" class="f" name="prev" value="Prev">
            <div style="clear:both"></div><!-- Need this to have the buttons actually inside div#buttons -->
        </div>
    </form>
</body>
</html>

Hope this helps... :-) Edit: benefits over other suggestions: no javascript, accessible, both buttons remain type="submit"

Answer 16

Kevin,

This works without javascript or CSS in most browsers:

<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>

Firefox, Opera, Safari, Google Chrome all work.
As always, IE is the problem.

This version works when javascript is turned on:

<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>

So the flaw in this solution is:
Previous Page does not work if you use IE with Javascript off.
Mind you, the back button still works!

Answer 17

It can work with CSS

Put them in the markup as the next button first, then the previous button next.

Then use CSS to position them to appear the way you want