Plusieurs boutons d'envoi dans un formulaire HTML

263

Supposons que vous créez un assistant dans un formulaire HTML. Un bouton remonte et un avance. Étant donné que le bouton de retour apparaît en premier dans le balisage lorsque vous appuyez sur Enter, 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>
Développer l'extrait

Je voudrais décider quel bouton est utilisé pour envoyer le formulaire lorsqu'un utilisateur appuie sur Enter. De cette façon, lorsque vous appuyez sur Enterl'assistant, vous passez à la page suivante, pas à la précédente. Devez-vous utiliser tabindexpour ce faire?

html forms form-submit submit-button Kevin
la source

Réponses:

142

J'espère que ça aide. Je fais juste l'astuce de floattoucher les boutons à droite.

De cette façon, le Prevbouton est à gauche du Nextbouton, mais Nextvient 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>
Développer l'extrait

Avantages par rapport aux autres suggestions: pas de code JavaScript, accessible et les deux boutons restent type="submit".

palotasb
la source
23
Veuillez ne pas le faire sans changer également l'ordre des onglets, de sorte que le fait d'appuyer sur le bouton d'onglet fera défiler les boutons tels qu'ils apparaissent à l'écran.
Steve
61

Modifiez 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 serait la valeur par défaut, et vous pourriez également y ajouter l' defaultattribut afin que votre navigateur le surligne comme suit:

<input type="submit" name="next" value="Next Page" default />
Wally Lawless
la source
39
De quel defaultattribut parlez-vous? Il n'y a pas d'attribut "par défaut", 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à buttonserait mieux. Vous pouvez avoir plusieurs éléments d'entrée de type d'envoi dans un seul formulaire sans problème. Je ne comprends pas vraiment pourquoi cette réponse est si positive.
Sk8erPeter
3
Avoir une entrée de type "bouton" 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 de type "soumettre"). C'est ce que je cherchais et c'est pourquoi je l'ai voté. Je ne peux pas parler de l'attribut "par défaut", cela ne faisait pas partie de mon problème;) merci pour votre clarification, cependant.
Jonas
2
@ Sk8erPeter, @Jonas .... hmm .. Je soupçonne que cet defaultattribut est un attribut global; attribut énuméré .. qui est lié aux états d'énumération: w3.org/html/wg/drafts/html/master/… . à part 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 ).
Brett Caswell
3
@Jonas: oui, type="button"ne soumet pas le formulaire, le type="submit"fait, mais changer le type de ces boutons n'est certainement pas une solution, car ces boutons devraient fondamentalement se comporter de la même manière - la question du PO était de savoir comment faire du bouton "Suivant" le par défaut pour avoir appuyé sur la touche Entrée. Et il y a une solution possible dans la réponse acceptée.
Sk8erPeter
4
@BrettCaswell: changer le type de ces boutons est une mauvaise solution (voir mon commentaire précédent). Il n'y a pas d' defaultattribut valide pour les inputbalises (comme je l'ai dit plus tôt) en HTML, et les navigateurs (populaires) ne mettront PAS en surbrillance le bouton qui a cet attribut, ce qui signifie qu'il n'y a pas d'implémentation non standard de cet attribut - donc je ne sais toujours pas de quoi parlait @Wally Lawless, et pourquoi cette réponse est tellement surfaite. Il n'y a qu'un seul defaultattribut valide introduit en HTML5, MAIS uniquement pour la <track>balise: developer.mozilla.org/en-US/docs/Web/HTML/Element/track
Sk8erPeter
56

Donnez à vos boutons d'envoi le même nom que celui-ci:

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

Lorsque l'utilisateur appuie sur Enteret que la demande est envoyée au serveur, vous pouvez vérifier la valeur de submitButtonvotre code côté serveur qui contient une collection de name/valuepaires de formulaires . Par exemple, dans 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

Référence: utilisation de plusieurs boutons d'envoi sur un même formulaire

huseyint
la source
26
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 la touche Entrée est pressée, c.-à-d. qui est le bouton par défaut.
kosoant
20
ne fonctionne pas dans une application I18n où vous ne connaissez même pas l'étiquette du bouton.
Chris
Dans quelle solution système ou technologique le serveur lui-même ne savait-il pas quelle étiquette était utilisée pour le bouton suivant et précédent? Le serveur n'a-t-il pas généré le bouton suivant et précédent en premier lieu? (Si la localisation est gérée côté client, j'imagine que le serveur peut ne pas le savoir, mais je n'en ai jamais entendu parler pour HTML)
Jacob
Cette réponse passe complètement à côté de la question, probablement pour une autre question. Pourquoi tant de votes positifs ??? Sans oublier qu'il ne faut jamais vérifier l'étiquette du bouton ... demande beaucoup de mal. Même le cas simple: «nous devrions abréger la chaîne en« Page précédente »» ruinera la fonctionnalité de vos sites.
Tylla
30

Si le fait que le premier bouton est utilisé par défaut est cohérent entre les navigateurs, mettez-les dans le bon sens dans le code source, puis utilisez CSS pour changer leur position apparente.

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

Polsonby
la source
18

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 de boutons comme "Suivant et Précédent". J'ai trouvé une solution de contournement pour cela: copiez le bouton d'envoi qui doit agir comme bouton d'envoi par défaut dans une div cachée et placez-le à l'intérieur du formulaire au-dessus de tout autre bouton d'envoi. Techniquement, il sera soumis par un bouton différent en appuyant sur Entrée qu'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>
netiul
la source
17

J'utiliserais JavaScript pour envoyer le formulaire. La fonction serait déclenchée par l'événement OnKeyPress de l'élément de formulaire et détecterait si leEnter clé a été sélectionnée. Si tel 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)" />
Yaakov Ellis
la source
2
Que se passe-t-il si javascript est désactivé?
Jon Winstanley
2
Vous ne devez pas utiliser <! - et -> pour commenter JS, ces balises ne sont pas des jetons de langage Javascript
Marecky
2
@Marecky Ils ne doivent 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 plus nécessaires. Mais dans les navigateurs très anciens, il s'agissait d'un hack de compatibilité pour éviter que le script ne soit imprimé en texte brut.
leemes
17

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 frappe Return, le formulaire se soumet et avance. S'ils veulent revenir en arrière, ils peuvent Tabappuyer ou cliquer sur le bouton.

Scott Gottreu
la source
2
Ils signifient que quelqu'un remplit un formulaire et clique sur Retour dans un champ de texte.
Jordan Reiter
17

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 Entersur Form2, le bouton Soumettre suivant se déclenche.

FlySwat
la source
16

Vous pouvez le faire avec CSS.

Mettez les boutons dans le balisage avec le Nextbouton en premier, puis lePrev bouton après.

Utilisez ensuite CSS pour les positionner de manière à apparaître comme vous le souhaitez.

qui
la source
14

Cela fonctionne sans JavaScript ni 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>

La faille 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 retour fonctionne toujours!

Jolyon
la source
1
Sans javascript, vous ne pourrez pas activer le bouton "page précédente", car le type = "bouton"!
riskop
Le problème avec votre suggestion est qu'un type de bouton = "bouton" ne publierait pas le formulaire, donc il ne fait rien du tout, tandis que la deuxième version avec une ancre créerait un GET au lieu d'un POST.
Tylla
12

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 la Entertouche comme le bouton par défaut sur le formulaire. Pour le deuxième bouton, associez-le auBackspace bouton du clavier. Le Backspacecode d'événement 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>
Développer l'extrait

user1591131
la source
11

Changer l'ordre des onglets devrait être tout ce qu'il faut pour y parvenir. Rester simple.

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

Kenny Johnson
la source
10 
<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page">

Conservez le nom de tous les boutons d'envoi de la même manière - "précédent".

La seule différence est la value attribut avec des valeurs uniques. Lorsque nous créons le script, ces valeurs uniques nous aideront à déterminer lequel des boutons de soumission 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
jayu
la source
Le problème est que si vous appuyez sur Entrée dans un champ de texte, le formulaire sera soumis avec le premier bouton d'envoi, et non avec celui prévu (le second dans l'exemple). Il est facile de savoir quel bouton d'envoi a été utilisé pour envoyer le formulaire et ce n'était pas la question!
riskop
Pourquoi name="perv"?
Peter Mortensen
10

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

