exemple - Plusieurs boutons de soumission dans un formulaire HTML




html formulaire 2 boutons submit (16)

Supposons que vous créez un assistant dans un formulaire HTML. Un bouton revient en arrière et un autre en avant. Comme le bouton Précédent 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>

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


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

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 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 dans cette solution est donc:

La page précédente ne fonctionne pas si vous utilisez Internet Explorer avec JavaScript désactivé.

Remarquez, le bouton retour fonctionne toujours!


Changer l'ordre de tabulation devrait suffire à accomplir cela. Rester simple.

Une autre option simple serait de placer le bouton Précédent après le bouton Soumettre dans le code HTML tout en le faisant flotter à gauche pour qu'il apparaisse sur la page avant le bouton Soumettre.


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 serait la valeur par défaut. Vous pouvez également ajouter l'attribut default afin que votre navigateur la surligne de la manière suivante:

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

Donnez à vos boutons d'envoi 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 demande parvient au serveur, vous pouvez vérifier la valeur de submitButton dans votre code côté serveur, qui contient une collection de paires name/value de formulaire. 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 seul formulaire


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 la touche Entrée quelque part sur le formulaire, ni "prev" ni "next" 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

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), tous les boutons de soumission sont " dégradés " en boutons lors du chargement de la page via JavaScript (jQuery). Les événements de clic sur les boutons typés « dégradés » 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, appuyer sur Entrée dans un textfield du formulaire soumettra le formulaire avec le premier bouton au lieu du paramètre 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>


J'espère que ça aide. Je suis juste en train de float glisser les boutons à droite.

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

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


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 découvert que le bouton ASP avait une propriété appelée UseSubmitBehavior qui vous permet de définir laquelle effectuera la soumission.

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

Juste au cas où quelqu'un chercherait le moyen de le faire avec ASP.NET.


La première fois que je me suis heurté à cela, je suis arrivé avec un hack onclick () / JavaScript lorsque les choix ne sont pas précédents / prochains, ce 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 enregistre 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 le soumet 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 restreindre légèrement cette opération à l'aide de codes d'opération numériques pour éviter l'analyse syntaxique. Cependant, à moins que vous ne jouiez avec des énumérations, le code est moins lisible, modifiable et auto-documenté et l'analyse est néanmoins triviale.


Si le fait que le premier bouton soit utilisé par défaut est cohérent sur tous les navigateurs, placez-les correctement dans le code source, puis utilisez CSS pour modifier leurs positions apparentes.

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


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 touche Entrée comme bouton par défaut du 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.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>


Une autre option simple serait de placer le bouton Précédent après le bouton Soumettre dans le code HTML, tout en le faisant flotter à gauche pour qu'il apparaisse sur la page avant le bouton Soumettre.

Changer l'ordre de tabulation devrait suffire à accomplir cela. Rester simple.


Voici ce que j'ai essayé:

  1. Vous devez vous assurer de donner des noms différents à vos boutons
  2. Ecrivez une instruction if qui effectuera l'action requise si vous cliquez sur l'un des boutons.

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

Vous pouvez utiliser Tabindex pour résoudre ce problème. Changer l'ordre des boutons constituerait également un moyen plus efficace d'y parvenir.

Modifiez l'ordre des boutons et ajoutez des valeurs float pour leur attribuer la position que vous souhaitez afficher dans votre vue HTML .


<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page"> 

Conservez 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é activé.

Et écrivez le code suivant:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if




submit-button