Plusieurs boutons Submit un formulaire HTML

Question

Plusieurs boutons Submit un formulaire HTML

voix

233

Disons que vous créez un assistant dans un formulaire HTML. Un bouton retourne, et on va de l' avant. Depuis le retour bouton apparaît d' abord dans la balise 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 je voudrais faire, est d' obtenir pour 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 de l'assistant se déplace à la page suivante, pas le précédent. Avez - vous d'utiliser tabindexpour ce faire?

html form-submit html-form submit-button

Créé 01/08/2008 à 14:01
source utilisateur Kevin

Dans d'autres langues...

23 réponses

voix

60

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

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

Maintenant , le bouton Suivant serait la valeur par défaut, plus vous pouvez également ajouter l' defaultattribut afin que votre navigateur mettra en évidence comme si:

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

J'espère que cela pourra aider.

Créé 01/08/2008 à 14:14
source utilisateur Wally Lawless

voix

53

Donnez votre boutons de soumission même nom comme celui-ci:

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

Lorsque l'utilisateur appuie entrer et la demande va au serveur, vous pouvez vérifier la valeur submitButtonde votre code côté serveur qui contient une collection de forme name/valuepaires. Par exemple , dans 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

Créé 01/08/2008 à 14:10
source utilisateur huseyint

voix

30

Si le fait que le premier bouton est utilisé par défaut est cohérente à travers les navigateurs, pourquoi ne pas les mettre le rond droit chemin dans le code source, utilisez CSS pour changer leurs positions apparentes? floatles gauche et à droite pour les passer autour visuellement, par exemple.

Créé 02/08/2008 à 12:24
source utilisateur Polsonby

voix

17

Parfois , la solution fournie par @palotasb ne suffit pas. Il y a des cas où l' utilisation par exemple un « filtre » le bouton d' envoi est placé au- dessus des boutons comme « Suivant et Précédent ». J'ai trouvé une solution pour cela: copier le bouton d' envoi qui doit agir comme le bouton d' envoi par défaut dans un div caché et le placer dans le formulaire ci - dessus tout autre bouton soumettre. Techniquement , il sera soumis par un autre bouton lorsque vous appuyez sur Entrée , puis en cliquant sur le bouton Suivant visible. Mais puisque le nom et la valeur est la même, il n'y a pas de 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>

Créé 26/10/2012 à 10:53
source utilisateur netiul

voix

17

Il peut fonctionner avec CSS

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

Ensuite, utilisez les CSS pour les positionner à apparaître comme vous le souhaitez

Créé 16/09/2008 à 13:16
source utilisateur qui

voix

17

Kevin, cela ne peut être fait avec 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 des entrées utilisateur + le bouton suivant.

Lorsque l'utilisateur appuie Entersur Form2, le bouton soumettre suivant tireraient.

Créé 26/08/2008 à 04:44
source utilisateur FlySwat

voix

17

Si vous voulez vraiment que cela fonctionne comme un dialogue d'installation, qu'en donnant simplement l'accent sur le OnLoad bouton « Suivant ». De cette façon, si le retour utilisateur touche, la forme présente et va de l'avant. S'ils veulent revenir en arrière, ils peuvent frapper Tab ou cliquez sur le bouton.

Créé 26/08/2008 à 04:41
source utilisateur Scott Gottreu

voix

15

J'utiliser Javascript pour soumettre le formulaire. La fonction serait déclenchée par l'événement OnKeyPress de l'élément de forme, et détecterait si la touche Enter a été sélectionnée. Si tel est le cas, il soumettra le formulaire.

Voici deux pages qui donnent des techniques sur la façon de le faire: 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)" />

Créé 03/08/2008 à 14:12
source utilisateur Yaakov Ellis

voix

14

Kevin,

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, Google Chrome tout le travail.
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>

Ainsi , le défaut de cette solution est:
Page Précédente ne fonctionne pas si vous utilisez IE avec Javascript off.
Rappelez - vous, le bouton de retour fonctionne toujours!

Créé 16/09/2008 à 12:19
source utilisateur Jolyon

voix

13

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

Marquer le premier bouton que vous voulez déclenche le Enterkeypress comme defaultButton sur le formulaire. Pour le deuxième bouton associé à Backspacebouton sur le clavier. BackspaceeventCode 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.

Créé 14/03/2014 à 15:51
source utilisateur user1591131

voix

12

Une autre option simple serait de mettre le bouton de retour après le bouton d'envoi dans le code HTML, mais flotter à la gauche de sorte qu'il apparaît sur la page avant que le bouton soumettre.

Modification de l'ordre de tabulation devrait être tout ce qu'il faut pour y parvenir. Rester simple.

