Mehrere Absenden-Schaltflächen in einem HTML-Formular

Question

Nehmen wir an, Sie erstellen einen Assistenten in einem HTML-Formular.Eine Taste geht zurück und eine geht vorwärts.Seit der zurück Wenn die Schaltfläche zuerst im Markup erscheint, wenn Sie die Eingabetaste drücken, wird diese Schaltfläche zum Absenden des Formulars verwendet.

Beispiel:

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

Ich möchte entscheiden, welche Schaltfläche zum Absenden des Formulars verwendet wird, wenn ein Benutzer die Eingabetaste drückt.Auf diese Weise wechselt der Assistent beim Drücken der Eingabetaste zur nächsten Seite und nicht zur vorherigen.Müssen Sie verwenden? tabindex um dies zu tun?

Answer 1

Ich hoffe das hilft.Ich mache nur den Trick floatindem Sie die Tasten rechts betätigen.

Auf diese Weise die Prev Die Schaltfläche befindet sich links davon Next Taste, aber die Next steht in der HTML-Struktur an erster Stelle:

.f {
  float: right;
}
.clr {
  clear: both;
}

<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 class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

Bearbeiten: Vorteile gegenüber anderen Vorschlägen:kein JavaScript, barrierefrei, beide Buttons bleiben erhalten type="submit"

Answer 2

Wäre es für Sie möglich, den vorherigen Schaltflächentyp in eine Schaltfläche wie diese zu ändern:

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

Jetzt wäre die Schaltfläche „Weiter“ die Standardeinstellung, und Sie könnten auch die hinzufügen default Attribut hinzufügen, damit Ihr Browser es wie folgt hervorhebt:

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

Hoffentlich hilft das.

Answer 3

Geben Sie Ihren Submit-Buttons denselben Namen wie diesen:

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

Wenn der Benutzer die Eingabetaste drückt und die Anfrage Geht zum Server, Sie können den Wert überprüfen submitButton auf Ihrem serverseitigen Code, der eine Sammlung von Formularen enthält name/value Paare.Zum Beispiel im klassischen 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

Referenz: Verwendung mehrerer Absenden-Schaltflächen in einem einzigen Formular

Answer 4

Wenn die Tatsache, dass die erste Schaltfläche standardmäßig verwendet wird, in allen Browsern konsistent ist, warum platzieren Sie sie dann nicht richtig herum im Quellcode und verwenden Sie dann CSS, um ihre scheinbaren Positionen zu ändern? float Sie können sie nach links und rechts verschieben, um sie beispielsweise optisch zu vertauschen.

Answer 5

Wenn Sie wirklich nur möchten, dass es wie ein Installationsdialog funktioniert, können Sie beim Laden einfach den Fokus auf die Schaltfläche „Weiter“ legen.Wenn der Benutzer auf diese Weise auf „Zurück“ klickt, wird das Formular abgesendet und geht weiter.Wenn sie zurückgehen möchten, können sie die Tabulatortaste drücken oder auf die Schaltfläche klicken.

Answer 6

Manchmal reicht die von @palotasb bereitgestellte Lösung nicht aus.Es gibt Anwendungsfälle, in denen beispielsweise eine „Filter“-Senden-Schaltfläche über Schaltflächen wie „Weiter“ und „Zurück“ platziert wird.Ich habe eine Problemumgehung dafür gefunden: Kopieren die Schaltfläche „Senden“, die als Standardschaltfläche „Senden“ in einem versteckten Div fungieren und im Formular über jeder anderen Schaltfläche „Senden“ platziert werden muss.Technisch gesehen erfolgt die Übermittlung über eine andere Schaltfläche, wenn Sie die Eingabetaste drücken, als wenn Sie auf die sichtbare Schaltfläche „Weiter“ klicken.Da Name und Wert jedoch gleich sind, gibt es keinen Unterschied im Ergebnis.

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

Answer 7

Kevin, das geht mit reinem HTML nicht.Für diesen Trick müssen Sie sich auf JavaScript verlassen.

Wenn Sie jedoch zwei Formulare auf der HTML-Seite platzieren, ist dies möglich.

Form1 hätte die vorherige Schaltfläche.

Form2 hätte alle Benutzereingaben + die Schaltfläche „Weiter“.

Wenn der Benutzer drückt Eingeben In Form2 würde die Schaltfläche „Nächstes Senden“ ausgelöst.

Answer 8

