Plusieurs boutons de soumission sur formulaire HTML - désigner un bouton par défaut [double]

Question

    

Cette question a déjà une réponse ici:

    

        
•              multiples boutons de soumission dans un formulaire HTML                                      23 réponses                          
    

    

J'ai une forme qui a trois boutons de soumission comme suit:

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

La rangée de boutons est un mélange de soumettre, des boutons Reset et JavaScript. L'ordre des boutons est sujette à changement, mais en tout cas le bouton d'enregistrement reste entre les boutons prev et suivants.

Le problème ici est que lorsqu'un utilisateur touche Entrée pour soumettre le formulaire, la variable post « commande » contient « Précédent »; normal, comme cela est le premier bouton d'envoi du formulaire. Je veux cependant le bouton « Suivant » pour être déclenché lorsque l'utilisateur soumet le formulaire via le Enter . Il est un peu comme le définir comme la valeur par défaut bouton d'envoi, même si il y a d'autres boutons devant elle.

Answer 1

Ma suggestion est de ne pas lutter contre ce comportement. Vous pouvez effectivement modifier l'ordre en utilisant des flotteurs. Par exemple:

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

avec:

#buttons { overflow: hidden; }
#buttons input { float: right; }

va effectivement inverser l'ordre et donc sur le bouton « Suivant » sera la valeur déclenchée en appuyant sur entrer.

Ce genre de technique couvrira de nombreuses circonstances sans avoir à recourir à des méthodes JavaScript plus aki.

Answer 2

Le premier bouton est toujours la valeur par défaut; il ne peut pas être changé. Alors que vous peut essayer de le corriger avec JavaScript, la forme se comportera de façon inattendue dans un navigateur sans script, et il y a certains cas d'angle de la facilité d'utilisation / d'accessibilité à penser. Par exemple, le code lié par Zoran présentera accidentellement le formulaire Entrez presse dans une <input type="button">, qui ne serait pas normalement se produire, et ne sera pas attraper le comportement de IE de soumettre le formulaire Entrez presse sur un autre contenu non champ dans la forme. Donc, si vous cliquez sur un texte dans un <p> sous la forme avec ce script et appuyez sur Entrée, le mauvais bouton sera soumis ... particulièrement dangereux si, comme indiqué dans cet exemple, le bouton par défaut réel est « Supprimer »!

Mon conseil serait d'oublier l'utilisation hacks de script pour réassigner defaultness. Aller avec le flux du navigateur et il suffit de mettre le bouton par défaut en premier. Si vous ne pouvez pas pirater la mise en page pour vous donner l'ordre à l'écran que vous voulez, vous pouvez le faire en ayant un bouton invisible factice d'abord dans la source, avec le même nom / valeur que le bouton que vous voulez être par défaut:

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(note:. Positionnement est utilisé pour pousser le bouton hors écran car display: none et visibility: hidden ont navigateur variables effets secondaires que le bouton est prise par défaut et si elle est soumise)

Answer 3

quick'n'dirty vous pouvez créer une copie cachée du bouton soumettre, qui doit être utilisé, lorsque vous appuyez sur entrer.

Exemple CSS

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

Exemple HTML

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

Si quelqu'un frappe maintenant entrer dans votre formulaire, le prochain bouton (caché) sera utilisé comme Déposant.

Testé sur IE9, Firefox, Chrome et Opera

Answer 4

Set type=submit sur le bouton que vous souhaitez être par défaut et type=button à d'autres boutons. Maintenant, dans le formulaire ci-dessous, vous pouvez appuyez sur Entrée dans tous les champs d'entrée, et le bouton Render travaillerez (malgré le fait qu'il est le deuxième bouton sous la forme).

Exemple:

    <button id='close_button' class='btn btn-success'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            type=submit>             <!--  Here we use SUBMIT, not BUTTON -->
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

Testé FF24 et Chrome 35.

Answer 5

Si vous utilisez jQuery, cette solution d'un commentaire de ici est assez lisse:

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

Il suffit d'ajouter class="default" au bouton que vous voulez être la valeur par défaut. Il met une copie cachée de ce bouton droit au début du formulaire.

Answer 6

Je ressuscite parce que je recherchais une manière non JavaScript afin de le faire. Je n'étais pas dans les gestionnaires clés, et les trucs de positionnement CSS causais l'ordre de tabulation pour briser depuis le repositionnement CSS ne change pas l'ordre de tabulation.

Ma solution est basée sur la réponse à https://stackoverflow.com/a/9491141 .

La source de la solution est ci-dessous. tabindex est utilisé pour corriger le comportement de l'onglet du bouton caché, ainsi que masquées aria pour éviter d'avoir le bouton lu par les lecteurs d'écran / identifiés par des dispositifs d'assistance.

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

1er bouton DOM   2 bouton DOM   3ème bouton dans DOM

Essential CSS pour cette solution:

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

Answer 7

Une autre solution, en utilisant jQuery:

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

Cela devrait fonctionner sur les formes suivantes, ce qui rend « Mise à jour » l'action par défaut:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

En plus:

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

Ce piège sur la touche Entrée uniquement lorsqu'un champ d'entrée sur le formulaire a le focus.

Answer 8

Vous ne devriez pas utiliser les boutons du même nom. Il est mauvais sémantique. , Vous devriez plutôt modifier votre back-end pour rechercher des valeurs de nom différent étant défini:

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

Comme je ne sais pas quelle langue que vous utilisez sur le backend, je vais vous donner quelques pseudo-code:

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}

Answer 9

La solution de bobince a l'inconvénient de créer un bouton qui peut être Tab -d sur, mais inutilisable. Cela peut créer une confusion pour les utilisateurs du clavier.

Une autre solution est d'utiliser l'attribut form peu connu:

<form>
    <input name="data" value="Form data here">
    <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
    <input type="submit" name="submit" value="Submit">
</form>

<form id="form2"></form>

Ceci est HTML standard, mais malheureusement pas pris en charge Internet Explorer.