Mehrere Senden-Schaltflächen in einem HTML-Formular

263

Angenommen, Sie erstellen einen Assistenten in einem HTML-Formular. Ein Knopf geht zurück und einer geht vorwärts. Da die Zurück- Schaltfläche beim Drücken zuerst im Markup angezeigt wird Enter, wird diese Schaltfläche zum Senden 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>
Erweitern Sie das Snippet

Ich möchte entscheiden können, über welche Schaltfläche das Formular gesendet wird, wenn ein Benutzer drückt Enter. Auf diese Weise wechselt Enterder Assistent beim Drücken zur nächsten Seite, nicht zur vorherigen. Müssen Sie dazu verwenden tabindex?

html forms form-submit submit-button Kevin
quelle

Antworten:

142

Ich hoffe das hilft. Ich mache nur den Trick, floatdie Knöpfe rechts zu drücken.

Auf diese Weise Prevbleibt die Schaltfläche links von der NextSchaltfläche, aber die Nextsteht 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>
Erweitern Sie das Snippet

Vorteile gegenüber anderen Vorschlägen: Kein JavaScript-Code verfügbar, und beide Schaltflächen bleiben erhalten type="submit".

palotasb
quelle
23
Bitte tun Sie dies nicht, ohne auch die Tabulatorreihenfolge zu ändern, damit durch Drücken der Tabulatortaste die Schaltflächen so durchlaufen werden, wie sie auf dem Bildschirm angezeigt werden.
Steve
61

Ändern Sie den vorherigen Schaltflächentyp in eine Schaltfläche wie folgt: 

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

Jetzt ist die Schaltfläche Weiter die Standardeinstellung. Außerdem können Sie das defaultAttribut hinzufügen , damit Ihr Browser es wie folgt hervorhebt:

<input type="submit" name="next" value="Next Page" default />
Wally Lawless
quelle
39
Über welches defaultAttribut sprichst du? Es gibt kein "Standard" -Attribut, das gültig wäre: w3.org/html/wg/drafts/html/master/… (nicht in HTML5, HTML 4.01 Transitional / Strict, XHTML 1.0 Strict). Und ich verstehe nicht, warum es besser wäre, den Eingabetyp von submitauf buttonzu ändern . Sie können problemlos mehrere Eingabeelemente vom Typ "Senden" in einem Formular haben. Ich verstehe nicht wirklich, warum diese Antwort so positiv bewertet wird.
Sk8erPeter
3
Wenn Sie eine Eingabe vom Typ "Schaltfläche" haben, wird die Formularaktion nicht ausgeführt. Sie können einen Klick oder etwas anderes ausführen und so eine andere Funktion als die "Standard" -Formularaktion ausführen (die durch Drücken der Schaltfläche "Senden" ausgeführt wird). Das habe ich gesucht und deshalb habe ich es positiv bewertet. Ich kann nicht für das "Standard" -Attribut sprechen, war nicht Teil meines Problems;) Vielen Dank für Ihre Klarstellung.
Jonas
2
@ Sk8erPeter, @Jonas .... hmm .. Ich vermute, dieses defaultAttribut ist ein globales Attribut; Aufzählungsattribut .., das sich auf Aufzählungsstatus bezieht : w3.org/html/wg/drafts/html/master/… . Abgesehen von diesem Punkt ist der Schaltflächenaspekt dieser Antwort keine Antwort. Es ist ein ' bedingter Vorschlag ' oder eine Abfrage ( Frage selbst ).
Brett Caswell
3
@ Jonas: Ja, sendet type="button"das Formular nicht, type="submit"tut es, aber das Ändern des Typs dieser Schaltflächen ist definitiv keine Lösung, da sich diese Schaltflächen grundsätzlich genauso verhalten sollten - die Frage des OP war, wie die Schaltfläche "Weiter" zum "Weiter" -Button gemacht werden soll Standard für das Drücken der Eingabetaste. Und es gibt eine mögliche Lösung in der akzeptierten Antwort.
Sk8erPeter
4
@BrettCaswell: Das Ändern des Typs dieser Schaltflächen ist eine schlechte Problemumgehung (siehe meinen vorherigen Kommentar). Es gibt kein gültiges defaultAttribut für inputTags (wie bereits erwähnt) in HTML, und die (beliebten) Browser markieren NICHT die Schaltfläche mit diesem Attribut. Dies bedeutet, dass dieses Attribut nicht standardmäßig implementiert ist. Daher weiß ich es immer noch nicht Worüber @Wally Lawless sprach und warum diese Antwort so überbewertet ist. Es gibt nur ein gültiges defaultAttribut in HTML5, ABER nur für das <track>Tag: developer.mozilla.org/en-US/docs/Web/HTML/Element/track
Sk8erPeter
56

