jQuery: comment obtenir quel bouton a été cliqué lors de la soumission du formulaire?

227

J'ai un .submit()événement mis en place pour la soumission du formulaire. J'ai également plusieurs formulaires sur la page, mais un seul ici pour cet exemple. Je voudrais savoir sur quel bouton d'envoi a été cliqué sans appliquer un .click()événement à chacun.

Voici la configuration:

<html>
<head>
  <title>jQuery research: forms</title>
  <script type='text/javascript' src='../jquery-1.5.2.min.js'></script>
  <script type='text/javascript' language='javascript'>
      $(document).ready(function(){
          $('form[name="testform"]').submit( function(event){ process_form_submission(event); } );
      });
      function process_form_submission( event ) {
          event.preventDefault();
          //var target = $(event.target);
          var me = event.currentTarget;
          var data = me.data.value;
          var which_button = '?';       // <-- this is what I want to know
          alert( 'data: ' + data + ', button: ' + which_button );
      }
  </script>
</head>
<body>
<h2>Here's my form:</h2>
<form action='nothing' method='post' name='testform'>
  <input type='hidden' name='data' value='blahdatayadda' />
  <input type='submit' name='name1' value='value1' />
  <input type='submit' name='name2' value='value2' />
</form>
</body>
</html>

Exemple en direct sur jsfiddle

Outre l'application d'un événement .click () sur chaque bouton, existe-t-il un moyen de déterminer le bouton d'envoi sur lequel vous avez cliqué?

jquery forms hawkexp
la source

2

L'ironie étant bien sûr que ces informations sont triviales à déterminer côté serveur.

Neil

5

@Neil Pas si vous soumettez le formulaire via $ .ajax () et un serializeArray () sur le formulaire.

Aaron

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

Bergi

1

Que diriez-vous de mettre un écouteur sur les boutons d'envoi et de soumettre le formulaire manuellement.

JMRC

1

Que diriez-vous de regarder la version sérialisée des données du formulaire et de faire correspondre les boutons name?

Augustin Riedinger

235

J'ai posé cette même question: comment puis-je obtenir le bouton à l'origine de la soumission à partir de l'événement de soumission du formulaire?

J'ai fini par trouver cette solution et cela a plutôt bien fonctionné:

$(document).ready(function() {
    $("form").submit(function() { 
        var val = $("input[type=submit][clicked=true]").val();
        // DO WORK
    });
    $("form input[type=submit]").click(function() {
        $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });
});

Dans votre cas avec plusieurs formulaires, vous devrez peut-être modifier un peu cela, mais cela devrait toujours s'appliquer

chasseur
la source

11

+1 Belle solution. Vous souhaiterez peut-être ajouter une instruction qui réinitialise l'attribut cliqué à false sur les boutons au cas où la soumission du formulaire est gérée de manière ajax et si vous souhaitez éviter d'être à nouveau cliqué sur le bouton précédent.

Chandu

1

Oh je vois. Vous ajoutez votre propre attribut "cliqué". Je cherchais partout un booléen "cliqué" et je n'en trouvais aucun nulle part. Je n'ai jamais pensé à en faire un moi-même. Bonne idée!

hawkexp

9

Sachez que cela ne fonctionne qu'avec des éléments d'entrée, pas des éléments de bouton.

Bob.at.Indigo.Health

1

Cela n'est pas nécessaire dans Chrome avec des éléments de bouton. Je gère simplement l'événement on submit, je construis un objet FormData à partir du formulaire et il inclut toujours la valeur du bouton sur lequel vous avez cliqué. FireFox ne présente PAS ce comportement et n'envoie pas du tout la valeur du bouton. Chrome semble faire quelque chose comme la solution ci-dessus automatiquement, en se souvenant du bouton sur lequel vous avez cliqué et en l'incluant automatiquement dans les données du formulaire. Bien sûr, ce manque de comportement standard (infestant tout de toute façon en JavaScript, donc je ne suis pas surpris), rend la fonctionnalité inutile.

Triynko

1

Envisagez également d'ajouter le sélecteur "button [type = submit]" (séparé par une virgule) car les éléments de soumission ne doivent pas nécessairement être des balises d'entrée.

Kyselejsyreček

91

J'ai trouvé que cela fonctionnait.