Créé 14/10/2014 à 17:02
source utilisateur user4136731

voix

12

Modification de l'ordre de tabulation devrait être tout ce qu'il faut pour y parvenir. Rester simple.

Une autre option simple serait de mettre le bouton de retour après le bouton d'envoi dans le code HTML, mais flotter à la gauche de sorte qu'il apparaît sur la page avant que le bouton soumettre.

Créé 27/11/2012 à 23:27
source utilisateur Kenny Johnson

voix

11

garder le nom de tous les boutons de soumission de la même - « prev » La seule différence est l' valueattribut avec des valeurs uniques. Lorsque nous créons le script, ces valeurs uniques nous aideront à comprendre lequel des boutons submit a été pressé.

Et écrire follwing codage:

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

Créé 05/06/2012 à 10:19
source utilisateur jayu

voix

10

La première fois que je suis contre cela, je suis venu avec un onclick () / pirater js lorsque les choix ne sont pas prev / suivant que j'aime toujours 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'bouton est utilisé, il stocke l'opération souhaitée dans un champ caché (qui est un champ de chaîne inclus dans le modèle la forme est associée à) et soumet le formulaire au contrôleur, qui fait tout le décider. 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 affinez ceci légèrement en utilisant des codes d'opération numériques pour éviter l'analyse de la chaîne, mais à moins que vous jouez avec énumérations, le code est moins lisible, modifiable et autodocumenté et l'analyse syntaxique est trivial, de toute façon.

Créé 03/09/2015 à 13:30
source utilisateur MiddleAgedMutantNinjaProgrammer

voix

10

de https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

Un bouton par défaut de l'élément de forme est le premier bouton d'envoi pour l'arbre dont le propriétaire est la forme que l'élément de forme.

Si l'agent utilisateur prend en charge l'utilisateur de laisser soumettre un formulaire implicitement (par exemple, sur certaines plates-formes appuyant sur la touche « enter » tandis qu'un champ de texte se concentre soumet implicitement la forme) ...

Avoir l'entrée suivante soit le type = « submit » et changer l'entrée précédente à « bouton » type = doit 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>

Créé 28/03/2015 à 21:05
source utilisateur nikkypx

voix

10

C'est ce que j'ai essayé: 1. Vous devez vous assurer que vous donnez vos boutons différents noms 2. Ecrire une instruction if qui fera l'action requise si l'un des boutons de clic.

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

}

Créé 03/03/2014 à 07:16
source utilisateur Samuel Mugisha

voix

8

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

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

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

Créé 24/03/2016 à 17:29
source utilisateur Barry Franklin

voix

7

, Vous pouvez désactiver le bouton prev avant de soumettre le formulaire avec javascript (jQuery ici).

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

Créé 14/08/2015 à 10:01
source utilisateur GuillaumeS

voix

0

Vous pouvez utiliser Tabindexpour résoudre ce problème, en train de changer l'ordre de bouton serait moyen plus efficace pour y parvenir. Changer l'ordre des boutons et ajouter des floatvaleurs à leur attribuer la position désirée que vous voulez afficher dans votre HTMLvue.

Créé 25/04/2018 à 06:28
source utilisateur Jyoti mishra

voix

0

Je résolu un problème très similaire de cette façon:

si javascriptest activé (dans la plupart des cas aujourd'hui) , alors tous les boutons submit sont « dégradés » à des boutons à la page charge via javascript(jquery). Cliquez sur les événements « dégradés » Touches tapés sont traités aussi par javascript.
si javascriptn'est pas activée, le formulaire est transmis au navigateur avec plusieurs boutons d' envoi. Dans ce cas , percutant entrer sur textfielddans le formulaire présentera le formulaire avec le premier bouton au lieu de l'intention par défaut , mais au moins la forme est encore utilisable: vous pouvez soumettre à la fois le précédent et suivant les boutons.

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>

Créé 09/01/2018 à 15:26
source utilisateur riskop

voix

0

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>

Créé 29/09/2017 à 04:58
source utilisateur Gowtham Balusamy

voix

-3

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 » que la valeur de « prev » sera soumis. Si vous cliquez sur « Page suivante » que la valeur de « suivant » sera soumis.

Cependant, si vous appuyez sur entrer quelque part sur la forme, ni « prev », ni « suivant » sera soumis.

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

Créé 05/08/2008 à 16:08
source utilisateur GateKiller

palotasb · Accepted Answer · 2008-08-28 10:34

J'espère que ça aide. Je fais juste l'affaire d' floating les boutons à droite.

De cette façon, le bouton Précédent est à gauche du bouton Next, mais la prochaine vient en premier dans le code 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 sur les autres suggestions: JavaScript, accessible, les deux boutons restenttype="submit"