标签云

多个提交按钮的HTML表单中的

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>

2016年12月08日44分58秒

I hope this helps. I'm just doing the trick of floating the buttons on the right.

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

.f {
  float: right;
}
<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>

2016年12月07日44分58秒

Would it be possible for you to change the previous button type into 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.

2016年12月07日44分58秒

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

2016年12月07日44分58秒

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.

2016年12月07日44分58秒

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.

2016年12月07日44分58秒

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

2016年12月07日44分58秒

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)" />

2016年12月07日44分58秒

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!

2016年12月07日44分58秒

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.

<html>
<head>
    <style>
        div.defaultsubmitbutton {
            display: none;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        <p><input type="text" name="filter"><input type="submit" value="Filter"></p>
        <p>Filtered results</p>
        <input type="radio" name="choice" value="1">Filtered result 1
        <input type="radio" name="choice" value="2">Filtered result 2
        <input type="radio" name="choice" value="3">Filtered result 3
        <div>                
            <input type="submit" name="prev" value="Prev">
            <input type="submit" name="next" value="Next">
        </div>
    </form>
</body>
</html>

2016年12月07日44分58秒

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.

2016年12月07日44分58秒

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

2016年12月07日44分58秒

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.

2016年12月07日44分58秒

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.

2016年12月07日44分58秒

This is what i have tried out: 1. You need to make sure you give your buttons different names 2. Write an if statement that will do the required action if either button in clicked.

<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>

In PHP,

if(isset($_POST['prev']))
{
header("Location: previous.html");
die();
}

if(isset($_POST['next']))
{
header("Location: next.html");
die();

}

2016年12月07日44分58秒

From https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

A form element's default button is the first submit button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form)...

Having the next input be type="submit" and changing the previous input to type="button" should give the desired default behavior.

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

   <input type="button" 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>

2016年12月07日44分58秒

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.

<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>

<script type="text/javascript">
    $(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>

Hope this helps.

2016年12月07日44分58秒

The first time I came up against this I came up with an onclick()/js hack when choices are not prev/next that I still like for its simplicity. It goes like this:

@model myApp.Models.myModel    

<script type="text/javascript">
    function doOperation(op) {
        document.getElementById("OperationId").innerText = op;
        // you could also use Ajax to reference the element.
    }
</script>

<form>
  <input type="text" id = "TextFieldId" name="TextField" value="" />
  <input type="hidden" id="OperationId" name="Operation" value="" />
  <input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
  <input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>

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:

// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
     // do read logic
}
else if (myModel.Operation == "Write")
{
     // do write logic
}
else
{
     // do error logic
}

You can also tighten this up slightly using numeric Operation codes to avoid the string parsing, but unless you play with Enums, the code is less readable, modifiable, and self-documenting and the parsing is trivial, anyway.

2016年12月07日44分58秒

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');
    }
});

2016年12月07日44分58秒

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.

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

Just in case someone is looking for the asp.net button way to do it.

2016年12月07日44分58秒

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

2016年12月07日44分58秒

© 2016 91R.NET 版权所有