$(document).ready(function() {
    $( "form" ).submit(function () {
        // Get the submit button element
        var btn = $(this).find("input[type=submit]:focus" );
    });
}

Stan
la source

12

cette solution fonctionne bien sur Chrome, mais ne peut pas fonctionner sur Safari, elle retournera indéfinie, pas l'objet bouton

M. Sun Lin

1

@Krinkle Je l'ai codé comme ça pour montrer la manière la plus générique possible. Je pense que les développeurs sont assez intelligents pour l'optimiser à leur goût.

Stan

Plus propre que les autres solutions. Cependant, je n'ai toujours pas trouvé de solution qui fonctionne en appuyant sur Entrée

andrewtweber

Cette réponse ne fonctionnera pas toujours. En fait, vous avez besoin du bouton cliqué, pas de la mise au point (car l'action de mise au point n'est pas une action de clic). La réponse choisie (de chasseur) est la bonne.

Vasil Popov

J'ai un événement de clic sur les boutons de soumission et soumets des événements sur leurs formulaires ... ce dernier déclenche le premier. J'ai utilisé cela pour déterminer la source de l'événement. Dans certains navigateurs en cliquant sur le bouton, vous obtiendrez le bouton aussi concentré, dans d'autres, vous n'obtiendrez rien. Dans tous les navigateurs que j'ai testés, le fait d'appuyer sur Entrée alors que sur une entrée permet de maintenir l'entrée focalisée.

notacouch

65

Cela fonctionne pour moi:

$("form").submit(function() {
   // Print the value of the button that was clicked
   console.log($(document.activeElement).val());
}

seddonym
la source

3

Cela a été utile, pour obtenir le idla activeElement, je l' ai fait$(document.activeElement).attr('id');

Mikolaj

9

Pour ce que ça vaut, vous n'avez pas besoin d'utiliser jQuery pour obtenir l'identifiant - c'est encore plus simple d'utiliser du Javascript pur:document.activeElement.id

Nick F

5

Notez que cela ne semble pas fonctionner comme prévu sur Safari. :(

rinogo

@rinogo: que se passe-t-il dans Safari?

Crescent Fresh

1

Dans Safari document.activeElementn'est pas l'entrée. Dans mon cas, c'est un div modal (qui contient le formulaire).

mgalgs

46

Lorsque le formulaire est soumis:

document.activeElement vous donnera le bouton d'envoi sur lequel vous avez cliqué.
document.activeElement.getAttribute('value') vous donnera la valeur de ce bouton.

Nick F
la source

2

Notez que cela ne semble pas fonctionner comme prévu sur Safari. :(

rinogo

Je ne sais pas comment Safari mais sur Chrome a bien fonctionné :) Merci!

Ingus

Fonctionne dans Chrome 63 et IE11

Sir Crispalot

J'ai eu une validation discrète jquery en cours d'exécution, qui intercepte avant cela et définit l'entrée non valide comme activeElement au lieu du bouton.

Peheje

28

Voici l'approche qui semble plus propre à mes fins.

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 d'événement) pour être accessible ultérieurement. C'est un trait assez large, car il se déclenchera pour tout clic n'importe où sur le formulaire. Les commentaires sur l'optimisation sont les bienvenus, mais je pense que cela ne causera 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();

Jonathan Camenisch
la source

Que faire s'il s'agit d'un événement de soumission de formulaire au lieu de cliquer?

Tony

1

@Tony, désolé de ne pas avoir vu votre question plus tôt. Cette réponse concerne entièrement la soumission de formulaires. Les boutons de soumission sont également cliqués et déclenchent ainsi l'événement de clic.

Jonathan Camenisch

2

Vote en amont de cette réponse par rapport à la réponse du chasseur puisque les événements de soumission du formulaire sont déclenchés avant tout événement de clic d'élément enfant. Cela provoque des difficultés lorsque l'événement d'envoi de votre formulaire est annulé avec return false, alors que cette méthode fonctionne correctement car le clic est lié au formulaire au lieu de ses enfants.

pospi

7

Cela ne parvient pas à gérer correctement le cas où le formulaire est soumis par un moyen autre qu'un clic (par exemple, en appuyant sur Entrée). Lorsque le formulaire est soumis par d'autres moyens, c'est le premier bouton d'envoi qui a déclenché l'événement d'envoi, pas le dernier cliqué.

quietmint

Il manque un point-virgule après ... $(event.target))mais ne peut pas le modifier car les modifications doivent être> 6 caractères

Hafenkranich

13

Wow, certaines solutions peuvent se compliquer! Si cela ne vous dérange pas d'utiliser un simple global, profitez simplement du fait que l'événement de clic du bouton d'entrée se déclenche en premier. On pourrait filtrer davantage le sélecteur $ ('input') pour l'une des nombreuses formes en utilisant $ ('# myForm input').

    $(document).ready(function(){
      var clkBtn = "";
      $('input[type="submit"]').click(function(evt) {
        clkBtn = evt.target.id;
      });

      $("#myForm").submit(function(evt) {
        var btnID = clkBtn;
        alert("form submitted; button id=" + btnID);
      });
    });

Lawnbowler
la source

12

J'ai trouvé que la meilleure solution est

$(document.activeElement).attr('id')

Cela ne fonctionne pas seulement sur les entrées, mais il fonctionne également sur les balises de bouton. Il obtient également l'identifiant du bouton.

Thomas Williams
la source

Merde, je dois voir si ma page fonctionne sur Safari maintenant doh. Pourquoi Safari doit-il toujours être si difficile? Merci pour ça. Je vais vérifier quand je rentre à la maison

Thomas Williams

developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/…

Oliver Hader

Cela ne fonctionne pas pour moi dans Safari. Cliquez sur écouteur sur un bouton dans le corps appelle .submit sur un formulaire. Dans le $(document.activeElement).attr('id')retour du gestionnaire de soumissionundefined

dyodji

7

Une autre solution possible consiste à ajouter un champ masqué dans votre formulaire:

<input type="hidden" id="btaction"/>

Ensuite, dans la fonction prête, ajoutez des fonctions pour enregistrer la touche sur laquelle vous avez appuyé:

$('form#myForm #btnSubmit').click(function() {
    $('form#myForm #btaction').val(0);
});

$('form#myForm #btnSubmitAndSend').click(function() {
    $('form#myForm #btaction').val(1);
});

$('form#myForm #btnDelete').click(function() {
    $('form#myForm #btaction').val(2);
});

Maintenant, dans le gestionnaire de soumission de formulaire, lisez la variable masquée et décidez en fonction d'elle:

var act = $('form#myForm #btaction').val();

wmac
la source

6

S'appuyant sur ce que Stan et yann-h ont fait, mais celui-ci est réglé par défaut sur le premier bouton. La beauté de cette approche globale est qu'elle capte à la fois le clic et la touche Entrée (même si le focus n'était pas sur le bouton. Si vous devez autoriser la saisie dans le formulaire, répondez-y simplement lorsqu'un bouton est focalisé ( c'est-à-dire la réponse de Stan). Dans mon cas, je voulais autoriser enter à soumettre le formulaire même si l'utilisateur se concentrait actuellement sur la zone de texte.

J'utilisais également un attribut «nom» plutôt que «id» mais c'est la même approche.

var pressedButtonName =
     typeof $(":input[type=submit]:focus")[0] === "undefined" ?
     $(":input[type=submit]:first")[0].name :
     $(":input[type=submit]:focus")[0].name;

andrewmo
la source

Donc, si vous déplacez le focus sur le deuxième bouton avec TAB et appuyez sur RETOUR, ce sera le premier bouton par défaut ...

FrancescoMM

5

Celui-ci a fonctionné pour moi

$('#Form').submit(function(){
var btn= $(this).find("input[type=submit]:focus").val();
alert('you have clicked '+ btn);

}

Saheb Mondal
la source

Cela mérite une médaille!

Martin Zvarík

4

Si ce que vous entendez par l'ajout d'un événement .click est que vous ne voulez pas avoir de gestionnaires distincts pour ces événements, vous pouvez gérer tous les clics (soumissions) dans une seule fonction:

$(document).ready(function(){
  $('input[type="submit"]').click( function(event){ process_form_submission(event); } );
});

function process_form_submission( event ) {
  event.preventDefault();
  //var target = $(event.target);
  var input = $(event.currentTarget);
  var which_button = event.currentTarget.value;
  var data = input.parents("form")[0].data.value;
//  var which_button = '?';       // <-- this is what I want to know
  alert( 'data: ' + data + ', button: ' + which_button );
}

jcane86
la source

pas une mauvaise idée. Est-ce que cela fonctionnerait pour un certain nombre de formulaires sur la page?

hawkexp

@hawk yep, ça devrait. Je ne sais pas si c'est le comportement souhaité, mais votre code ne soumet pas réellement le formulaire, donc le mien non plus. Si vous souhaitez le soumettre, supprimez simplement le event.preventDefaultou faites quelque chose comme input.parents("form")[0].submit().

jcane86

Et si vous soumettez sans un clic (touche retour?) Ce sera un gâchis total ..

FrancescoMM

4

Comme je ne peux pas commenter la réponse acceptée, j'apporte ici une version modifiée qui devrait prendre en compte les éléments qui sont en dehors du formulaire (ie: attaché au formulaire en utilisant l' formattribut). C'est pour un navigateur moderne: http://caniuse.com/#feat=form-attribute . Le closest('form') est utilisé comme solution de repli pour un formattribut non pris en charge

$(document).on('click', '[type=submit]', function() {
    var form = $(this).prop('form') || $(this).closest('form')[0];
    $(form.elements).filter('[type=submit]').removeAttr('clicked')
    $(this).attr('clicked', true);
});

$('form').on('submit', function() {
    var submitter = $(this.elements).filter('[clicked]');
})

user3074069
la source

Cela devrait vraiment être la réponse choisie. J'ajouterais seulement que la règle devrait être"button,[type=submit]"

Wil

@Wil mais pas tous les boutons sont des boutons d'envoi, cela dépend de leur type.

ptyskju

Oui, mais en l'absence d'un <input type = "submit">], chaque UA que j'ai jamais utilisé a traité une balise <button> comme déclencheur de soumission de formulaire, donc cela interceptera ce cas. Ou l'auteur peut ajouter une mise en garde que tous les éléments capables de soumettre doivent avoir des propriétés [type = soumettre] ... l'un de l'autre.

Wil

3

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

ajouter un champ caché

anydasa
la source

Ne fonctionne pas dans Firefox 30 / Windows 7. Remarque: un champ masqué est désormais requis dans firefox, car il peut ne pas envoyer la valeur de soumission cliquée s'il est envoyé avec jquery's: this.submit () dans un événement on-submit. Je suis juste un peu inquiet que $ (this) .attr ('name') ne fonctionne pas sur tous les navigateurs.

user1610743

J'ai Firefox 30 / Windows 7. J'ai tout fonctionne parfaitement.

anydasa

N'oubliez pas d'inclure button[type=submit]et input[type=image].

rybo111

3

Pour moi, la meilleure solution était la suivante:

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

   // Get the button that was clicked       
   var submit = $(this.id).context.activeElement;

   // You can get its name like this
   alert(submit.name)

   // You can get its attributes like this too
   alert($(submit).attr('class'))

});

Jeramiah Harland
la source

3

En travaillant avec cette excellente réponse , vous pouvez vérifier l'élément actif (le bouton), ajouter une entrée masquée au formulaire et éventuellement la supprimer à la fin du gestionnaire de soumission.

$('form.form-js').submit(function(event){
    var frm = $(this);
    var btn = $(document.activeElement);
    if(
        btn.length &&
        frm.has(btn) &&
        btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&
        btn.is('[name]')
    ){
        frm.append('<input type="hidden" id="form-js-temp" name="' + btn.attr('name') + '" value="' + btn.val() + '">');
    }

    // Handle the form submit here

    $('#form-js-temp').remove();
});

Note latérale: J'ajoute personnellement la classe form-jssur tous les formulaires qui sont soumis via JavaScript.

rybo111
la source

2

Similaire à la réponse de Stan mais:

si vous avez plusieurs boutons, vous ne devez obtenir que le premier bouton => [0]
si le formulaire peut être soumis avec la touche entrée, vous devez gérer un défaut => myDefaultButtonId

$(document).on('submit', function(event) {
    event.preventDefault();
    var pressedButtonId = 
         typeof $(":input[type=submit]:focus")[0] === "undefined" ? 
         "myDefaultButtonId" :
         $(":input[type=submit]:focus")[0].id;
    ...
 }

yann-h
la source

2

C'est la solution que j'ai utilisée et qui fonctionne très bien:

// prevent enter key on some elements to prevent to submit the form
function stopRKey(evt) {
  evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  var alloved_enter_on_type = ['textarea'];
  if ((evt.keyCode == 13) && ((node.id == "") || ($.inArray(node.type, alloved_enter_on_type) < 0))) {
    return false;
  }
}

$(document).ready(function() {
  document.onkeypress = stopRKey;
  // catch the id of submit button and store-it to the form
  $("form").each(function() {
    var that = $(this);

    // define context and reference
    /* for each of the submit-inputs - in each of the forms on
			 the page - assign click and keypress event */
    $("input:submit,button", that).bind("click keypress", function(e) {
      // store the id of the submit-input on it's enclosing form
      that.data("callerid", this.id);
    });
  });

  $("#form1").submit(function(e) {
    var origin_id = $(e.target).data("callerid");
    alert(origin_id);
    e.preventDefault();

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1" name="form1" action="" method="post">
  <input type="text" name="text1" />
  <input type="submit" id="button1" value="Submit1" name="button1" />
  <button type="submit" id="button2" name="button2">
    Submit2
  </button>
  <input type="submit" id="button3" value="Submit3" name="button3" />
</form>

Développer l'extrait

vasilenicusor
la source

1

Ça m'a aidé https://stackoverflow.com/a/17805011/1029257

Formulaire envoyé uniquement après avoir cliqué sur le bouton Soumettre.

var theBtn = $(':focus');
if(theBtn.is(':submit'))
{
  // ....
  return true;
}

return false;

w4kskl
la source

1

Voici ma solution:

   $('#form').submit(function(e){   
        console.log($('#'+e.originalEvent.submitter.id));
        e.preventDefault();
    });

Roldan
la source

0

J'ai aussi fait une solution, et ça marche plutôt bien:
il utilise jQuery et CSS

Tout d'abord, j'ai créé une classe CSS rapide, qui peut être intégrée ou dans un fichier séparé.

<style type='text/css'>
    .Clicked {
        /*No Attributes*/
    }
</style>

Ensuite, sur l'événement de clic d'un bouton dans le formulaire, ajoutez la classe CSS au bouton. Si le bouton a déjà la classe CSS, supprimez-le. (Nous ne voulons pas de deux classes CSS [juste au cas où]).

    // Adds a CSS Class to the Button That Has Been Clicked.
    $("form :input[type='submit']").click(function () 
    {
        if ($(this).hasClass("Clicked"))
        {
            $(this).removeClass("Clicked");
        }
        $(this).addClass("Clicked");
    });

Maintenant, testez le bouton pour voir qu'il a la classe CSS, si le bouton testé n'a pas le CSS, alors l'autre bouton le fera.

    // On Form Submit
    $("form").submit(function ()
    {
        // Test Which Button Has the Class
        if ($("input[name='name1']").hasClass("Clicked"))
        {
            // Button 'name1' has been clicked.
        }
        else
        {
           // Button 'name2' has been clicked.
        }
    });

J'espère que cela t'aides! À votre santé!

Jason Cidras
la source

N'oubliez pas d'inclure button[type=submit]et input[type=image].

rybo111

Vous devez supprimer les références au style et au CSS - elles ne sont pas pertinentes ici. En outre, les lignes où vous utilisez hasClass()et removeClass()sont redondantes, car addClass()n'ajoutera pas deux fois la même classe.

rybo111

0

Vous pouvez créer un type d'entrée = "caché" comme support pour les informations d'identification d'un bouton.

<input type="hidden" name="button" id="button">
<input type="submit" onClick="document.form_name.button.value = 1;" value="Do something" name="do_something">

Dans ce cas, le formulaire transmet la valeur "1" (id de votre bouton) lors de la soumission. Cela fonctionne si onClick se produit avant de soumettre (?), Ce que je ne sais pas si c'est toujours vrai.

darekk
la source

0

Un moyen simple de distinguer le <bouton> ou le <input type = "button" ...> sur lequel on appuie est de vérifier leur 'id':

$("button").click(function() {
  var id = $(this).attr('id');
  ... 
});

Apostolos
la source

0

Voici un exemple, qui utilise this.form pour obtenir le bon formulaire dans lequel la soumission est, et des champs de données pour stocker le dernier élément cliqué / ciblé. J'ai également enveloppé le code de soumission dans un délai d'expiration pour être sûr que les événements de clic se produisent avant son exécution (certains utilisateurs ont signalé dans les commentaires que sur Chrome, un événement de clic est parfois déclenché après une soumission).

Fonctionne lors de la navigation à la fois avec les touches et avec la souris / les doigts sans compter sur les navigateurs pour envoyer un événement de clic sur la touche RETOUR (cela ne fait pas de mal cependant), j'ai ajouté un gestionnaire d'événements pour les événements de focus pour les boutons et les champs.

Vous pouvez ajouter des boutons de type = "soumettre" aux éléments qui se sauvegardent lorsque vous cliquez dessus.

Dans la démo, j'ai défini une bordure rouge pour afficher l'élément sélectionné et une alerte qui affiche le nom et la valeur / étiquette.

Voici la FIDDLE

Et voici le (même) code:

Javascript:

$("form").submit(function(e) {
  e.preventDefault();
  // Use this for rare/buggy cases when click event is sent after submit
  setTimeout(function() {

    var $this=$(this);
    var lastFocus = $this.data("lastFocus");
    var $defaultSubmit=null;

    if(lastFocus) $defaultSubmit=$(lastFocus);

    if(!$defaultSubmit || !$defaultSubmit.is("input[type=submit]")) {
      // If for some reason we don't have a submit, find one (the first)
      $defaultSubmit=$(this).find("input[type=submit]").first();
    }

    if($defaultSubmit) {
      var submitName=$defaultSubmit.attr("name");
      var submitLabel=$defaultSubmit.val();

       // Just a demo, set hilite and alert
      doSomethingWith($defaultSubmit);
      setTimeout(function() {alert("Submitted "+submitName+": '"+submitLabel+"'")},1000);
    } else {
      // There were no submit in the form
    }

  }.bind(this),0);

});

$("form input").focus(function() {
  $(this.form).data("lastFocus", this);
});
$("form input").click(function() {
  $(this.form).data("lastFocus", this);
});

// Just a demo, setting hilite
function doSomethingWith($aSelectedEl) {
  $aSelectedEl.css({"border":"4px solid red"});
  setTimeout(function() { $aSelectedEl.removeAttr("style"); },1000);
}

HTML DUMMY:

<form>
<input type="text" name="testtextortexttest" value="Whatever you write, sir."/>
<input type="text" name="moretesttextormoretexttest" value="Whatever you write, again, sir."/>

<input type="submit" name="test1" value="Action 1"/>
<input type="submit" name="test2" value="Action 2"/>
<input type="submit" name="test3" value="Action 3"/>
<input type="submit" name="test4" value="Action 4"/>
<input type="submit" name="test5" value="Action 5"/>
</form>

DUMB CSS:

input {display:block}

FrancescoMM
la source

0

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"));

BabiBN
la source

0

$('form').submit(function (ev) {
  let clickedButton = ev.originalEvent.explicitOriginalTarget;
});

Alexandre Paulo
la source

-1

Vous souhaitez utiliser window.event.srcElement.id comme ceci:

function clickTheButton() {

var Sender = window.event.srcElement;
alert("the item clicked was " + Sender.id)

}

pour un bouton qui ressemble à:

<input type="button" id="myButton" onclick="clickTheButton();" value="Click Me"/>

vous obtiendrez une alerte qui se lit comme suit: "l'élément cliqué était myButton.

Dans votre exemple amélioré, vous pouvez ajouter window.event.srcElement à process_form_submission et vous aurez une référence à l'élément appelé par le processus.

Cos Callis
la source

1

n'utilisez pas onclick pour les éléments, il est obsolète

Krzysztof Cygan

1

Cela ne semble pas fonctionner pour les boutons d'envoi, window.event.srcElement renvoie l'ID du formulaire.

333Mhz

@KrzysztofCygan Avez-vous une source de cela?

vard

jQuery: comment obtenir quel bouton a été cliqué lors de la soumission du formulaire?

Réponses: