Mehrere Submit-Buttons in einem HTML-Formular

stimmen
233

Angenommen , Sie haben einen Assistenten in einem HTML - Formular erstellen. Eine Taste geht zurück, und man geht nach vorn. Da die Rücktaste zuerst im Markup erscheint , wenn Sie es drücken Sie die Eingabetaste wird diese Taste verwenden , um das Formular abzuschicken.

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 zu bekommen , auf die Taste wird das Formular abzuschicken , wenn ein Benutzer die Eingabetaste drückt. Auf diese Weise, wenn Sie den Assistenten drücken Sie die Eingabetaste , um die nächste Seite wird, nicht die vorherige. Müssen Sie verwenden , tabindexdies zu tun?

Veröffentlicht am 01/08/2008 um 14:01
quelle vom benutzer
In anderen Sprachen...                            


23 antworten

stimmen
133

Ich hoffe das hilft. Ich mache nur den Trick floatauf der rechten Seite die Tasten ing.

Auf diese Weise der vorherige Taste wird der Schaltfläche Weiter links, aber die nächsten 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 gegenüber anderen Vorschlägen: kein JavaScript, zugänglich, beide Tasten bleibentype="submit"

Beantwortet am 28/08/2008 um 10:34
quelle vom benutzer

stimmen
60

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

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

Nun ist die Schaltfläche Weiter wäre der Standard, plus Sie können auch das Add - defaultAttribut , um es so , dass Ihr Browser es wie so markieren wird:

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

Ich hoffe, das hilft.

Beantwortet am 01/08/2008 um 14:14
quelle vom benutzer

stimmen
53

Geben Sie Ihre Tasten gleichen Namen wie folgt einreichen:

<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 überprüfen submitButtonauf dem serverseitigen Code, der eine Sammlung von Form enthält name/valuePaare. 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: Verwenden mehrerer einreichen Tasten auf einem einzigen Formular

Beantwortet am 01/08/2008 um 14:10
quelle vom benutzer

stimmen
30

Wenn die Tatsache , dass die erste Taste standardmäßig konsistent ist in allen Browsern verwendet wird, warum nicht sie richtig herum in dem Quellcode setzen, dann CSS verwenden , um ihre scheinbaren Positionen zu wechseln? floatsie nach links und rechts , sie zu wechseln um visuell, zum Beispiel.

Beantwortet am 02/08/2008 um 12:24
quelle vom benutzer

stimmen
17

Manchmal ist die bereitgestellte Lösung von @palotasb nicht ausreichend. Es gibt Anwendungsfälle , wo zum Beispiel ein „Filter“ Submit - Button oben Schaltflächen wie „Next und Previous“ gesetzt wird. Ich fand eine Abhilfe für dieses: Kopieren Sie den Absenden - Button , der als Standard handeln muss Submit - Button in einem versteckten div und legen Sie sie in der Form vor allen anderen Absenden - Button. Technisch wird es durch eine andere Taste vorgelegt werden , wenn dann die Eingabetaste drücken , wenn auf der sichtbaren Schaltfläche Weiter klicken. Da aber der Name und der Wert gleich ist, 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>
Beantwortet am 26/10/2012 um 10:53
quelle vom benutzer

stimmen
17

Es kann mit CSS arbeiten

Setzen Sie sie in das Markup als die nächste Taste zuerst, dann als nächstes die vorherige Taste.

Dann CSS verwenden, um sie zu positionieren, die Art und Weise erscheinen Sie wollen

Beantwortet am 16/09/2008 um 13:16
quelle vom benutzer

stimmen
17

Kevin, kann dies nicht mit reinem HTML erfolgen. Sie müssen für diesen Trick auf JavaScript angewiesen.

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

Form1 würde die vorherige Schaltfläche haben.

Form2 würde keine Benutzereingaben haben + die nächste Taste.

Wenn der Benutzer Enterin Form2 legt die Schaltfläche Weiter feuern würde.

Beantwortet am 26/08/2008 um 04:44
quelle vom benutzer

