Multiple submit buttons in an 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.

Example:

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

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</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

Another simple option would be to put the back button after the submit button in the HTML code but float it to the left so it appears on the page before the submit button.

Changing the tab order should be all it takes to accomplish this. Keep it simple.

Answer 2

keep the name of all submit buttons the same -- "prev" The only difference is the value attribute with unique values. When we create the script, these unique values will help us to figure out which of the submit buttons was pressed.

And write follwing coding:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

Answer 3

If you have multiple active buttons on one page then you can do something like this:

Mark the first button you want triggers on Enter keypress as defaultbutton on the form. For the second button associate it to Backspace button on keyboard. Backspace eventcode is 8.

$(document).on("keydown", function(event) {
  if (event.which.toString() == "8") {
    var findActiveElementsClosestForm = $(document.activeElement).closest("form");

    if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) {
      $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");
    }
  }
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<form action="action" method="get" defaultbutton="TriggerOnEnter">
  <input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" />
  <input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" />
</form>

Hope this helps.

Answer 4

With javascript (here jQuery), you can disable the prev button before submit the form.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

Answer 5

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 6

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.