Mehrere Übermittlungsschaltflächen in einem HTML-Formular

Question

Angenommen, Sie erstellen einen Assistenten in einem HTML-Formular. Ein Knopf geht zurück und einer geht vorwärts. Da die Schaltfläche zurück zuerst im Markup angezeigt wird, wenn Sie die Eingabetaste drücken, wird diese Schaltfläche verwendet, um das Formular zu senden.

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 tun möchte, ist zu entscheiden, erhalten, auf die Taste wird das Formular abzuschicken, wenn ein Benutzer die Eingabetaste drückt. Auf diese Weise wird beim Drücken der Eingabetaste der Assistent zur nächsten Seite und nicht zur vorherigen Seite verschoben. Müssen Sie dazu tabindex verwenden?

Answer 1

Ich hoffe, das hilft. Ich mache nur den Trick von float die Knöpfe auf der rechten Seite.

diese Weise wird die vorherige Taste der Schaltfläche Weiter links ist, aber der nächste kommt zuerst 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>

Edit: Vorteile über andere Vorschläge: kein JavaScript, zugänglich, beide Tasten bleiben type="submit"

Answer 2

Geben Sie Ihrem einreichen Tasten gleichen Namen wie folgt aus:

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

Wenn der Benutzer eingeben und die Anfrage geht an den Server, können Sie den Wert für submitButton auf dem serverseitigen Code überprüfen, welche ein enthält Sammlung von Formular 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: Using multiple submit buttons on a single form

Answer 3

Wäre es möglich sein, dass Sie die vorherige Taste Typ in eine Schaltfläche wie folgt zu ändern:

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

Jetzt auf die Schaltfläche Weiter würde Als Standard können Sie auch das Attribut default hinzufügen, damit Ihr Browser es so hervorhebt:

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

Hoffe, dass hilft.

Answer 4

Wenn die Tatsache, dass die erste Schaltfläche standardmäßig verwendet wird, in allen Browsern konsistent ist, warum sollten Sie sie nicht im Quellcode korrigieren und dann CSS verwenden, um ihre scheinbaren Positionen zu wechseln? float sie links und rechts, um sie zum Beispiel visuell umzuschalten.

Answer 5

Ich würde Javascript verwenden, um das Formular zu senden. Die Funktion würde durch das Ereignis OnKeyPress des Formularelements ausgelöst und würde erkennen, ob die Eingabetaste ausgewählt wurde. Wenn dies der Fall ist, wird das Formular gesendet.

Hier sind zwei Seiten, die Techniken zur Vorgehensweise angeben: 1, 2. Auf dieser Grundlage ist hier ein Beispiel für die Nutzung (basierend auf 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)" /> 

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• Keine verwandten Themen^_^