Comment le bouton Soumettre par défaut sur un formulaire HTML est-il déterminé?

Andrezj l'a presque cloué... Mais voici une solution de navigation croisée facile.

prendre une forme comme celle-ci:

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/>
</form>

et réfacteur à ceci:

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/>
</form>

étant donné que la spécification du W3C indique que plusieurs boutons de soumission sont valides, mais omet les conseils sur la façon dont l'agent-utilisateur devrait les traiter, les fabricants de navigateur sont laissés à mettre en œuvre comme ils le jugent bon. J'ai trouvé qu'ils vont soumettre la première soumettre bouton dans le formulaire, ou soumettre le prochain bouton Soumettre après le champ formulaire qui a actuellement focus.

malheureusement, il suffit d'ajouter un style d'affichage : aucun; ne fonctionnera pas car la spécification W3C indique qu'un élément caché doit être exclu des interactions avec les utilisateurs. Alors cache-le à la vue de tous!

ci-dessus est un exemple de la solution que j'ai fini par mettre en production. La touche Entrée déclenche la forme par défaut la soumission est un comportement comme prévu, même si d'autres valeurs non par défaut sont présentes et précèdent le bouton Soumettre par défaut dans le DOM. Bonus pour l'interaction souris / clavier avec des entrées explicites de l'utilisateur tout en évitant les gestionnaires javascript.

Remarque: l'utilisation de la tabulation à travers le formulaire ne sera pas afficher le focus pour tout élément visuel encore va encore causer le bouton invisible pour être sélectionné. Pour éviter ce problème, il suffit de définir les attributs tabindex en conséquence et d'omettre un attribut tabindex sur le le bouton Soumettre invisible. Alors qu'il peut sembler déplacé de promouvoir ces styles à !important, ils devrait empêcher tout cadre ou les styles de boutons existants d'interférer avec ce correctif. En outre, ces styles en ligne sont certainement mauvaise forme, mais nous sommes en train de prouver des concepts ici... ne pas écrire de code de production.

HTML 4 ne le rend pas explicite. Le projet de travail HTML5 actuel spécifie que le premier bouton Soumettre doit être le par défaut:

a form le bouton par défaut de l'élément est premier bouton Soumettre dans l'arbre de commande dont "1519120920 formulaire" propriétaire , c'est que form élément.

si l'agent utilisateur supporte la location l'utilisateur soumet un formulaire implicitement (par exemple, sur certaines plates-formes de frapper la touche "entrée" tout un champ de texte est centré implicitement soumet le formulaire), puis le faire pour un formulaire dont bouton par défaut a un défini activation du comportement doit faire en sorte que l'agent de l'utilisateur à exécuter les étapes d'activation de clic synthétique sur ce bouton par défaut .

je pense que ce post aurait de l'aide si quelqu'un veut le faire avec jQuery:

http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery /

la solution de base est:

$(function() {
    $("form input").keypress(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $('input[type=submit].default').click();
        return false;
    } else {
        return true;
    }
    });
});

et un autre que j'ai aimé était:

jQuery(document).ready(function() {
$("form input, form select").live('keypress', function (e) {
if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
return true;

if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents('form').find('button[type=submit].default, input[type=submit].default').click();
return false;
} else {
return true;
}
});
}); 

j'ai eu un formulaire avec 11 boutons soumettre sur elle, et il utiliserait toujours le premier bouton Soumettre lorsque l'Utilisateur a appuyé sur ENTRER. J'ai lu ailleurs qu'il n'est pas une bonne idée (mauvaise pratique) d'avoir plus d'un bouton submit d'un formulaire, et le meilleur moyen pour ce faire est le bouton que vous voulez tant que par défaut, comme le seul bouton de soumission du formulaire. Les autres boutons doivent être transformés en" TYPE=BUTTON " et un événement onClick ajouté qui appelle votre propre routine soumettre en Javascript. Quelque chose comme ceci :-

<SCRIPT Language="JavaScript">
function validform()
{
  // do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

ici, button3 est la valeur par défaut, et bien que vous soumettiez le formulaire avec les autres boutons, la routine mjsubmit Les valide. HTH.

cela peut maintenant être résolu en utilisant flexbox :

HTML

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- our default action is first -->
        <button>Cancel</button>
    </div>
</form>

CSS

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* reverse the elements inside */
}

explication

En utilisant flex box, nous pouvons inverser l'ordre des éléments dans un conteneur qui utilise display: flex en utilisant également la règle CSS: flex-direction: row-reverse . Cela ne nécessite pas de CSS ou caché élément. Pour les navigateurs plus anciens qui ne prennent pas en charge flexbox, ils obtiennent toujours une solution réalisable, mais les éléments ne seront pas inversés.

Démo

http://codepen.io/Godwin/pen/rLVKjm

j'ai lutté avec la même question depuis que j'ai eu le bouton Soumettre au milieu de La dont redirigé soumettre à une autre page, comme ainsi:

<button type="submit" onclick="this.form.action = '#another_page'">More</button>

lorsque l'Utilisateur a appuyé sur la touche enter, ce bouton a été cliqué au lieu d'un autre bouton Soumettre.

donc j'ai fait quelques tests primitifs en créant un from avec plusieurs boutons de soumission et différentes options de visibilité et en activant le bouton onclick event alerting qui a été cliqué: https://jsfiddle.net/aqfy51om/1/