Geben Sie Ihren Senden-Schaltflächen den gleichen Namen:

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

Wenn der Benutzer drückt Enterund die Anforderung an den Server gesendet wird, können Sie den Wert für submitButtonIhren serverseitigen Code überprüfen, der eine Sammlung von Formularpaaren enthält name/value. Zum Beispiel in ASP Classic :

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

Referenz: Verwenden mehrerer Senden-Schaltflächen in einem einzigen Formular

huseyint
quelle
26
Dies ist nicht das, was der Benutzer gefragt hat. Der Benutzer wollte wissen, wie er steuern kann, welche Senden-Schaltfläche in einem Formular aktiviert wird, wenn die Eingabetaste gedrückt wird, d. H. Dies ist die Standardschaltfläche.
Kosoant
20
funktioniert nicht in einer I18n-Anwendung, in der Sie die Beschriftung der Schaltfläche nicht einmal kennen.
Chris
In welcher System- oder Technologielösung würde der Server selbst nicht wissen, welches Etikett für die Schaltfläche "Weiter" und "Zurück" verwendet wurde? Hat der Server nicht zuerst die Schaltfläche "Weiter" und "Zurück" generiert? (Wenn die Lokalisierung auf der Clientseite durchgeführt wird, kann ich mir vorstellen, dass der Server es nicht weiß, aber ich habe noch nie davon für HTML gehört.)
Jacob
Diese Antwort verfehlt die Frage vollständig, wahrscheinlich handelt es sich um eine andere Frage. Warum so viele Upvotes ??? Ganz zu schweigen davon, dass man niemals nach der Beschriftung der Schaltfläche suchen sollte ... das verursacht viel Ärger. Selbst der einfache Fall: "Wir sollten die Zeichenfolge mit" Vorherige Seite "abkürzen" ruiniert die Funktionalität Ihrer Website.
Tylla
30

Wenn die Tatsache, dass die erste Schaltfläche standardmäßig verwendet wird, in allen Browsern konsistent ist, fügen Sie sie im Quellcode richtig herum ein und verwenden Sie dann CSS, um ihre scheinbaren Positionen zu wechseln.

float sie nach links und rechts, um sie beispielsweise visuell umzuschalten.

Polsonby
quelle
18

Manchmal reicht die von @palotasb bereitgestellte Lösung nicht aus. Es gibt Anwendungsfälle, in denen beispielsweise eine Schaltfläche zum Senden von "Filtern" über Schaltflächen wie "Weiter und Zurück" platziert ist. Ich habe eine Problemumgehung dafür gefunden: Kopieren Sie die Senden-Schaltfläche, die als Standard-Senden-Schaltfläche fungieren muss, in ein verstecktes Div und platzieren Sie sie im Formular über jeder anderen Senden-Schaltfläche. Technisch gesehen wird es beim Drücken der Eingabetaste über eine andere Schaltfläche gesendet als beim Klicken auf die sichtbare Schaltfläche Weiter. Da Name und Wert jedoch identisch 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>
netiul
quelle
17

Ich würde JavaScript verwenden, um das Formular zu senden. Die Funktion würde durch das OnKeyPress-Ereignis des Formularelements ausgelöst und würde erkennen, ob der EnterSchlüssel ausgewählt wurde. In diesem Fall wird das Formular gesendet.

Auf zwei Seiten finden Sie Techniken dazu: 1 , 2 . Basierend auf diesen ist 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)" />
Yaakov Ellis
quelle
2
Was passiert, wenn Javascript deaktiviert ist?
Jon Winstanley
2
Sie sollten <! - und -> nicht verwenden, um JS zu kommentieren. Diese Tags sind keine Javascript-Sprach-Token
Marecky
2
@Marecky Sie sollen JS nicht auskommentieren. Sie werden ignoriert, wenn der Inhalt von <script> in einem Browser analysiert wird, der <script> unterstützt. Heute sind sie wirklich nicht erforderlich. In sehr alten Browsern war dies jedoch ein Kompatibilitäts-Hack, um zu vermeiden, dass das Skript als einfacher Text gedruckt wird.
Leemes
17

Wenn Sie wirklich nur möchten, dass es wie ein Installationsdialog funktioniert, konzentrieren Sie sich einfach auf die Schaltfläche "Weiter" OnLoad.

