Plusieurs boutons de soumission dans un formulaire HTML

Disons que vous créez un assistant dans un formulaire HTML. Un bouton revient en arrière, et l'autre va de l'avant. Puisque le bouton Retour apparaît en premier dans le balisage lorsque vous appuyez sur Entrée, 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>

Ce que je voudrais faire, c'est de décider quel bouton est utilisé pour soumettre le formulaire lorsqu'un utilisateur appuie sur Entrée. De cette façon, lorsque vous appuyez sur Entrée, L'Assistant passe à la page suivante, et non à la page précédente. Avez-vous d' utilisez tabindex pour ce faire?

239
demandé sur Sasha 2008-08-01 17:01:17

23 réponses

J'espère que cela aide. Je fais juste l'astuce de float ing les boutons sur la droite.

De cette façon, le bouton Précédent est à gauche du bouton Suivant, mais le suivant vient en premier dans le code 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>

Edit: avantages par rapport aux autres suggestions: pas de JavaScript, accessible, les deux boutons restent type="submit"

133
répondu palotasb 2017-02-15 21:23:34

Serait-il possible pour vous de changer le type de bouton Précédent en un bouton comme ceci: 

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

Maintenant, le bouton Suivant serait la valeur par défaut, plus vous pouvez également ajouter l'attribut default pour que votre navigateur le mette en évidence comme suit: 

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

J'espère que ça aide.

61
répondu Wally Lawless 2015-07-06 22:50:09

Donnez le même nom à vos boutons de soumission comme ceci: 

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

Lorsque l'utilisateur appuie sur Entrée et que la requête va au serveur, vous pouvez vérifier la valeur de submitButton sur votre code côté serveur qui contient une collection de paires form name/value. Par exemple dans ASP classique: 

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

Référence: à l'Aide de plusieurs boutons de soumission sur un seul formulaire

54
répondu huseyint 2014-07-14 07:55:42

Si le fait que le premier bouton est utilisé par défaut est cohérent dans tous les navigateurs, pourquoi ne pas les mettre dans le bon sens dans le code source, puis utiliser CSS pour changer leurs positions apparentes? {[0] } à gauche et à droite pour les changer visuellement, par exemple.

31
répondu Polsonby 2012-10-14 12:21:12

Si vous voulez vraiment juste que cela fonctionne comme une boîte de dialogue d'installation, Que diriez-vous de simplement mettre l'accent sur le bouton "Suivant" OnLoad. De cette façon, si L'utilisateur frappe Return, le formulaire est soumis et va de l'avant. S'ils veulent revenir en arrière, ils peuvent frapper onglet ou cliquez sur le bouton.

17
répondu Scott Gottreu 2008-08-26 03:41:44

Il peut fonctionner avec CSS

Mettez-les dans le balisage comme le bouton Suivant en premier, puis le bouton Précédent Suivant.

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

17
répondu qui 2008-09-16 12:16:05

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: Copiez le bouton submit qui doit agir comme le bouton submit par défaut dans un div caché et placez-le dans le formulaire au-dessus de tout autre bouton submit. Techniquement, il sera soumis par un bouton différent en appuyant sur Entrée puis en cliquant sur le bouton Suivant visible. Mais puisque le nom et la valeur sont les mêmes, il n'y a pas de 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>
17
répondu netiul 2012-10-26 09:53:08

Kevin, cela ne peut pas être fait avec du HTML pur. Vous devez compter sur 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 sur Enter dans Form2, le bouton Soumettre suivant se déclenche.

17
répondu FlySwat 2016-06-01 18:41:04

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 la touche Entrée 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 le faire: 1, 2. Sur la base de ces, voici un exemple d'utilisation (basé sur ici):

<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)" />
16
répondu Yaakov Ellis 2008-08-03 13:12:21

Kevin,

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, Google Chrome fonctionnent tous.
Comme toujours, IE 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>

Donc, le défaut de cette solution est:
La Page précédente ne fonctionne pas si vous utilisez IE avec Javascript désactivé.
Rappelez-vous, le bouton de retour fonctionne encore!

