Plusieurs boutons d'envoi dans un formulaire HTML

Translate

Disons que vous créez un assistant dans un formulaire HTML. Un bouton revient en arrière et un autre avance. Depuis leretourLe bouton apparaît en premier dans le balisage lorsque vous appuyez surEntrer, il utilisera ce bouton pour soumettre le formulaire.

Exemple:

<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>
This question and all comments follow the "Attribution Required."

Toutes les réponses

Translate

J'espère que ça aide. Je fais juste le tour defloatles boutons à droite.

De cette façon, lePrevle bouton se trouve à gauche duNextbouton, mais leNextvient en premier dans la structure HTML:

.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>
La source
Translate

Changez le type de bouton précédent en un bouton comme celui-ci:

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

Maintenant leProchainserait le bouton par défaut, plus vous pouvez également ajouter ledefaultattribuez-lui pour que votre navigateur le met en évidence comme ceci:

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

Donnez à vos boutons d'envoi le même nom comme ceci:

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

Lorsque l'utilisateur appuie surEntreret ledemandeva au serveur, vous pouvez vérifier la valeur desubmitButtonsur votre code côté serveur qui contient une collection de formulairename/valuepaires. Par exemple, dansASP classique:

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

Référence:Utilisation de plusieurs boutons d'envoi sur un seul formulaire

La source
Translate

Si le fait que le premier bouton soit utilisé par défaut est cohérent entre les navigateurs, placez-les dans le bon sens dans le code source, puis utilisez CSS pour changer leurs positions apparentes.

floatles gauche et droite pour les changer visuellement, par exemple.

La source
Translate

Si vous voulez vraiment que cela fonctionne comme une boîte de dialogue d'installation, concentrez-vous simplement sur le bouton "Suivant" OnLoad.

De cette façon si l'utilisateur frappeRevenir, le formulaire se soumet et continue. S'ils veulent rentrer, ils peuvent frapperLanguetteou cliquez sur le bouton.

La source
Translate

Parfois, la solution fournie par @palotasb n'est pas suffisante. Il existe des cas d'utilisation où, par exemple, un bouton de soumission "Filtre" est placé au-dessus des boutons comme "Suivant et Précédent". J'ai trouvé une solution de contournement pour cela:copiele bouton d'envoi qui doit agir comme bouton d'envoi par défaut dans un div caché et le placer dans le formulaire au-dessus de tout autre bouton d'envoi. Techniquement, il sera soumis par un bouton différent en appuyant sur Entrée puis en cliquant sur le bouton Suivant visible. Mais comme le nom et la valeur sont les mêmes, il n'y a aucune différence dans le résultat.

<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>
La source
Translate

Vous pouvez le faire avec CSS.

Mettez les boutons dans le balisage avec leNextbouton d'abord, puis lePrevbouton ensuite.

Ensuite, utilisez CSS pour les positionner afin qu'ils apparaissent comme vous le souhaitez.

La source
Translate

Cela ne peut pas être fait avec du HTML pur. Vous devez vous fier à JavaScript pour cette astuce.

Cependant, si vous placez deux formulaires sur la page HTML, vous pouvez le faire.

Form1 aurait le bouton précédent.

Form2 aurait toutes les entrées utilisateur + le bouton suivant.

Lorsque l'utilisateur appuie surEntrerdans Form2, le bouton Next submit se déclenche.

La source
qui
Translate

J'utiliserais JavaScript pour soumettre le formulaire. La fonction serait déclenchée par l'événement OnKeyPress de l'élément de formulaire et détecterait si leEntrerclé a été sélectionnée. Si tel est le cas, il soumettra le formulaire.

Voici deux pages qui donnent des techniques sur la façon de procéder:1, 2. Sur la base de ceux-ci, voici un exemple d'utilisation (basé surici):

<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)" />
La source
Translate

Cela fonctionne sans JavaScript ou CSS dans la plupart des navigateurs:

<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 et Google Chrome fonctionnent tous.
Comme toujours, Internet Explorer est le problème.

Cette version fonctionne lorsque JavaScript est activé:

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

Le défaut de cette solution est donc:

La page précédente ne fonctionne pas si vous utilisez Internet Explorer avec JavaScript désactivé.

Attention, le bouton de retour fonctionne toujours!

La source
Translate

Si vous avez plusieurs boutons actifs sur une page, vous pouvez faire quelque chose comme ceci:

Marquez le premier bouton que vous souhaitez déclencher sur leEntrerappuyez sur la touche comme bouton par défaut du formulaire. Pour le deuxième bouton, associez-le auRetour arrièrebouton sur le clavier. leRetour arrièreeventcode est 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>
La source
Translate

La modification de l'ordre de tabulation devrait être tout ce qu'il faut pour y parvenir. Rester simple.

