Comment puis-je obtenir le bouton à l'origine de l'envoi à partir de l'événement d'envoi de formulaire?

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.

J'ai exploité document.activeElementcomme esquissé dans cette réponse: Comment obtenir l'élément ciblé 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 profite du fait que le bouton est toujours l'élément ciblé après avoir cliqué dessus. Cela ne fonctionnera pas si vous faites un blur()droit après le clic.

@Doin a repéré un autre inconvénient. Si un utilisateur soumet le formulaire via enterdans un champ de texte, le document.activeElementn'est pas défini. Vous auriez besoin de faire attention à cela vous-même, en gérant les keypressévénements dans input[type="text"]et similaires.

Mise à jour 2017-01: Pour ma bibliothèque Hyperform, j'ai choisi de ne pas utiliser activeElementmais de capturer tous les événements qui mènent à la soumission de formulaires. Le code pour cela est sur Github.

Si vous utilisez Hyperform, voici comment accéder au bouton qui a déclenché la soumission:

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

J'ai implémenté cela et je suppose que cela fera l'affaire.

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

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

    // DO WORK

});

et c'est l'événement du bouton d'envoi qui le configure

$("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 ...

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.

Il existe désormais une submitterpropriété standard dans l'événement de soumission.
Déjà implémenté dans Firefox 75 !

document.addEventListener('submit',function(e){
    console.log(e.submitter)
})

Pour les navigateurs ne le prenant pas en charge, utilisez ce polyfill :

!function(){
    var lastBtn = null
    document.addEventListener('click',function(e){
        if (!e.target.closest) return;
        lastBtn = e.target.closest('button, input[type=submit]');
    }, true);
    document.addEventListener('submit',function(e){
        if ('submitter' in e) return;
        var canditates = [document.activeElement, lastBtn];
        for (var i=0; i < canditates.length; i++) {
            var candidate = canditates[i];
            if (!candidate) continue;
            if (!candidate.form) continue;
            if (!candidate.matches('button, input[type=button], input[type=image]')) continue;
            e.submitter = candidate;
            return;
        }
        e.submitter = e.target.querySelector('button, input[type=button], input[type=image]')
    }, true);
}();

Voici une approche qui me semble plus propre.

Tout d'abord, pour toutes les formes:

$('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'un trait assez large, car il se déclenchera pour tout clic n'importe où sur le formulaire. Les commentaires d'optimisation sont les bienvenus, mais je soupçonne que cela ne causera jamais de problèmes notables.

Ensuite, dans $ ('form'). Submit (), vous pouvez demander ce qui a été cliqué pour la dernière fois, avec quelque chose comme

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

Selon ce lien , l'objet Event contient un champ Event.target, qui:

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

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

En ce qui concerne la solution de Dave Anderson , il peut être judicieux de la tester dans plusieurs navigateurs avant de l'utiliser. Il est possible que cela fonctionne bien, mais je ne peux pas dire de toute façon.

Une approche propre consiste à utiliser l'événement click sur chaque bouton de formulaire. Voici un formulaire html avec des boutons d'enregistrement, d'annulation et de suppression:

<form  name="formname" action="/location/form_action" method="POST">
<input name="note_id" value="some value"/>
<input class="savenote" type="submit" value="Save"/>
<input class="cancelnote" type="submit" value="Cancel"/>
<input class="deletenote" type="submit" value="Delete" />
</form> 

Voici le jquery. J'envoie l '«action» appropriée à la même fonction de serveur en fonction du bouton sur lequel on a cliqué («enregistrer» ou «supprimer»). Si vous cliquez sur «Annuler», je recharge simplement la page.

$('.savenote').click(function(){
   var options = {
       data: {'action':'save'}
   };
   $(this).parent().ajaxSubmit(options);
   });


$('.deletenote').click(function(){
   var options = {
       data: {'action':'delete'}
   };
   $(this).parent().ajaxSubmit(options);
   });


$('.cancelnote').click(function(){
   window.location.reload(true);
   return false;
   });

J'ai cherché et trouvé plusieurs façons d'obtenir le bouton d' envoi name+ valueenvoyé au serveur en utilisant jQuery + AJAX. Je ne les aimais pas beaucoup ...

L'un des meilleurs était la solution du chasseur présentée ici!

Mais j'en ai écrit un autre moi-même.

Je veux partager, car c'est bon, et, comme j'avais besoin, cela fonctionne aussi avec les formulaires chargés via ajax (après document.ready):

$(document).on('click', 'form input[type=submit]', function(){
    $('<input type="hidden" />').appendTo($(this).parents('form').first()).attr('name', $(this).attr('name')).attr('value', $(this).attr('value'));
});

Facile! Lorsque le bouton d'envoi est cliqué, un champ masqué est ajouté au formulaire, en utilisant le même nameet valuedu bouton d'envoi.

EDIT: La version ci-dessous est plus facile à lire. De plus, il s'occupe de supprimer les champs cachés précédemment ajoutés (dans le cas de soumettre deux fois le même formulaire, ce qui est parfaitement possible en utilisant AJAX).

Code amélioré:

$(document).on('click', 'form input[type=submit]', function(){
    var name   = $(this).attr('name');
    if (typeof name == 'undefined') return;
    var value  = $(this).attr('value');
    var $form  = $(this).parents('form').first();
    var $input = $('<input type="hidden" class="temp-hidden" />').attr('name', name).attr('value', value);
    $form.find('input.temp-hidden').remove();
    $form.append($input);
});

J'ai essayé certains des exemples fournis, mais ils n'ont pas fonctionné pour nos besoins.

Voici un violon à montrer: http://jsfiddle.net/7a8qhofo/1/

J'ai été confronté à un problème similaire, et c'est ainsi que nous avons résolu le problème dans nos formulaires.

$(document).ready(function(){

    // Set a variable, we will fill later.
    var value = null;

    // On submit click, set the value
    $('input[type="submit"]').click(function(){
        value = $(this).val();
    });

    // On data-type submit click, set the value
    $('input[type="submit"][data-type]').click(function(){
        value = $(this).data('type');
    });

    // Use the set value in the submit function
    $('form').submit(function (event){
        event.preventDefault();
        alert(value);
        // do whatever you need to with the content
    });
});

( un événement )

function submForm(form,event){
             var submitButton;

             if(typeof event.explicitOriginalTarget != 'undefined'){  //
                 submitButton = event.explicitOriginalTarget;
             }else if(typeof document.activeElement.value != 'undefined'){  // IE
                 submitButton = document.activeElement;
             };

             alert(submitButton.name+' = '+submitButton.value)
}


<form action="" method="post" onSubmit="submForm(this, event); return false;">

vous pouvez essayer de cette façon avec "event.originalEvent.x" et "event.originalEvent.y":

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <title>test</title>
</head>
<body>

    <form id="is_a_form">
        <input id="is_a_input_1" type="submit"><br />
        <input id="is_a_input_2" type="submit"><br />
        <input id="is_a_input_3" type="submit"><br />
        <input id="is_a_input_4" type="submit"><br />
        <input id="is_a_input_5" type="submit"><br />
    </form>

</body>
</html>
<script>
$(function(){

    $.fn.extend({
      inPosition: function(x, y) {

        return this.each(function() {

            try{
                var offset = $(this).offset();

                if ( (x >= offset.left) &&
                     (x <= (offset.left+$(this).width())) &&
                     (y >= offset.top) &&
                     (y <= (offset.top+$(this).height())) )
                {
                    $(this).css("background-color", "red");
                }
                else
                {
                        $(this).css("background-color", "#d4d0c8");
                }
                }
                catch(ex)
                {
                }

        });
      }
    }); 

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

        $("input[type='submit']").inPosition(ev.originalEvent.x ,ev.originalEvent.y);
        return false;

    });

});
</script>

