Plusieurs boutons de soumission - Spécification du bouton par défaut

Question

J'ai un formulaire qui dispose de 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, qui est un mélange de submit, reset et javascript boutons. L'ordre des boutons est sujet à changement, mais en tout cas, le bouton enregistrer demeure entre les boutons précédent et suivant. Le problème ici est que lorsqu'un utilisateur appuie sur "entrée" pour envoyer le formulaire, la variable post "COMMANDE" contient "Prev"; normal, car c'est le premier bouton de soumission du formulaire. J'ai cependant souhaitez que le bouton "Suivant" pour être déclenché lorsque l'utilisateur soumet le formulaire via le bouton enter. Un peu comme paramètre par défaut le bouton soumettre, même si il y a d'autres boutons devant elle.

Answer 1

Le premier bouton est toujours la valeur par défaut; il ne peut pas être changé. Alors que vous pouvez essayer de la réparer avec le JavaScript, le formulaire va se comporter de façon inattendue dans un navigateur sans script, et il y a de la convivialité et accessibilité cas de coin à penser. Par exemple, le code lié par Zoran accidentellement soumettre le formulaire sur Entrée appuyez en <input type="button">, ce qui ne serait normalement pas se produire, et ne prends pas d'IE comportement de la soumission du formulaire pour Saisir appuyer sur d'autres non contenu du champ dans le formulaire. Donc, si vous cliquez sur le texte dans un <p> dans le formulaire avec ce script et appuyez sur Entrée, le mauvais bouton sera soumis... particulièrement dangereux, comme indiqué dans cet exemple, le réel, le bouton par défaut est "Supprimer"!

Mon conseil serait d'oublier à l'aide de scripts hacks pour réaffecter defaultness. Aller avec le courant du navigateur et vient de mettre le bouton par défaut de la première. Si vous ne pouvez pas pirater la mise en page pour vous donner l'ordre de l'écran que vous voulez, alors vous pouvez le faire en ayant un mannequin invisible bouton de la première à la source, avec le même nom/valeur que le bouton que vous voulez être en défaut:

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

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

(remarque: la position est utilisée pour pousser le bouton hors de l'écran, car display: none et visibility: hidden ont un navigateur variable d'effets secondaires si le bouton est pris comme valeur par défaut et qu'il est soumis.)

Answer 2

Ma suggestion est de ne pas combattre 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 le bouton "Suivant" sera la valeur déclenchée en appuyant sur entrer.

Ce type de technique couvrira de nombreuses circonstances sans avoir à recourir à des méthodes Javascript plus sophistiquées.

Answer 3

Quick'n'dirty, vous pouvez créer une copie cachée du bouton d'envoi, qui devrait être utilisé lorsque vous appuyez sur Entrée.

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 tape maintenant dans votre formulaire, le bouton suivant (caché) sera utilisé comme émetteur.

Testé sur IE9, Firefox, Chrome et Opera

Answer 4

Si vous utilisez jQuery, cette solution issue d'un commentaire fait ici est assez astucieuse:

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

Ajoutez simplement class="default" au bouton que vous voulez utiliser par défaut. Il place une copie cachée de ce bouton au tout début du formulaire.