Auf diese Weise Returnwird das Formular gesendet und weitergeleitet , wenn der Benutzer trifft . Wenn sie zurück wollen, können sie Tabauf die Schaltfläche klicken oder klicken.

Scott Gottreu
quelle
2
Sie bedeuten, dass jemand ein Formular ausfüllt und in einem Textfeld die Eingabetaste drückt.
Jordan Reiter
17

Dies ist mit reinem HTML nicht möglich. Sie müssen sich für diesen Trick auf JavaScript verlassen.

Wenn Sie jedoch zwei Formulare auf der HTML-Seite platzieren, können Sie dies tun.

Form1 hätte die vorherige Schaltfläche.

Form2 hätte alle Benutzereingaben + die nächste Schaltfläche.

Wenn der Benutzer Enterin Form2 drückt , wird die Schaltfläche Weiter senden gesendet.

FlySwat
quelle
16

Sie können es mit CSS tun.

Setzen Sie die Schaltflächen Nextzuerst mit der Schaltfläche in das Markup ein und anschließend mit der PrevSchaltfläche.

Verwenden Sie dann CSS, um sie so zu positionieren, dass sie wie gewünscht angezeigt werden.

qui
quelle
14

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 und Google Chrome funktionieren alle.
Wie immer ist Internet Explorer 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:

Die vorherige Seite funktioniert nicht, wenn Sie den Internet Explorer mit deaktiviertem JavaScript verwenden.

Wohlgemerkt, der Zurück-Button funktioniert immer noch!

Jolyon
quelle
1
Ohne Javascript können Sie die Schaltfläche "Vorherige Seite" nicht aktivieren, da der Typ = "Schaltfläche"!
Riskop
Das Problem mit Ihrem Vorschlag ist, dass ein Schaltflächentyp = "Schaltfläche" das Formular nicht veröffentlicht, also im Grunde nichts tut, während die zweite Version mit einem Anker ein GET anstelle eines POST erstellen würde.
Tylla
12

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

Markieren Sie die erste Schaltfläche, die Sie beim EnterTastendruck auslösen möchten, als Standardschaltfläche im Formular. Verknüpfen Sie die zweite Schaltfläche mit der BackspaceSchaltfläche auf der Tastatur. Der BackspaceEreigniscode 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>
Erweitern Sie das Snippet

user1591131
quelle
11

Das Ändern der Tabulatorreihenfolge sollte alles sein, um dies zu erreichen. Halte es einfach.

Eine andere einfache Option wäre, die Schaltfläche "Zurück" nach der Schaltfläche "Senden" in den HTML-Code einzufügen, sie jedoch nach links zu verschieben, damit sie auf der Seite vor der Schaltfläche "Senden" angezeigt wird.

Kenny Johnson
quelle
10 
<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page">

Behalten Sie den Namen aller Senden-Schaltflächen bei - "prev".

Der einzige Unterschied ist der value Attribut mit eindeutigen Werten. Wenn wir das Skript erstellen, können wir anhand dieser eindeutigen Werte herausfinden, welche der Senden-Schaltflächen gedrückt wurde.

Und schreiben Sie die folgende Codierung:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
Jayu
quelle
Das Problem ist, dass durch Drücken der Eingabetaste in einem Textfeld das Formular mit der ersten Schaltfläche zum Senden gesendet wird, nicht mit der beabsichtigten Schaltfläche (zweite im Beispiel). Es ist einfach herauszufinden, welche Schaltfläche zum Senden zum Senden des Formulars verwendet wurde, und das war nicht die Frage!
Riskop
Warum name="perv"?
Peter Mortensen
10

Eine andere einfache Option wäre, die Schaltfläche "Zurück" nach der Schaltfläche "Senden" in den HTML-Code einzufügen, sie jedoch nach links zu verschieben, damit sie auf der Seite vor der Schaltfläche "Senden" angezeigt wird.

Das Ändern der Tabulatorreihenfolge sollte alles sein, um dies zu erreichen. Halte es einfach.

Peter Mortensen
quelle
10

Als ich das erste Mal darauf stieß, kam ich auf einen onclick () / JavaScript-Hack, wenn die Auswahl nicht vor / nach ist, die ich wegen ihrer Einfachheit immer noch mag. 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 Sie auf eine der Senden-Schaltflächen klicken, wird die gewünschte Operation in einem ausgeblendeten Feld gespeichert (dies ist ein Zeichenfolgenfeld, das in dem Modell enthalten ist, dem das Formular zugeordnet ist) und das Formular an den Controller gesendet, der alle Entscheidungen 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 mit numerischen Operationscodes leicht verschärfen, um das Parsen von Zeichenfolgen zu vermeiden. Wenn Sie jedoch nicht mit Aufzählungen spielen, ist der Code weniger lesbar, veränderbar und selbstdokumentierend, und das Parsen ist ohnehin trivial.