jQuery ne semble pas fournir ces données sur l'événement de soumission. Il semble que la méthode que vous avez proposée soit votre meilleur pari.

Juste une autre solution car aucune autre ne répondait à mes exigences. L'avantage est que les clics et les touches (entrée et espace) sont détectés.

// Detects the Events
var $form = $('form');
$form.on('click keypress', 'button[type="submit"]', function (ev) {

    // Get the key (enter, space or mouse) which was pressed.
    if (ev.which === 13 || ev.which === 32 || ev.type === 'click') {

        // Get the clicked button
        var caller = ev.currentTarget;

        // Input Validation
        if (!($form.valid())) {
            return;
        }

        // Do whatever you want, e.g. ajax...
        ev.preventDefault();
        $.ajax({
            // ...
        })
    }
}

Cela a fonctionné le mieux pour moi.

Avec un gestionnaire d'événements plus spécifiques et JQuery, votre objet événement est le bouton sur lequel vous avez cliqué. Vous pouvez également obtenir le formulaire de délégation de cet événement si nécessaire.

$('form').on('click', 'button', function (e) {
  e.preventDefault();
  var
    $button = $(e.target),
    $form = $(e.delegateTarget);
  var buttonValue = $button.val();
});

Ce Doc a tout ce dont vous avez besoin pour commencer. JQuery Doc .

J'écris cette fonction qui m'aide

var PupulateFormData= function (elem) {
    var arr = {};
    $(elem).find("input[name],select[name],button[name]:focus,input[type='submit']:focus").each(function () {
        arr[$(this).attr("name")] = $(this).val();
    });
    return arr;

};

puis utiliser

var data= PupulateFormData($("form"));

Il existe une propriété de soumissionnaire pour SubmitEvent du formulaire . Cependant, à l'heure actuelle, cela ne fonctionne pas sur Safari.

<form id="form">
    <button value="add" type="submit">Add</button>
    <button value="remove" type="submit">Remove</button>
</form>

let form = document.getElementById('form');

form.onsubmit = (event) => {
    e.preventDefault();
    console.log(e.submitter.type);
}

Une approche différente qui fonctionne sur tous les navigateurs. Cependant, vous devez vous fier à l' formélément plutôt qu'à l' eventobjet. Cela ajoute essentiellement une propriété «soumissionnaire» à l'objet d'élément de formulaire qui peut être référencé plus tard lors de l'envoi du formulaire.

<form id="form">
    <button onclick="this.form.submitter = 'add'" type="submit">Add</button>
    <button onclick="this.form.submitter = 'remove'" type="submit">Remove</button>
</form>

let form = document.getElementById('form');

form.onsubmit = (event) => {
    e.preventDefault();
    console.log(form.submitter);
}