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'un avance. Puisque le bouton back apparaît en premier dans le balisage lorsque vous appuyez sur Entrée, il utilisera ce bouton pour envoyer le formulaire.

Exemple:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

Ce que je voudrais faire, c'est de décider quel bouton est utilisé pour soumettre le formulaire quand un utilisateur appuie sur Entrée. Ainsi, lorsque vous appuyez sur Entrée, l'assistant passe à la page suivante et non à la page précédente. Devez-vous utiliser tabindex pour cela?

0
ajouté édité
Vues: 25

22 Réponses

Serait-il possible de changer le type de bouton précédent en un bouton comme celui-ci:

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

Maintenant, le bouton Suivant est le bouton par défaut, plus vous pouvez également ajouter l'attribut default pour que votre navigateur le mette en surbrillance comme ceci:

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

J'espère que cela pourra aider.

0
ajouté
@BrettCaswell: changer le type de ces boutons est une mauvaise solution de contournement (voir mon commentaire précédent). Il n'y a pas d'attribut default valide pour les balises input (comme je l'ai déjà dit) en HTML, et les navigateurs (populaires) ne mettront pas en évidence le bouton qui a cet attribut il n'y a pas de mise en œuvre non standard de cet attribut - donc je ne sais toujours pas de quoi parlait @Wally Lawless, et pourquoi cette réponse est tellement surestimée. Il n'y a qu'un seul attribut default valide introduit dans HTML5, MAIS
ajouté l'auteur Sk8erPeter, source
@Jonas: oui, type = "bouton" ne soumet pas le formulaire, type = "soumettre" , mais changer le type de ces boutons n'est définitivement pas une solution , parce que ces boutons devraient fondamentalement se comporter de la même manière - la question de l'OP était de savoir comment faire du bouton "Suivant" le bouton par défaut pour appuyer sur la touche Entrée. Et il y a une solution possible dans la réponse acceptée.
ajouté l'auteur Sk8erPeter, source
De quel attribut default parlez-vous? Il n'y a pas d'attribut "default", qui serait valide: w3.org/html/wg/drafts/html/master/… ( pas en HTML5, HTML 4.01 Transitional / Strict, XHTML 1.0 Strict). Et je ne vois pas pourquoi changer le type d'entrée de submit en button serait mieux. Vous pouvez avoir plusieurs éléments d'entrée de type submit dans un formulaire sans problème. Je ne comprends
ajouté l'auteur Sk8erPeter, source
Nevermind .. Je viens de réaliser qu'il fournissait une solution de contournement dans cette réponse .. tournant la première entrée dans un bouton de sorte que la deuxième entrée soulève son événement de clic quand la touche d'entrée est pressée ... si .. toujours conditionnelle
ajouté l'auteur Brett Caswell, source
@ Sk8erPeter, @Jonas .... hmm .. Je soupçonne que cet attribut default est un attribut Global; attribut énuméré .. qui est lié aux états d'énumération: w3.org/html/wg/drafts/html/master/… . en dehors de ce point ... l'aspect bouton de cette réponse n'est pas une réponse .. c'est une suggestion conditionnelle 'ou une requête ( question elle-même ).
ajouté l'auteur Brett Caswell, source
Avoir une entrée de type "button" n'exécute pas l'action de formulaire. Vous pouvez avoir un onclick ou quelque chose, exécutant ainsi une autre fonction que l'action de formulaire "par défaut" (qui est exécutée en appuyant sur le bouton "submit"). C'est ce que je cherchais et c'est pourquoi je l'ai surclassé. Je ne peux pas parler de l'attribut "par défaut", ne faisait pas partie de mon problème;) merci pour votre clarification, cependant.
ajouté l'auteur Jonas, source

Donnez à vos boutons de soumission 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 sur Entrée et que la Requête va sur le serveur, vous pouvez vérifier la valeur de submitButton sur votre code côté serveur qui contient une collection de forme nom / valeur paires. Par exemple en 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

Reference: Using multiple submit buttons on a single form

0
ajouté
Ce n'est pas ce que l'utilisateur a demandé. L'utilisateur voulait savoir comment contrôler quel bouton de soumission dans un formulaire est activé lorsque vous appuyez sur Entrée, par exemple. qui est le bouton par défaut.
ajouté l'auteur kosoant, source
ne fonctionne pas dans une application I18n où vous ne connaissez même pas l'étiquette du bouton.
ajouté l'auteur Chris, source

Si le fait que le premier bouton est utilisé par défaut est cohérent entre les navigateurs, pourquoi ne pas les placer dans le code source, puis utiliser CSS pour changer leurs positions apparentes? float les gauche et droite pour les changer visuellement, par exemple.

0
ajouté

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 clé Entrée a été sélectionnée. Si c'est le cas, il soumettra le formulaire.

Voici deux pages qui expliquent comment procéder: 1 , 2 . Sur la base de ceux-ci, 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)" />
0
ajouté
Que se passe-t-il si JavaScript est désactivé?
ajouté l'auteur Jon Winstanley, source
@Marecky Ils ne sont pas à commenter JS. Ils sont ignorés lors de l'analyse du contenu de <script> dans un navigateur prenant en charge <script>. Aujourd'hui, ils ne sont vraiment pas nécessaires. Mais dans les navigateurs très anciens, il s'agissait d'un hack de compatibilité pour éviter que le script soit imprimé en texte brut.
ajouté l'auteur leemes, source
Vous ne devriez pas utiliser pour commenter JS, ces balises ne sont pas des jetons de langage Javascript
ajouté l'auteur Marecky, source

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 envoyée. Si vous cliquez sur "Next Page", seule la valeur de "next" sera envoyée.