stimmen
17

Wenn Sie wirklich wollen, dass es nur einen Dialog installieren wie ein arbeiten, was nur den Fokus auf die Schaltfläche „Weiter“ OnLoad geben. Auf diese Weise, wenn der Benutzer Return trifft, macht die Form und geht nach vorn. Wenn sie zurückkehren wollen, können sie Tab treffen oder auf den Button klicken.

Beantwortet am 26/08/2008 um 04:41
quelle vom benutzer

stimmen
15

Ich würde Javascript verwenden Sie das Formular einzureichen. Die Funktion würde durch die OnKeyPress-Ereignis des Formulars Element ausgelöst werden, und würde erkennen, ob die Enter-Taste ausgewählt wurde. Wenn dies der Fall ist, wird es das Formular abzuschicken.

Hier sind zwei Seiten , die Techniken zu geben , wie dies zu tun: 1 , 2 . Auf dieser Grundlage ist hier ein Beispiel für die Nutzung (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)" />
Beantwortet am 03/08/2008 um 14:12
quelle vom benutzer

stimmen
14

Kevin,

Dies funktioniert ohne Javascript oder CSS in den meisten Browsern:

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

Diese Version funktioniert, wenn JavaScript eingeschaltet 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>

So ist der Fehler in dieser Lösung ist:
Vorherige Seite funktioniert nicht, wenn Sie den Internet Explorer verwenden , um mit Javascript ausgeschaltet.
Wohlgemerkt, die Zurück - Taste funktioniert immer noch!

Beantwortet am 16/09/2008 um 12:19
quelle vom benutzer

stimmen
13

Wenn Sie mehrere aktive Tasten auf einer Seite haben, dann können Sie etwas tun:

Markieren Sie die erste Taste , die Sie löst auf wollen EnterDruck auf die Form als default. Für die zweite Taste , um es assoziieren BackspaceTaste auf der Tastatur. Backspaceeventcode 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.

Beantwortet am 14/03/2014 um 15:51
quelle vom benutzer

stimmen
12

Eine weitere einfache Möglichkeit wäre, die Zurück-Taste zu setzen, nachdem die Schaltfläche im HTML-Code einreichen, aber es nach links schweben, so dass es auf der Seite vor der Absenden-Button angezeigt wird.

Tab- Reihenfolge ändern sollte alles was man braucht um dies zu erreichen sein. Halte es einfach.

Beantwortet am 14/10/2014 um 17:02
quelle vom benutzer

stimmen
12

Tab- Reihenfolge ändern sollte alles was man braucht um dies zu erreichen sein. Halte es einfach.

Eine weitere einfache Möglichkeit wäre, die Zurück-Taste zu setzen, nachdem die Schaltfläche im HTML-Code einreichen, aber es nach links schweben, so dass es auf der Seite vor der Absenden-Button angezeigt wird.

Beantwortet am 27/11/2012 um 23:27
quelle vom benutzer

stimmen
11

halten Sie die Namen aller einreichen Tasten die gleiche - „zurück“ Der einzige Unterschied ist das valueAttribut mit eindeutigen Werten. Wenn wir das Skript erstellen, werden diese einzigartigen Werte uns helfen , welche der Submit - Buttons , um herauszufinden , gedrückt wurde.

Und schreiben Codierung follwing:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
Beantwortet am 05/06/2012 um 10:19
quelle vom benutzer

stimmen
10

Das erste Mal, dass ich gegen diese kam ich mit einer Onclick kam () / js hacken, wenn Entscheidungen nicht zurück sind / next, dass ich nach wie vor für seine Einfachheit mögen. 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 entweder Submit-Button geklickt wird es speichert die gewünschte Operation in einem versteckten Feld (die einen String-Feld in dem Modell enthalten ist die Form verknüpft ist) und sendet das Formular an den Controller, die alle die Entscheidung, der Fall ist. 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 mit den Ziffernoperationscodes straffen, um die Zeichenfolgenanalyse zu vermeiden, aber wenn man mit Aufzählungen spielt, ist der Code weniger lesbar, veränderbar und selbsterklärend und die Analyse ist trivial, trotzdem.

