Mehrere Übergabeschaltflächen in einem HTML-Formular

  • Angenommen, Sie erstellen einen Assistenten in einem HTML-Formular. Eine Taste geht zurück und eine weiter. Da die Schaltfläche back beim Drücken der Eingabetaste im Markup zuerst angezeigt wird, 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> 

    Was ich gerne machen möchte, ist Entscheiden Sie, welche Schaltfläche zum Senden des Formulars verwendet wird, wenn ein Benutzer die Eingabetaste drückt. Wenn Sie die Eingabetaste drücken, wechselt der Assistent zur nächsten Seite, nicht zur vorherigen. Müssen Sie dazu tabindex verwenden?

    12 April 2017
    Sasha
23 answers
  • Ich hoffe das hilft. Ich mache nur den Trick, float die Schaltflächen auf der rechten Seite zu verwenden.

    Auf diese Weise befindet sich der Prev-Button links vom Next-Button, aber der Next-Button steht im HTML code:

     .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 verfügbar, beide Schaltflächen bleiben erhalten type="submit"

    16 February 2017
    Miles Prower
  • Könnten Sie den vorherigen Schaltflächentyp in eine Schaltfläche wie diese ändern:

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

    Nun ist die Schaltfläche Weiter die Standardeinstellung, und Sie können auch das Attribut default hinzufügen, damit Ihr Browser es so hervorhebt:

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

    Ich hoffe, das hilft.

    07 July 2015
    B. Clay Shannon
  • Geben Sie Ihren Submit-Buttons denselben Namen wie folgt:

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

    Wenn der Benutzer die Eingabetaste und drückt Die -Anforderung geht an den Server. Sie können den Wert für submitButton in Ihrem serverseitigen Code überprüfen, der eine Auflistung von Formularpaaren name/value enthält. 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: Mehrere Übergabeschaltflächen in einem einzigen Formular verwenden

    14 July 2014
    Sid Mhuseyint
  • Wenn die Tatsache, dass die erste Schaltfläche standardmäßig verwendet wird, in allen Browsern konsistent ist, warum setzen Sie sie nicht im Quellcode richtig ein, und verwenden Sie dann CSS, um ihre scheinbaren Positionen zu ändern. float links und rechts, um sie visuell umzuschalten, z. B.

    14 October 2012
    Paul FlemingChris
  • Kann mit CSS verwendet werden.

    Setzen Sie sie zuerst als nächste Schaltfläche in das Markup und dann als nächstes zur vorherigen Schaltfläche.

    Verwenden Sie dann CSS, um sie so zu positionieren, wie Sie es möchten

    16 September 2008
    qui
  • Wenn Sie nur möchten, dass es wie ein Installationsdialogfeld funktioniert, können Sie sich nur auf die Schaltfläche "Weiter" konzentrieren. Wenn der Benutzer auf "Zurück" klickt, wird das Formular gesendet und weitergeleitet. Wenn Sie zurückkehren möchten, können Sie die Tab-Taste drücken oder auf die Schaltfläche klicken.

    26 August 2008
    Scott Gottreu
  • Kevin, mit reinem HTML ist dies 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 Enter in Form2 wird die Schaltfläche Next Submit ausgelöst.

    01 June 2016
    Ulf Gjerdingen
  • Manchmal reicht die von @palotasb bereitgestellte Lösung nicht aus. Es gibt Anwendungsfälle, in denen zum Beispiel eine Schaltfläche zum Filtern über den Schaltflächen wie "Weiter" und "Zurück" angezeigt wird. Ich habe dafür eine Problemumgehung gefunden: copy der Submit-Button, der als standardmäßiger Submit-Button in einem versteckten Div fungieren und im Formular über einem anderen Submit-Button platziert werden muss. Technisch wird es beim Drücken der Eingabetaste von einer anderen Schaltfläche übermittelt und beim Klicken auf die sichtbare Schaltfläche Weiter. 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>
     
    26 October 2012
    netiul
  • Ich würde Javascript verwenden, um das Formular zu senden. Die Funktion wird durch das Ereignis OnKeyPress des Formularelements ausgelöst und erkennt, ob die Eingabetaste ausgewählt wurde. Wenn dies der Fall ist, wird das Formular gesendet.

    Im Folgenden finden Sie zwei Seiten, auf denen die Vorgehensweise erläutert wird: 1 , 2 . Darauf basierend wird hier ein Verwendungsbeispiel (basierend auf hier ) dargestellt:

     <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)" />
     
    03 August 2008
    Yaakov Ellis
  • 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 und Google Chrome funktionieren alle.
    Wie immer ist IE das Problem.

    Dies 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 IE mit deaktiviertem Javascript verwenden.
    Die Schaltfläche "Zurück" funktioniert jedoch weiterhin!

    16 September 2008
    mor7ifer