Une autre option simple serait de mettre le bouton de retour après le bouton de soumission dans le code HTML mais de le faire flotter vers la gauche pour qu'il apparaisse sur la page avant le bouton de soumission.

La source
Translate

Une autre option simple serait de placer le bouton de retour après le bouton de soumission dans le code HTML, mais de le faire flotter vers la gauche, de sorte qu'il apparaisse sur la page avant le bouton de soumission.

La modification de l'ordre de tabulation devrait être tout ce qu'il faut pour y parvenir. Rester simple.

La source
Alger Lee
Translate
<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page"> 

Gardez le même nom de tous les boutons d'envoi - "prev".

La seule différence est lavalueattribut avec des valeurs uniques. Lorsque nous créons le script, ces valeurs uniques nous aideront à déterminer lequel des boutons d'envoi a été enfoncé.

Et écrivez le codage suivant:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
La source
Translate

La première fois que je me suis heurté à cela, j'ai trouvé un hack onclick () / JavaScript lorsque les choix ne sont pas précédent / suivant que j'aime toujours pour sa simplicité. Ça va comme ça:

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

Lorsque l'un des boutons d'envoi est cliqué, il stocke l'opération souhaitée dans un champ masqué (qui est un champ de chaîne inclus dans le modèle auquel le formulaire est associé) et soumet le formulaire au contrôleur, qui prend toutes les décisions. Dans le contrôleur, vous écrivez simplement:

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

Vous pouvez également resserrer légèrement cela en utilisant des codes d'opération numériques pour éviter l'analyse des chaînes, mais à moins que vous ne jouiez avec les énumérations, le code est moins lisible, modifiable et auto-documenté et l'analyse est de toute façon triviale.

La source
Translate

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

Le bouton par défaut d'un élément de formulaire est le premier bouton d'envoi dans l'ordre de l'arborescence dont le propriétaire du formulaire est cet élément de formulaire.

Si l'agent utilisateur prend en charge le fait de laisser l'utilisateur soumettre un formulaire implicitement (par exemple, sur certaines plates-formes, le fait d'appuyer sur la touche "Entrée" alors qu'un champ de texte est focalisé soumet implicitement le formulaire) ...

Avoir l'entrée suivante type = "submit" et changer l'entrée précédente en type = "button" devrait donner le comportement par défaut souhaité.

<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>
La source
Translate

Voici ce que j'ai essayé:

  1. Vous devez vous assurer de donner à vos boutons des noms différents
  2. Écrire unifinstruction qui effectuera l'action requise si l'un des boutons est cliqué.

 

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

En PHP,

if(isset($_POST['prev']))
{
    header("Location: previous.html");
    die();
}

if(isset($_POST['next']))
{
    header("Location: next.html");
    die();
}
La source
Translate

Je suis tombé sur cette question en essayant de trouver une réponse essentiellement à la même chose, uniquement avec les contrôles ASP.NET, lorsque j'ai compris que le bouton ASP avait une propriété appeléeUseSubmitBehaviorcela vous permet de définir celui qui effectue la soumission.

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

Juste au cas où quelqu'un cherche le moyen du bouton ASP.NET pour le faire.

La source
Translate

Avec JavaScript (ici jQuery), vous pouvez désactiver le bouton précédent avant de soumettre le formulaire.

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

Essaye ça..!

<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>
La source
Translate

J'ai résolu un problème très similaire de cette manière:

  1. Si JavaScript est activé (dans la plupart des cas de nos jours), tous les boutons d'envoi sont "dégradé"aux boutons lors du chargement de la page via JavaScript (jQuery). Cliquez sur les événements sur le"dégradé"Les boutons tapés par bouton sont également gérés via JavaScript.

  2. Si JavaScript n'est pas activé, le formulaire est envoyé au navigateur avec plusieurs boutons d'envoi. Dans ce cas, frapperEntrersur untextfielddans le formulaire soumettra le formulaire avec le premier bouton au lieu dudéfaut, mais au moins le formulaire est toujours utilisable: vous pouvez soumettre à la fois leprevetprochainboutons.

Exemple de travail:

<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>
La source
Translate

Vous pouvez utiliserTabindexpour résoudre ce problème. Changer également l'ordre des boutons serait un moyen plus efficace d'y parvenir.

Modifiez l'ordre des boutons et ajoutezfloatvaleurs pour leur attribuer la position souhaitée que vous souhaitez afficher dans votreHTMLvue.

La source
Translate

En utilisant l'exemple que vous avez donné:

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

Si vous cliquez sur "Page précédente", seule la valeur de "prev" sera soumise. Si vous cliquez sur «Page suivante», seule la valeur «suivant» sera soumise.

Si toutefois, vous appuyez surEntrerquelque part sur le formulaire, ni "prev" ni "next" ne seront soumis.

Donc, en utilisant le pseudocode, vous pouvez effectuer les opérations suivantes:

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