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>
I hope this helps. I'm just doing the trick of
float
ing the buttons to the right.This way the
Prev
button is left of theNext
button, but theNext
comes first in the HTML structure:Change the previous button type into a button like this:
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:Give your submit buttons the same name like this:
When the user presses Enter and the request goes to the server, you can check the value for
submitButton
on your server-side code which contains a collection of formname/value
pairs. For example, in ASP Classic:Reference: Using multiple submit buttons on a single form
If the fact that the first button is used by default is consistent across browsers, put them the right way around in the source code, and then use CSS to switch their apparent positions.
float
them left and right to switch them around visually, for example.If you really just want it to work like an install dialog, just give 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.
Sometimes the provided solution by @palotasb is not sufficient. There are use cases where for example a "Filter" submit button is placed above buttons like "Next and Previous". I found a workaround for this: copy the submit button which needs to act as the default submit button in a hidden div and place it inside the form above any other submit button. Technically it will be submitted by a different button when pressing Enter then when clicking on the visible Next button. But since the name and value is the same, there's no difference in the result.
You can do it with CSS.
Put the buttons in the markup with the
Next
button first, then thePrev
button afterwards.Then use CSS to position them to appear the way you want.
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.
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):
This works without JavaScript or CSS in most browsers:
Firefox, Opera, Safari, and Google Chrome all work.
As always, Internet Explorer is the problem.
This version works when JavaScript is turned on:
So the flaw in this solution is:
Previous Page does not work if you use Internet Explorer with JavaScript off.
Mind you, the back button still works!
If you have multiple active buttons on one page then you can do something like this:
Mark the first button you want to trigger on the Enter keypress as the default button on the form. For the second button, associate it to the Backspace button on the keyboard. The Backspace eventcode is 8.
Changing the tab order should be all it takes to accomplish this. Keep it simple.
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.
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.
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 the following coding:
The first time I came up against this, I came up with an onclick()/JavaScript hack when choices are not prev/next that I still like for its simplicity. It goes like this:
When either submit button is clicked, it stores the desired operation in a hidden field (which is a string field included in the model the form is associated with) and submits the form to the Controller, which does all the deciding. In the Controller, you simply write:
You can also tighten this up slightly using numeric operation codes to avoid the string parsing, but unless you play with enumerations, the code is less readable, modifiable, and self-documenting and the parsing is trivial, anyway.
From https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
Having the next input be type="submit" and changing the previous input to type="button" should give the desired default behavior.
This is what I have tried out:
if
statement that will do the required action if either button is clicked.In PHP,
I came across this question when trying to find an answer to basically the same thing, only with ASP.NET controls, when I figured out that the ASP button has a property called
UseSubmitBehavior
that allows you to set which one does the submitting.Just in case someone is looking for the ASP.NET button way to do it.
With JavaScript (here jQuery), you can disable the prev button before submitting the form.
Try this..!
I solved a very similar problem in this way:
If JavaScript is enabled (in most cases nowadays) then all the submit buttons are "degraded" to buttons at page load via JavaScript (jQuery). Click events on the "degraded" button typed buttons are also handled via JavaScript.
If JavaScript is not enabled then the form is served to the browser with multiple submit buttons. In this case hitting Enter on a
textfield
within the form will submit the form with the first button instead of the intended default, but at least the form is still usable: you can submit with both the prev and next buttons.Working example:
You can use
Tabindex
to solve this issue. Also changing the order of the buttons would be a more efficient way to achieve this.Change the order of the buttons and add
float
values to assign them the desired position you want to show in yourHTML
view.Using the example you gave:
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 pseudocode you could do the following:
Hasonló problémák
Legutóbbi kérdések
Licensed under cc by-sa 3.0 with attribution required.