Beantwortet am 03/09/2015 um 13:30
quelle vom benutzer

stimmen
10

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

Ein Standard-Schaltfläche des Formulars Element ist die erste Schaltfläche in Baum um deren Form einreichen Eigentümer ist, dass Formularelement.

Wenn die User-Agent unterstützt die Benutzer ein Formular implizit vorlegen zu lassen (zum Beispiel auf einigen Plattformen die „Enter“ Taste drücken, während ein Textfeld implizit fokussiert das Formular abschickt) ...

Nachdem die nächste input type = „submit“ und die vorherige Eingabe zu ändern, um type = „button“ sollte das gewünschte Standardverhalten geben.

<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>
Beantwortet am 28/03/2015 um 21:05
quelle vom benutzer

stimmen
10

Das ist, was ich habe versucht: 1. Sie sicher, dass Sie verschiedene Namen geben Ihre Anstecker müssen 2. Schreiben Sie eine if-Anweisung, die die erforderliche Aktion tun werden, wenn eine der Tasten in geklickt.

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

}
Beantwortet am 03/03/2014 um 07:16
quelle vom benutzer

stimmen
8

Ich kam diese Frage auf , wenn sie versuchen , eine Antwort auf im Grunde die gleiche Sache zu finden, die nur mit asp.net Kontrollen, wenn ich herausgefunden, dass die asp - Taste hat eine Eigenschaft genannt , UseSubmitBehaviordie Sie , die man tut die einreichenden festlegen können.

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

Für den Fall, jemand sucht die asp.net Taste Art und Weise, es zu tun.

Beantwortet am 24/03/2016 um 17:29
quelle vom benutzer

stimmen
7

Mit Javascript (jQuery hier), können Sie die vorherige deaktivieren Taste, bevor das Formular abzuschicken.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
Beantwortet am 14/08/2015 um 10:01
quelle vom benutzer

stimmen
0

Sie können verwendet werden, Tabindexdieses Problem zu lösen, auch die Reihenfolge der Schaltfläche Ändern wäre effizienten Weg , dies zu erreichen. Ändern der Reihenfolge der Schaltfläche und fügen Sie floatWerte sie die gewünschte Position , die Sie in Ihren zeigen wollen zuweisen HTMLAnsicht.

Beantwortet am 25/04/2018 um 06:28
quelle vom benutzer

stimmen
0

Ich löste ein sehr ähnliches Problem auf diese Weise:

  1. wenn javascriptaktiviert (in den meisten Fällen heutzutage) , dann alle einreichen Tasten sind „ degradiert “ zu Taste auf Seite Last über javascript(jquery). Klicken Sie auf Ereignisse auf den „ degradiert “ Taste getippt Tasten behandelt auch über javascript.

  2. wenn javascriptnicht aktiviert ist, dann wird das Formular mit mehreren Senden - Schaltflächen an den Browser bedient. In diesem Fall hitting auf einer Eingabe textfieldim Formular wird das Formular mit dem ersten Knopf statt dem vorgesehenen einreichen Standard , aber zumindest die Form ist noch verwendbar: Sie können mit einreichen sowohl zurück und nächsten Schaltflächen.

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>

Beantwortet am 09/01/2018 um 15:26
quelle vom benutzer

stimmen
0

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>

Beantwortet am 29/09/2017 um 04:58
quelle vom benutzer

stimmen
-3

Am Beispiel Sie 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 nur den Wert von „zurück“ wird nachgereicht. Wenn Sie auf „Weiter“ klicken nur der Wert von „next“ wird vorgelegt.

Wenn jedoch drücken Sie irgendwo auf dem Formular eingeben, weder „prev“ noch „next“ wird eingereicht werden.

Also mit Pseudo-Code Sie Folgendes tun können:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
Beantwortet am 05/08/2008 um 16:08
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more