Sie können es mit CSS tun.

Platzieren Sie die Schaltflächen mit dem im Markup Next Zuerst die Taste, dann die Prev anschließend die Taste drücken.

Verwenden Sie dann CSS, um sie so zu positionieren, dass sie Ihren Wünschen entsprechen.

Answer 9

Ich würde Javascript verwenden, um das Formular abzusenden.Die Funktion würde durch das OnKeyPress-Ereignis des Formularelements ausgelöst und würde erkennen, ob die Eingabetaste gedrückt wurde.Ist dies der Fall, wird das Formular abgesendet.

Auf den folgenden zwei Seiten finden Sie Techniken dazu: 1, 2.Darauf aufbauend finden Sie hier ein Anwendungsbeispiel (basierend auf Hier):

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

Kevin,

Dies funktioniert in den meisten Browsern ohne Javascript oder CSS:

<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 funktionieren alle.
Wie immer ist der IE das Problem.

Diese Version funktioniert, wenn Javascript aktiviert ist:

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

Der Fehler in dieser Lösung ist also:
„Vorherige Seite“ funktioniert nicht, wenn Sie den IE mit deaktiviertem Javascript verwenden.
Allerdings funktioniert der Zurück-Button immer noch!

Answer 11

Wenn Sie mehrere aktive Schaltflächen auf einer Seite haben, können Sie Folgendes tun:

Markieren Sie die erste Schaltfläche, die ausgelöst werden soll Eingeben Tastendruck als Standardschaltfläche im Formular.Für die zweite Schaltfläche verknüpfen Sie es mit Rücktaste Taste auf der Tastatur. Rücktaste Der Ereigniscode ist 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>

Hoffe das hilft.

Answer 12

Um dies zu erreichen, reicht es aus, die Tab-Reihenfolge zu ändern.Halte es einfach.

Eine andere einfache Möglichkeit wäre, die Zurück-Schaltfläche nach der Senden-Schaltfläche im HTML-Code zu platzieren, sie aber nach links zu verschieben, sodass sie auf der Seite vor der Senden-Schaltfläche erscheint.

Answer 13

Eine andere einfache Möglichkeit wäre, die Zurück-Schaltfläche nach der Senden-Schaltfläche im HTML-Code zu platzieren, sie aber nach links zu verschieben, sodass sie auf der Seite vor der Senden-Schaltfläche erscheint.

Um dies zu erreichen, reicht es aus, die Tab-Reihenfolge zu ändern.Halte es einfach.

Answer 14

Behalten Sie den Namen aller Submit-Schaltflächen bei – „prev“. Der einzige Unterschied besteht darin value Attribut mit eindeutigen Werten.Wenn wir das Skript erstellen, helfen uns diese eindeutigen Werte herauszufinden, welche der Senden-Schaltflächen gedrückt wurde.

Und schreiben Sie folgende Codierung:

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

Answer 15

Als ich zum ersten Mal damit konfrontiert wurde, kam ich auf einen onclick()/js-Hack, wenn die Auswahlmöglichkeiten nicht prev/next sind, der mir wegen seiner Einfachheit immer noch gefällt.Es geht so:

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

Wenn auf eine der Schaltflächen „Senden“ geklickt wird, wird der gewünschte Vorgang in einem ausgeblendeten Feld (einem Zeichenfolgenfeld, das in dem Modell enthalten ist, mit dem das Formular verknüpft ist) gespeichert und das Formular an den Controller gesendet, der die gesamte Entscheidung trifft.Im Controller schreiben Sie einfach:

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

Sie können dies auch etwas verschärfen, indem Sie numerische Operationscodes verwenden, um das Parsen von Zeichenfolgen zu vermeiden. Wenn Sie jedoch nicht mit Enums spielen, ist der Code weniger lesbar, modifizierbar und selbstdokumentierend und das Parsen ist ohnehin trivial.

Answer 16

Folgendes habe ich ausprobiert:1.Sie müssen sicherstellen, dass Sie Ihren Schaltflächen verschiedene Namen 2 angeben.Schreiben Sie eine if-Anweisung, die die erforderliche Aktion ausführt, wenn auf eine der beiden Schaltflächen geklickt wird.

<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();

}

Answer 17

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

Die Standardtaste eines Formularelements ist die erste Schaltfläche Senden in Baumreihenfolge, deren Formularbesitzer dieses Formularelement ist.