Changer l'ordre des onglets devrait être tout ce qu'il faut pour y parvenir. Rester simple.

Peter Mortensen
la source
10

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édents / suivants 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 de soumission est cliqué, 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 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 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.

MiddleAgedMutantNinjaProgrammer
la source
9

Depuis 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'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, appuyer sur la touche "Entrée" alors qu'un champ de texte est focalisé soumet implicitement le formulaire) ...

Avoir l'entrée suivante être type = "soumettre" et changer l'entrée précédente en type = "bouton" 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>
nikkypx
la source
9

Voici ce que j'ai essayé:

  1. Vous devez vous assurer de donner des noms différents à vos boutons
  2. Écrivez une ifdéclaration 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();
}
Samuel Mugisha
la source
Le problème est que si vous appuyez sur Entrée dans un champ de texte, le formulaire sera soumis avec le premier bouton d'envoi, et non avec celui prévu (le second dans l'exemple). Il est facile de savoir quel bouton d'envoi a été utilisé pour envoyer le formulaire et ce n'était pas la question!
riskop
7

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ée UseSubmitBehaviorqui vous permet de définir celle qui soumet.

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

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

Barry Franklin
la source
6

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');
    }
});
GuillaumeS
la source
1

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>
Développer l'extrait

Gowtham Balusamy
la source
1

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 " en boutons au chargement de la page via JavaScript (jQuery). Les événements de clic sur les boutons tapés sur le bouton " 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, appuyer Entersur un textfielddans le formulaire soumettra le formulaire avec le premier bouton au lieu de la valeur par défaut , mais au moins le formulaire est toujours utilisable: vous pouvez soumettre avec les boutons précédent et suivant .

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>
Développer l'extrait

riskop
la source
0

Vous pouvez utiliser Tabindex pour 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 ajoutez des floatvaleurs pour leur affecter la position souhaitée que vous souhaitez afficher dans votre HTMLvue.

Jyoti mishra
la source
-4

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 de «Suivant» sera soumise.

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

Donc, en utilisant un pseudocode, 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
GateKiller
la source
1
Il n'y a jamais de situation (sans utiliser js) où 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, c'est le bouton prev.
SimonSimCity