Navigateurs et OS es que j'ai utilisé pour le test:

WINDOWS

• Google Chrome 43 (allez google :D)
• Mozilla Firefox 38
• Internet Explorer 11
• Opéra 30.0

OSX

• Google Chrome 43
• Safari 7.1.6

la plupart de ces navigateurs ont cliqué sur le tout premier bouton malgré les options de visibilité appliquées sauf et Safari qui a cliqué sur le troisième bouton, qui est "visible" à l'intérieur de "caché" conteneur:

<div style="width: 0; height: 0; overflow: hidden;">
    <button type="submit" class="btn btn-default" onclick="alert('Hidden submit button #3 was clicked');">Hidden submit button #3</button>
</div>

donc ma suggestion, que je vais utiliser moi-même, est:

si vous avez plusieurs boutons soumettre avec signification différente, puis inclure le bouton Soumettre avec l'action par défaut au début du formulaire qui est soit:

1. pleinement visible
2. emballé dans un conteneur avec style="width: 0; height: 0; overflow: hidden;"

MODIFIER Une autre option pourrait être de désactiver le bouton (toujours au début de la de) style="position: absolute; left: -9999px; top: -9999px;" , vient de l'essayer dans IE-worked , mais je n'ai aucune idée de ce qu'il peut foirer d'autre, par exemple impression..

de vos commentaires:

une conséquence est que, si vous avez plusieurs formulaires soumis au même script, tu ne peux pas te fier à submit boutons pour les distinguer.

je dépose un <input type="hidden" value="form_name" /> dans chaque forme.

si soumettre avec javascript: ajouter soumettre des événements aux formulaires, ne pas cliquer événements à leurs boutons. Les utilisateurs de Saavy ne touchent pas souvent leur souris.

lorsque vous avez plusieurs boutons soumettre dans un seul formulaire et un utilisateur appuie sur la touche ENTER pour soumettre le formulaire à partir d'un champ de texte, ce code remplace la fonctionnalité par défaut, en appelant l'événement soumettre sur le formulaire à partir de l'événement de presse clé. Voici le code:

$('form input').keypress(function(e){

    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){ $(e.target).closest('form').submit(); return false; }
    else return true;

});

étrange que le premier bouton Enter va toujours au premier bouton indépendamment est visible ou non, p.ex. en utilisant jquery show/hide() . L'ajout de l'attribut .attr('disabled', 'disabled') empêche de recevoir le bouton Enter submit complètement. C'est un problème par exemple lors du réglage de la visibilité du bouton Insérer/Modifier+Supprimer dans les boîtes de dialogue d'enregistrement. J'ai trouvé moins hackish et le placement simple Edit devant Insert

<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="delete">Delete</button>

et utiliser le code javascript:

$("#formId button[type='submit'][name='action'][value!='insert']").hide().attr('disabled', 'disabled');
$("#formId button[type='submit'][name='action'][value='insert']").show().removeAttr('disabled');

ma recette:

<form>
<input type=hidden name=action value=login><!-- the magic! -->

<input type=text name=email>
<input type=text name=password>

<input type=submit name=action value=login>
<input type=submit name=action value="forgot password">
</form>

il enverra le champ caché par défaut si aucun des boutons n'est 'cliqué'.

s'ils sont cliqués, ils ont la préférence et sa valeur est passée.

une autre solution que j'ai utilisée est d'avoir juste un bouton dans la forme, et de simuler les autres boutons.

voici un exemple:

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

ensuite, Je style les éléments de portée pour ressembler à un bouton. Un auditeur JS observe la portée et exécute l'opération désirée une fois cliqué.

pas nécessairement bon pour toutes les situations, mais au moins c'est assez facile à faire.

De la spécification HTML 4 :

Si un formulaire contient plus d'un bouton soumettre, seul le activée le bouton Soumettre est un succès.

cela signifie qu'avec plus d'un bouton Soumettre et aucun activé (cliqué), aucun ne devrait être réussi.

et je dirais que c'est logique: Imaginez un formulaire énorme avec plusieurs boutons de soumission. En haut, il y a un "delete this le bouton"Enregistrer", puis beaucoup d'entrées suivent et en bas il y a un bouton"Mettre à jour cet enregistrement". Un utilisateur qui frappe enter alors qu'il se trouve dans un champ au bas du formulaire ne soupçonnerait jamais qu'il frappe implicitement le "supprimer cet enregistrement" à partir du haut.

donc je pense que ce n'est pas une bonne idée d'utiliser le premier ou tout autre bouton que l'utilisateur ne définit pas (cliquez) un. Néanmoins, les navigateurs le font bien sûr.

EDIT: Désolé, lors de la rédaction de cette réponse, je pensais à soumettre les boutons dans le sens général. La réponse ci-dessous ne concerne pas plusieurs boutons type="submit" , car il ne laisse qu'un seul type="submit" et changer l'autre à type="button" . Je laisse la réponse ici comme référence au cas où aide quelqu'un qui peut changer le type dans leur forme:

pour déterminer quel bouton est pressé en appuyant sur enter, vous pouvez le marquer avec type="submit" , et les autres boutons les marquent avec type="button" . Par exemple:

<input type="button" value="Cancel" />
<input type="submit" value="Submit" />