Wenn der Benutzeragent dem Benutzer dabei unterstützt, ein Formular implizit einzureichen (z.

Wenn die nächste Eingabe type="submit" ist und die vorherige Eingabe in type="button" geändert wird, sollte das gewünschte Standardverhalten erzielt werden.

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

Answer 18

Ich bin auf diese Frage gestoßen, als ich versuchte, eine Antwort auf im Grunde dasselbe zu finden, nur mit asp.net-Steuerelementen, als ich herausfand, dass die ASP-Schaltfläche eine Eigenschaft namens hat UseSubmitBehavior Damit können Sie festlegen, wer die Übermittlung durchführt.

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

Nur für den Fall, dass jemand nach der Möglichkeit sucht, dies mit der asp.net-Schaltfläche zu tun.

Answer 19

Mit Javascript (hier jQuery) können Sie die Schaltfläche „Zurück“ deaktivieren, bevor Sie das Formular absenden.

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

Answer 20

Ich habe ein sehr ähnliches Problem folgendermaßen gelöst:

1. Wenn javascript aktiviert ist (heutzutage in den meisten Fällen), dann sind alle Senden-Schaltflächen „degradiert" zu Schaltflächen beim Laden der Seite über javascript (jquery).Klicken Sie auf „Ereignisse“ auf der Seite „degradiert„Schaltflächen vom Typ „Schaltfläche“ werden auch über verwaltet javascript.

2. Wenn javascript nicht aktiviert ist, wird das Formular mit mehreren Senden-Schaltflächen an den Browser übermittelt.In diesem Fall drücken Sie die Eingabetaste bei a textfield Innerhalb des Formulars wird das Formular mit der ersten Schaltfläche anstelle der vorgesehenen Schaltfläche abgesendet Standard, aber zumindest ist das Formular noch verwendbar:Sie können beides einreichen vorh Und nächste Tasten.

Arbeitsbeispiel:

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>
    <body>
    <form action="http://httpbin.org/post" method="post">
    If javascript is disabled, then you CAN submit the form with button1, button2 or button3.
    If you press enter on a text field, then the form is submitted with the first submit button.

    If javascript is enabled, then the submit typed buttons without the 'defaultSubmitButton'
    style are converted to button typed buttons.

    If you press enter on a text field, then the form is submitted with the only submit button
    (the one with class defaultSubmitButton)
    If you click on any other button in the form, then the form is submitted with that button's
    value.
    <br />
    <input type="text" name="text1" ></input>
    <button type="submit" name="action" value="button1" >button 1</button>
    <br />
    <input type="text" name="text2" ></input>
    <button type="submit" name="action" value="button2" >button 2</button>
    <br />
    <input type="text" name="text3" ></input>
    <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button>
    </form>
    <script>
    $(document).ready(function(){

    /* change submit typed buttons without the 'defaultSubmitButton' style to button typed buttons */
    $('form button[type=submit]').not('.defaultSubmitButton').each(function(){
        $(this).attr('type', 'button');
    });

    /* clicking on button typed buttons results in:
       1. setting the form's submit button's value to the clicked button's value,
       2. clicking on the form's submit button */
    $('form button[type=button]').click(function( event ){
        var form = event.target.closest('form');
        var submit = $("button[type='submit']",form).first();
        submit.val(event.target.value);
        submit.click();
    });

    });
    </script>
    </body>
    </html>

Answer 21

Versuche dies..!

<form>
  <input type="text" name="Name" />
  <!-- Enter the value -->

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

Answer 22

Sie können verwenden Tabindex Um dieses Problem zu lösen, wäre es effizienter, die Reihenfolge der Schaltflächen zu ändern.Ändern Sie die Reihenfolge der Schaltflächen und fügen Sie hinzu float Werte, um ihnen die gewünschte Position zuzuweisen, die Sie in Ihrem anzeigen möchten HTML Sicht.

Answer 23

Anhand des Beispiels, das Sie gegeben haben:

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

Wenn Sie auf „Vorherige Seite“ klicken, wird nur der Wert von „vorherige“ übermittelt.Wenn Sie auf „Nächste Seite“ klicken, wird nur der Wert „Weiter“ übermittelt.

Wenn Sie jedoch irgendwo im Formular die Eingabetaste drücken, wird weder „Vorheriges“ noch „Weiteres“ übermittelt.

Mit Pseudocode könnten Sie also Folgendes tun:

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