Plusieurs boutons d’envoi dans un formulaire HTML

Disons que vous créez un assistant dans un formulaire HTML. Un bouton revient en arrière et l’autre avance. Étant donné que le bouton Précédent apparaît en premier dans le balisage lorsque vous appuyez sur Entrée, ce bouton est utilisé pour soumettre le formulaire.

Exemple:

Ce que je voudrais faire, c’est 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, pas à la précédente. tabindex -vous utiliser tabindex pour ce faire?

J’espère que ça aide. Je fais juste le tour de float les boutons sur la droite.

De cette façon, le bouton Prev rest sur le bouton Next, mais Next est le premier dans le code HTML:

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

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

  

Maintenant, le bouton Suivant serait la valeur par défaut, et vous pourriez également lui append l’atsortingbut default pour que votre navigateur le surligne comme suit:

  

J’espère que cela pourra aider.

Donnez à vos boutons de soumission le même nom que celui-ci:

   

Lorsque l’utilisateur appuie sur Entrée et que la demande est submitButton au serveur, vous pouvez vérifier la valeur de submitButton sur votre code côté serveur qui contient une collection de paires name/value de formulaire. 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 

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

Si le fait que le premier bouton soit utilisé par défaut est cohérent sur tous les navigateurs, pourquoi ne pas le placer correctement dans le code source, puis utiliser CSS pour changer de position apparente? float à gauche et à droite pour les changer visuellement, par exemple.

Si vous voulez vraiment que cela fonctionne comme une boîte de dialog d’installation, pourquoi ne pas simplement donner le focus au bouton “Suivant” OnLoad. De cette façon, si l’utilisateur frappe Retour, le formulaire est soumis et est transmis. S’ils veulent revenir en arrière, ils peuvent cliquer sur Tab ou cliquer sur le bouton.

Il peut fonctionner avec CSS

Placez-les d’abord dans le balisage, puis le bouton précédent.

Ensuite, utilisez CSS pour les positionner comme vous le souhaitez

Parfois, la solution fournie par @palotasb n’est pas suffisante. Il existe des cas d’utilisation où, par exemple, un bouton d’envoi “Filtrer” est placé au-dessus des boutons tels que “Suivant et Précédent”. J’ai trouvé une solution à ce problème: copiez le bouton de soumission qui doit agir comme bouton de soumission par défaut dans un div caché et placez-le 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 comme le nom et la valeur sont les mêmes, il n’y a pas de différence dans le résultat.

      

Filtered results

Filtered result 1 Filtered result 2 Filtered result 3

Kevin, cela ne peut pas être fait avec du HTML pur. Vous devez compter sur JavaScript pour cette astuce.

Toutefois, 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 Entrée dans Form2, le bouton Soumettre suivant se déclenche.

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 était sélectionnée. Si tel est le cas, le formulaire sera envoyé.

Voici deux pages expliquant comment procéder: 1 , 2 . Sur la base de ceux-ci, voici un exemple d’utilisation (basé ici ):

   

Kevin,

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

 

Firefox, Opera, Safari, Google Chrome fonctionnent tous.
Comme toujours, IE est le problème.

Cette version fonctionne lorsque javascript est activé:

 

Le défaut de cette solution est donc:
La page précédente ne fonctionne pas si vous utilisez IE avec Javascript désactivé.
Attention, le bouton retour marche toujours!

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

Marquer le premier bouton que vous voulez déclencher sur Entrer la touche comme bouton par défaut sur le formulaire. Pour le deuxième bouton, associez-le au bouton Retour arrière du clavier. Le code d’événement de retour arrière est 8.

 $(document).on("keydown", function(event) { if (event.which.toSsortingng() == "8") { var findActiveElementsClosestForm = $(document.activeElement).closest("form"); if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) { $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").sortinggger("click"); } } }); 
  

Changer l’ordre de tabulation est tout ce qu’il faut pour accomplir cela. 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 laisser à gauche pour qu’il apparaisse sur la page avant le bouton de soumission.

Une autre option simple serait de placer le bouton de retour après le bouton de soumission dans le code HTML, mais de le laisser à gauche pour qu’il apparaisse sur la page avant le bouton de soumission.

Changer l’ordre de tabulation est tout ce qu’il faut pour accomplir cela. Rester simple.

conserve le même nom pour tous les boutons de soumission – “prev” La seule différence est l’atsortingbut de value avec des valeurs uniques. Lorsque nous créons le script, ces valeurs uniques nous aideront à déterminer lequel des boutons d’envoi a été pressé.

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 

C’est ce que j’ai essayé: 1. Vous devez vous assurer de donner à vos boutons des noms différents. 2. Écrivez une instruction if qui fera l’action requirejse si l’un des boutons est cliqué.

 

En PHP,

 if(isset($_POST['prev'])) { header("Location: https://stackoverflow.com/questions/48/multiple-submit-buttons-in-an-html-form/previous.html"); die(); } if(isset($_POST['next'])) { header("Location: next.html"); die(); } 

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 un arbre 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 de manière implicite (par exemple, sur certaines plates-formes, appuyer sur la touche “Entrée” pendant qu’un champ de texte est focalisé soumet implicitement le formulaire) …

Avoir la prochaine entrée soit type = “submit” et changer l’entrée précédente en type = “button” devrait donner le comportement par défaut désiré.

 

La première fois que je me suis heurté à cela, je suis venu avec un hack onclick () / js lorsque les choix ne sont pas prev / next que j’aime toujours pour sa simplicité. Ça va comme ça:

 @model myApp.Models.myModel  

Lorsque l’utilisateur clique sur l’un des boutons, 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 décide de tout. 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 d’opération numériques pour éviter l’parsing de chaîne, mais à moins que vous ne jouiez avec Enums, le code est moins lisible, modifiable et l’auto-documentation est sortingviale.

Je suis tombé sur cette question en essayant de trouver une réponse à la même chose, uniquement avec les contrôles asp.net, quand je me suis rendu compte que le bouton asp a une propriété appelée UseSubmitBehavior qui vous permet de définir celui qui effectue la soumission.

  

Juste au cas où quelqu’un serait à la recherche du bouton asp.net pour le faire.

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'); } }); 

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), alors tous les boutons de soumission sont ” dégradés ” en boutons au chargement de la page via javascript (jquery). Les événements de clic sur les boutons ” dégradés ” sont également traités via javascript .

  2. Si javascript n’est pas activé, le formulaire est envoyé au navigateur avec plusieurs boutons d’envoi. Dans ce cas, si vous appuyez sur entrée dans un textfield du formulaire, le formulaire sera envoyé avec le premier bouton au lieu de celui par défaut , mais au moins le formulaire est utilisable: vous pouvez le soumettre avec les boutons prev et next .

exemple de travail:

      
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.


Essaye ça..!

 

Vous pouvez utiliser Tabindex pour résoudre ce problème. La modification de l’ordre des boutons serait également un moyen plus efficace d’y parvenir. Modifiez l’ordre des boutons et ajoutez des valeurs float pour leur atsortingbuer la position que vous souhaitez afficher dans votre vue HTML .

En utilisant l’exemple que vous avez donné:

 

Si vous cliquez sur “Page précédente”, seule la valeur de “prev” sera envoyée. Si vous cliquez sur “Page suivante”, seule la valeur de “suivant” sera soumise.

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

Donc, en utilisant un 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