14
répondu Jolyon 2008-09-16 12:12:37

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 Entrez keypress comme defaultbutton sur le formulaire. Pour le deuxième bouton, associez-le au bouton Backspace du clavier. Retour arrière eventcode 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>

J'espère que cela aide.

13
répondu user1591131 2018-04-11 20:50:34

Changer l'ordre des tabulations devrait être tout ce qu'il faut pour y parvenir. Garder les choses simples.

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

12
répondu Kenny Johnson 2012-11-27 22:27:41

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

Changer l'ordre des tabulations devrait être tout ce qu'il faut pour y parvenir. Garder les choses simples.

12
répondu 2014-10-14 16:02:21

Gardez le même nom pour tous les boutons de soumission -- "prev" la seule différence est l'attribut value avec des valeurs uniques. Lorsque nous créons le script, ces valeurs uniques nous aideront à déterminer lequel des boutons de soumission a été pressé.

Et écrire 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
11
répondu jayu 2012-10-14 12:22:00

C'est ce que j'ai essayé: 1. Vous devez vous assurer de donner à vos boutons des noms différents 2. Écrire une instruction if qui fera le nécessaire si bouton 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();

}
10
répondu Samuel Mugisha 2014-03-03 06:16:35

À Partir de https://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'arborescence ordre 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 en appuyant sur la touche "Entrée" alors qu'un texte champ est focalisé soumet implicitement le formulaire)...

Ayant 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>
10
répondu nikkypx 2015-03-28 21:05:52

La première fois que je me suis heurté à cela, j'ai trouvé un hack onclick () / js lorsque les choix ne sont pas prev / next que j'aime toujours pour sa simplicité. Il va comme ceci:

@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 vous cliquez sur l'un des boutons submit, il stocke l'opération souhaitée dans un champ caché (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 décide. 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 serrer ceci en utilisant légèrement des codes d'opération numériques pour éviter l'analyse de chaîne, mais à moins que vous ne jouiez avec des énumérations, le code est moins lisible, modifiable et auto-documenté et l'analyse est triviale, de toute façon.

10
répondu MiddleAgedMutantNinjaProgrammer 2015-09-03 13:37:04

Je suis tombé sur cette question en essayant de trouver une réponse à fondamentalement la même chose, seulement avec asp.net contrôles, quand j'ai compris que le bouton asp a une propriété appelée UseSubmitBehavior qui vous permet de définir lequel fait la soumission. 

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

Juste au cas où quelqu'un cherche le asp.net bouton façon de le faire.

8
répondu Barry Franklin 2016-03-24 17:29:22

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');
    }
});
7
répondu GuillaumeS 2015-08-14 10:01:14

J'ai résolu un problème très similaire de cette façon:

  1. Si javascript est activé (dans la plupart des cas de nos jours), tous les boutons de soumission sont "dégradés" aux boutons au chargement de la page via javascript (jquery). Cliquez sur les événements sur le bouton" dégradé " les boutons tapés 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, en appuyant sur Entrée sur un textfield dans le formulaire soumettra le formulaire avec le premier bouton au lieu du par défaut prévu, mais au moins le formulaire est toujours utilisable: Vous pouvez soumettre avec les boutonsprev etnext .

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>
0
répondu riskop 2018-03-06 10:32:08

Essayez ceci..!

<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>
0
répondu Gowtham Balusamy 2018-04-11 20:51:12

Vous pouvez utiliser Tabindex pour résoudre ce problème, changer également l'ordre du bouton serait un moyen plus efficace d'y parvenir. Modifiez l'ordre du bouton et ajoutez des valeurs float pour leur attribuer la position souhaitée que vous souhaitez afficher dans votre vue HTML.

0
répondu Jyoti mishra 2018-04-25 06:28:32

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 "précédent" sera soumise. Si vous cliquez sur "Page Suivante" seule la valeur de "prochain" sera présenté.

Si toutefois, vous appuyez sur Entrée quelque part sur le formulaire, ni "précédent" ni "suivant" ne seront soumis.

Donc, en utilisant du pseudo-code, vous pouvez faire ce qui suit: 

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
-3
répondu GateKiller 2008-08-05 15:08:42