Comment puis-je obtenir le bouton qui a provoqué l'envoi à partir de l'événement de soumission du formulaire ?

Question

J'essaie de trouver la valeur du bouton d'envoi qui a déclenché l'envoi du formulaire.

$("form").submit(function() {

});

Je pourrais éventuellement déclencher un événement $("input[type=submit]").click() pour chaque bouton et définir une variable, mais cela semble moins élégant que de retirer le bouton du formulaire lors de l'envoi.

Answer 1

J'ai exploité document.activeElement comme indiqué dans cette réponse : Comment obtenir l'élément focalisé avec jQuery ?

$form.on('submit', function() {
    var $btn = $(document.activeElement);

    if (
        /* there is an activeElement at all */
        $btn.length &&

        /* it's a child of the form */ 
        $form.has($btn) &&

        /* it's really a submit element */
        $btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&

        /* it has a "name" attribute */
        $btn.is('[name]')
    ) {
        console.log("Seems, that this element was clicked:", $btn);
        /* access $btn.attr("name") and $btn.val() for data */
    }
});

Je tire parti du fait que le bouton est toujours l'élément ciblé après avoir cliqué dessus. Cela permet no travail, si vous faites un blur() juste après le clic.

@Doin a repéré un autre inconvénient. Si un utilisateur soumet le formulaire via enter dans un champ de texte, le document.activeElement n'est pas défini. Vous devez faire attention à cela vous-même, en manipulant la fonction keypress événements en input[type="text"] et similaires.

Mise à jour 2017-01 : Pour ma bibliothèque Hyperform J'ai choisi de ne pas utiliser activeElement mais pour attraper tous les événements, qui mènent à la soumission du formulaire. Le code pour cette est sur Github.

Si vous utilisez Hyperform, voici comment accéder au bouton qui déclenche l'envoi :

$(form).on('submit', function(event) {
  var button = event.submittedVia;
});

Answer 2

J'ai mis en place cette solution et je suppose qu'elle fera l'affaire.

$(document).ready(function() {
    $("form").submit(function() { 

    var val = $("input[type=submit][clicked=true]").val()

    // DO WORK

});

et voici l'événement du bouton de soumission qui le met en place

$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});

Merci pour les réponses, mais ce n'est pas terriblement inélégant...

Answer 3

J'ai créé un formulaire de test et, en utilisant Firebug, j'ai trouvé cette façon d'obtenir la valeur ;

$('form').submit(function(event){
  alert(event.originalEvent.explicitOriginalTarget.value);
}); 

Malheureusement, seul Firefox prend en charge cet événement.

Answer 4

Voici une approche qui semble plus propre pour mes besoins.

D'abord, pour tous les formulaires :

$('form').click(function(event) {
  $(this).data('clicked',$(event.target))
});

Lorsque cet événement de clic est déclenché pour un formulaire, il enregistre simplement la cible d'origine (disponible dans l'objet événement) pour y accéder ultérieurement. Il s'agit d'une approche assez large, puisqu'elle se déclenchera pour n'importe quel clic n'importe où sur le formulaire. Les commentaires d'optimisation sont les bienvenus, mais je pense que cela ne posera jamais de problèmes notables.

Ensuite, dans $('form').submit(), vous pouvez demander ce qui a été cliqué en dernier, avec quelque chose comme

if ($(this).data('clicked').is('[name=no_ajax]')) xhr.abort();

Answer 5

Según ce lien l'objet Event contient un champ Event.target qui :

Renvoie une chaîne représentant l'objet qui a initié l'événement.

Je viens de créer une page pour tester cette valeur, et il semble que cette représentation concerne le formulaire lui-même, et non le bouton cliqué. En d'autres termes, Javascript ne fournit pas la possibilité de déterminer le bouton cliqué.

Pour ce qui est de Dave Anderson solution il serait bon de le tester dans plusieurs navigateurs avant de l'utiliser. Il est possible que cela fonctionne bien, mais je ne peux pas l'affirmer.