Plusieurs boutons de soumission dans un formulaire HTML

Question

Supposons que vous créiez un assistant dans un formulaire HTML.Un bouton revient et un autre avance.Depuis le dos Le bouton 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 j'aimerais 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 et non à la précédente.Devez-vous utiliser tabindex pour faire ça?

Answer 1

J'espère que ça aide.Je fais juste le tour de floaten appuyant sur les boutons vers la droite.

De cette façon le Prev le bouton est à gauche du Next bouton mais le Next vient 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>

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

Answer 2

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

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

Désormais, le bouton Suivant sera le bouton par défaut et vous pourrez également ajouter le default attribuez-le pour que votre navigateur le mette en surbrillance ainsi :

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

J'espère que cela pourra aider.

Answer 3

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 le Demande va au serveur, vous pouvez vérifier la valeur de submitButton sur votre code côté serveur qui contient une collection de formulaires name/value 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

Référence: Utilisation de plusieurs boutons de soumission sur un seul formulaire

Answer 4

Si le fait que le premier bouton soit utilisé par défaut est cohérent dans tous les navigateurs, pourquoi ne pas les placer à l'endroit dans le code source, puis utiliser CSS pour inverser leurs positions apparentes ? float déplacez-les vers la gauche et la droite pour les permuter visuellement, par exemple.

Answer 5

Si vous voulez vraiment que cela fonctionne comme une boîte de dialogue d'installation, que diriez-vous simplement de donner le focus au bouton "Suivant" OnLoad.De cette façon, si l'utilisateur clique sur Retour, le formulaire est soumis et continue.S'ils souhaitent revenir en arrière, ils peuvent appuyer sur Tab ou cliquer sur le bouton.

Answer 6

Parfois, la solution fournie par @palotasb n'est pas suffisante.Il existe des cas d'utilisation dans lesquels, par exemple, un bouton de soumission « Filtre » est placé au-dessus de boutons tels que « Suivant et Précédent ».J'ai trouvé une solution de contournement pour cela : copie le bouton de soumission qui doit agir comme 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 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>

Answer 7

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 Entrer dans Form2, le bouton Soumettre suivant se déclencherait.

Answer 8

Vous pouvez le faire avec CSS.

Mettez les boutons dans le balisage avec le Next d'abord, puis le Prev bouton ensuite.

Utilisez ensuite CSS pour les positionner afin qu'ils apparaissent comme vous le souhaitez.

Answer 9

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 pour procéder : 1, 2.Sur cette base, 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)" />

Answer 10

Kévin,

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

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 fonctionne toujours !

Answer 11

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

Marquez le premier bouton sur lequel vous souhaitez déclencher Entrer appuyez sur la touche comme bouton par défaut sur le formulaire.Pour le deuxième bouton, associez-le à Retour arrière bouton du clavier. Retour arrière le code 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>

J'espère que cela t'aides.

Answer 12

Changer l’ordre des onglets devrait suffire pour y parvenir.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.

Answer 13

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.

Changer l’ordre des onglets devrait suffire pour y parvenir.Rester simple.

Answer 14

garder le même nom pour tous les boutons de soumission -- "prev" La seule différence est le value attribut avec des valeurs uniques.Lorsque nous créons le script, ces valeurs uniques nous aideront à déterminer sur lequel des boutons de soumission vous avez appuyé.

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

Answer 15

La première fois que je suis tombé sur cela, j'ai trouvé un hack onclick()/js 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'on clique sur l'un des boutons de soumission, 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 toute la décision.Dans le Controller, 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 Enums, le code est moins lisible, modifiable et auto-documenté et l'analyse est de toute façon triviale.

Answer 16

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

}

Answer 17

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 des arbres dont le propriétaire du formulaire est cet élément de formulaire.

Si l'agent utilisateur prend en charge la permettant à l'utilisateur de soumettre un formulaire implicitement (par exemple, sur certaines plates-formes qui frappent la touche "Entrée" alors qu'un champ de texte est ciblé soumet implicitement le formulaire) ...

Avoir l'entrée suivante comme 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>

Answer 18

Je suis tombé sur cette question en essayant de trouver une réponse à 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 UseSubmitBehavior cela vous permet de définir lequel effectue la soumission.

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

Juste au cas où quelqu'un chercherait le bouton asp.net pour le faire.

Answer 19

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

Answer 20

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é" 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 de soumission.Dans ce cas, appuyez sur Entrée sur un textfield dans le formulaire soumettra le formulaire avec le premier bouton au lieu de celui prévu défaut, mais au moins le formulaire est toujours utilisable :vous pouvez soumettre à la fois le précédent et suivant boutons.

exemple fonctionnel :

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

Answer 21

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>

Answer 22

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

Answer 23

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 sur Entrée quelque part sur le formulaire, ni « précédent » ni « suivant » ne seront soumis.

Ainsi, en utilisant un pseudo-code, 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