Mehrere submit-buttons in einem HTML-Formular

Ich hoffe, das hilft. Ich bin gerade dabei das trick floating die Schaltflächen auf der rechten Seite.

Diese Weise die Prev - Taste ist Links von der Next - Taste, sondern die Next kommt zuerst in der HTML-Struktur:

CSS:

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

HTML:

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

Vorteile über andere Vorschläge: kein JavaScript-code zugänglich, und die beiden Tasten bleiben type="submit".

Geben Sie Ihre submit-buttons den gleichen Namen wie diese:

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

Wenn der Benutzer die Taste Enter und die Anfrage geht an den server, Sie können überprüfen Sie den Wert für submitButton auf Ihrem server-side-code enthält eine Sammlung von form name/value Paare. 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: Mit mehreren submit-buttons in einem einzigen Formular

Wenn Sie wirklich nur wollen, dass es funktioniert wie ein install-dialog, nur geben Sie den Fokus auf die Schaltfläche "Weiter" OnLoad".

So, wenn der Benutzer trifft Zurück, wird das Formular übermittelt und geht nach vorne. Wenn Sie wollen zurück zu gehen, Sie können drücken Sie Tab oder klicken Sie auf die Schaltfläche.

Können Sie es mit CSS.

Setzen Sie die Tasten in das markup mit der Next - Taste zuerst, dann die Prev Taste danach.

Dann verwenden Sie CSS um Sie zu positionieren, um zu erscheinen, wie Sie wollen.

Ich würde mit JavaScript das Formular abschicken. Würde die Funktion ausgelöst werden, die durch die OnKeyPress-Ereignis des form-Elements und erkennen würde, ob die Enter - Taste ausgewählt wurde. Wenn dies der Fall ist, wird das Formular abschicken.

Hier sind zwei Seiten, die Techniken auf, wie dies zu tun: Eins, Zwei. Auf dieser Grundlage hier ist ein Beispiel für die Verwendung (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)" />

Wenn du mehrere buttons auf einer Seite, dann können Sie etwas wie das hier tun:

Markieren Sie die erste Schaltfläche, die Sie auslösen wollen auf die Enter Tastendruck als die Standard-Schaltfläche auf das Formular. Für die zweite Schaltfläche, assoziieren Sie ihn mit der Backspace - Taste auf der Tastatur. Die Backspace eventcode ist 8.

JS:

$(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");
    }
  }
});

HTML:

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

Eine weitere einfache Möglichkeit wäre, setzen die zurück-Taste, nachdem Sie den Absenden-button in den HTML-code, sondern schwebt es nach Links, so dass es auf der Seite angezeigt wird, bevor Sie den Absenden-button.

Ändern der tab-Reihenfolge sollte alles, was es braucht, um dies zu erreichen. Halten Sie es einfach.

Ersten mal kam ich gegen diesen, kam ich mit einem onclick () - /JavaScript-hack, wenn Entscheidungen nicht prev/next, die ich noch immer mag, für seine Einfachheit. 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, speichert es die gewünschte operation in einem versteckten Feld (welches ein string-Feld enthalten, in das Modell der form zugeordnet ist) und übermittelt das Formular an den Controller, das macht die ganze Entscheidung. In den Controller, man schreibt 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
}

Können Sie auch ziehen Sie diese leicht mit numerischen operation-codes zu vermeiden, die die Zeichenfolge analysieren, aber es sei denn, Sie spielen mit Aufzählungen, der code ist schlechter lesbar, veränderbar, und selbst dokumentieren und das analysieren ist trivial, trotzdem.

Dies ist, was habe ich ausprobiert:

1. Sie müssen sicherstellen, dass Sie geben Sie Ihre Tasten unterschiedliche Namen
2. Schreiben Sie eine if Aussage, das die erforderliche Aktion, wenn eine Schaltfläche 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();
}

Mit JavaScript (hier jQuery), können Sie deaktivieren Sie die prev-Taste, bevor das Formular an.

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

Löste ich ein sehr ähnliches problem auf diese Weise:

1. Wenn JavaScript aktiviert ist (in den meisten Fällen heutzutage), dann alle submit-buttons sind "abgebaut" buttons auf das laden der Seite via JavaScript (jQuery). Klicken Sie auf Ereignisse auf der "abgebaut" - Taste eingegeben Tasten sind auch direkt über JavaScript.

2. Wenn JavaScript nicht aktiviert ist, dann wird das Formular an den browser geliefert mit mehreren submit-buttons. In diesem Fall betätigen von Enter auf eine textfield innerhalb des Formulars senden das Formular mit der ersten Schaltfläche wird anstelle der beabsichtigten Standard, aber zumindest die form ist noch nutzbar: Sie können sowohl mit der prev und nächsten Tasten.

Beispiel:

HTML:

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

Verwenden das Beispiel, das Sie gegeben:

<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", ist nur der Wert "prev" eingereicht werden. Wenn Sie klicken Sie auf "Nächste Seite" nur der Wert "next" eingereicht werden.

Wenn doch, drücken Sie die Taste Enter irgendwo auf dem Formular, weder "prev" oder "next" eingereicht werden.

Also mit pseudocode können Sie das folgende tun:

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