Si toutefois vous appuyez sur Entrée quelque part sur le formulaire, ni "prev" ni "next" ne seront soumis.

Donc, en utilisant le pseudo-code, vous pourriez 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
0
ajouté
Il n'y a jamais de situation (sans utiliser js) quand aucun des boutons n'est déclenché. Si vous appuyez sur ENTRÉE, le premier bouton du code interceptera l'événement. Dans l'exemple html, il s'agit du bouton prev.
ajouté l'auteur SimonSimCity, source

Cela peut fonctionner avec CSS

Mettez-les dans le balisage comme le bouton suivant d'abord, puis le bouton précédent suivant.

Utilisez ensuite CSS pour les positionner comme vous le souhaitez

0
ajouté

Parfois, la solution fournie par @palotasb n'est pas suffisante. Il y a 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 pour cela: copier le bouton de soumission qui doit agir comme le bouton de soumission par défaut dans un div caché et le placer dans le formulaire au-dessus de tout autre bouton de soumission. 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>
    
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        
<input type="text" name="filter"><input type="submit" value="Filter">
Filtered results <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>
0
ajouté

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


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

0
ajouté

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 de l'utilisateur + le bouton suivant.

Lorsque l'utilisateur appuie sur Entrée dans Form2, le bouton Soumettre suivant est activé.

0
ajouté

Si vous voulez vraiment que cela fonctionne comme une boîte de dialogue d'installation, que diriez-vous simplement de mettre l'accent sur le bouton "Suivant" OnLoad. De cette façon, si l'utilisateur tape Retour, le formulaire est soumis et continue. S'ils veulent revenir, ils peuvent appuyer sur Tab ou cliquer sur le bouton.

0
ajouté
Ils signifient que quelqu'un remplit un formulaire et frappe le retour dans un champ de texte.
ajouté l'auteur Jordan Reiter, source

J'espère que ça aide. Je fais juste l'astuce de float 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:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-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>
</div> </div>

Edit: Benefits over other suggestions: no JavaScript, accessible, both buttons remain type="submit"

0
ajouté
Veuillez ne pas le faire sans modifier l'ordre des onglets, de sorte que cliquer sur le bouton de l'onglet fera défiler les boutons tels qu'ils apparaissent à l'écran.
ajouté l'auteur Steve, source

Kevin,

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

<form>

<input type="text" name="field1" />


<button type="button">Previous Page</button> <button type="submit">Next Page</button>

</form>

Firefox, Opera, Safari, Google Chrome all work.
As always, IE is the problem.

Cette version fonctionne lorsque JavaScript est activé:

<form>

<input type="text" name="field1" />


<button type="button" onclick="window.location='previous.html'">Previous Page</button> <button type="submit">Next Page</button>

</form>

So the flaw in this solution is:
Previous Page does not work if you use IE with Javascript off.
Mind you, the back button still works!

0
ajouté
Sans JavaScript vous ne pourrez pas activer le bouton "page précédente", car le type = "bouton"!
ajouté l'auteur riskop, source

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 aident à déterminer lequel des boutons d'envoi a été enfoncé.

Et écrivez follwing coding:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
0
ajouté
Le problème est que le fait de cliquer sur entrer dans un champ de texte soumettra le formulaire avec le premier bouton de soumission, pas avec le bouton voulu (le second dans l'exemple). Trouver quel bouton de soumission a été utilisé pour soumettre le formulaire est facile, et ce n'était pas la question!
ajouté l'auteur riskop, source

Changer l'ordre de tabulation devrait être tout ce qu'il faut pour accomplir ceci. Rester simple.

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 pour qu'il apparaisse sur la page avant le bouton de soumission.

0
ajouté

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

}
0
ajouté
Le problème est que le fait de cliquer sur entrer dans un champ de texte soumettra le formulaire avec le premier bouton de soumission, pas avec le bouton voulu (le second dans l'exemple). Trouver quel bouton de soumission a été utilisé pour soumettre le formulaire est facile, et ce n'était pas la question!
ajouté l'auteur riskop, source

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

Marquez le premier bouton que vous voulez déclencher sur Entrez keypress comme bouton par défaut sur le formulaire. Pour le second bouton, associez-le au bouton Backspace du clavier. Le code d'événement Backspace est 8.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(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>
</div> </div>

J'espère que cela t'aides.

0
ajouté

From 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 de soumission dans l'arborescence   commande dont le propriétaire du formulaire est cet élément de formulaire.

     

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

L'entrée suivante étant type = "submit" et la modification de l'entrée précédente en type = "button" devrait donner le comportement par défaut désiré.

<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>
0
ajouté

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

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

La première fois que je me suis heurté à cela, je suis venu avec un hack onclick() / JS quand les choix ne sont pas prev / next 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 Soumettre 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 le resserrer légèrement en utilisant les codes Opération numériques pour éviter l'analyse des chaînes, mais à moins de jouer avec Enums, le code est moins lisible, modifiable et auto-documenté et l'analyse est triviale, de toute façon.

0
ajouté

Essaye ça..!

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<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>
</div> </div>
0
ajouté

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) alors tous les boutons de soumission sont " dégradés " aux boutons au chargement de la page via JavaScript (jquery). Les événements de clic sur les boutons " dégradé " 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, cliquer sur textfield dans le formulaire enverra le formulaire avec le premier bouton au lieu du défaut prévu, mais au moins le formulaire est toujours utilisable: vous pouvez soumettre avec les boutons précédent et suivant .

exemple de travail:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<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.
    
<input type="text" name="text1" >
<button type="submit" name="action" value="button1" >button 1</button>
<input type="text" name="text2" > <button type="submit" name="action" value="button2" >button 2</button>
<input type="text" name="text3" > <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>
</div> </div>
0
ajouté

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

0
ajouté