MiddleAgedMutantNinjaProgrammer
quelle
9

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

Die Standardschaltfläche eines Formularelements ist die erste Übermittlungsschaltfläche in Baumreihenfolge, deren Formularbesitzer dieses Formularelement ist.

Wenn der Benutzeragent das implizite Senden eines Formulars durch den Benutzer unterstützt (z. B. auf einigen Plattformen, wenn Sie die Eingabetaste drücken, während ein fokussiertes Textfeld das Formular implizit sendet) ...

Wenn die nächste Eingabe type = "submit" lautet 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>
nikkypx
quelle
9

Folgendes habe ich ausprobiert:

  1. Sie müssen sicherstellen, dass Sie Ihren Schaltflächen unterschiedliche Namen geben
  2. Schreiben Sie eine ifAnweisung, die die erforderliche Aktion ausführt, wenn auf eine der 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();
}
Samuel Mugisha
quelle
Das Problem ist, dass durch Drücken der Eingabetaste in einem Textfeld das Formular mit der ersten Schaltfläche zum Senden gesendet wird, nicht mit der beabsichtigten Schaltfläche (zweite im Beispiel). Es ist einfach herauszufinden, welche Schaltfläche zum Senden zum Senden des Formulars verwendet wurde, und das war nicht die Frage!
Riskop
7

Ich bin auf diese Frage gestoßen, als ich versucht habe, eine Antwort auf im Grunde dasselbe zu finden, nur mit ASP.NET-Steuerelementen, als ich herausgefunden habe, dass die ASP-Schaltfläche eine Eigenschaft namens hat UseSubmitBehavior, mit der Sie festlegen können, welche die Übermittlung vornimmt.

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

Nur für den Fall, dass jemand nach der ASP.NET-Schaltfläche sucht, um dies zu tun.

Barry Franklin
quelle
6

Mit JavaScript (hier jQuery) können Sie die Schaltfläche prev deaktivieren, bevor Sie das Formular senden.

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

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>
Erweitern Sie das Snippet

Gowtham Balusamy
quelle
1

Ich habe ein sehr ähnliches Problem auf diese Weise gelöst:

  1. Wenn JavaScript aktiviert ist (in den meisten Fällen heutzutage), werden alle Senden- Schaltflächen beim Laden der Seite über JavaScript (jQuery) auf Schaltflächen " herabgesetzt ". Klickereignisse auf der Schaltfläche " Verschlechtert " Die eingegebenen Schaltflächen werden auch über JavaScript behandelt.

  2. Wenn JavaScript nicht aktiviert ist, wird das Formular mit mehreren Senden-Schaltflächen an den Browser gesendet. In diesem Fall wird durch Klicken Enterauf eine textfieldinnerhalb des Formulars das Formular mit der ersten Schaltfläche anstelle der beabsichtigten Standardeinstellung gesendet , aber zumindest kann das Formular weiterhin verwendet werden: Sie können sowohl mit der vorherigen als auch mit der nächsten Schaltfläche senden .

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>
Erweitern Sie das Snippet

riskop
quelle
0

Sie können Tabindexdieses Problem lösen. Eine Änderung der Reihenfolge der Schaltflächen wäre ein effizienterer Weg, um dies zu erreichen.

Ändern Sie die Reihenfolge der Schaltflächen und fügen Sie floatWerte hinzu, um ihnen die gewünschte Position zuzuweisen, die Sie in Ihrer HTMLAnsicht anzeigen möchten .

Jyoti Mishra
quelle
-4

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 "prev" übermittelt. Wenn Sie auf "Nächste Seite" klicken, wird nur der Wert von "Weiter" gesendet.

Wenn Sie jedoch drücken Enter irgendwo auf dem Formular , wird weder "prev" noch "next" gesendet.

Mit Pseudocode können 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
GateKiller
quelle
1
Es gibt nie eine Situation (ohne js), in der keine der Tasten ausgelöst wird. Wenn Sie die EINGABETASTE drücken, fängt die erste Schaltfläche im Code das Ereignis ab. Im HTML-Beispiel ist es die Prev-Schaltfläche.
SimonSimCity