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

j'ai un événement .submit() organisé pour la soumission du formulaire. J'ai aussi plusieurs formulaires sur la page, mais seulement une ici pour cet exemple. J'aimerais savoir quel bouton Soumettre a été cliqué sans appliquer un événement .click() à 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>

Live exemple sur jsfiddle

outre l'application A.événement click() sur chaque bouton, il est un moyen pour déterminer quel bouton Soumettre a été cliqué?

186
demandé sur VKatz 2011-04-19 23:39:45

23 réponses

j'ai posé la même question: Comment puis-je obtenir le bouton qui a causé le soumettre à partir du formulaire soumettre l'événement?

j'ai fini par trouver cette solution et ça a plutôt bien marché:

$(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 pouvez avoir besoin de modifier un peu cette, mais il devrait encore s'appliquer

201
répondu hunter 2017-05-23 12:02:56

j'ai trouvé que ça marchait.

$(document).ready(function() {
    $( "form" ).submit(function () {
        // Get the submit button element
        var btn = $(this).find("input[type=submit]:focus" );
    });
}
76
répondu Stan 2014-07-24 11:14:02

ça marche pour moi:

$("form").submit(function() {
   // Print the value of the button that was clicked
   console.log($(document.activeElement).val());
}
55
répondu seddonym 2015-02-24 13:05:31

lorsque le formulaire est présenté:

  • document.activeElement vous donnera le bouton Soumettre qui a été cliqué.

  • document.activeElement.getAttribute('value') vous donnera la valeur de ce bouton.

33
répondu Nick F 2015-10-21 16:07:54

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

en premier lieu, 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 event) à être consultée plus tard. Il s'agit d'un coup assez large, car il va tirer pour tout clic n'importe où sur le formulaire. Les commentaires sur l'optimisation sont les bienvenus, mais je soupçonne qu'elle ne causera jamais de problèmes notables.

puis, en $('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();
27
répondu Jonathan Camenisch 2011-07-29 19:15:04

Wow, certaines solutions peuvent devenir compliquées! Si cela ne vous dérange pas d'utiliser un simple global, profitez simplement du fait que le bouton d'entrée cliquer événement se déclenche en premier. On pourrait filtrer davantage le sélecteur $('input') pour l'un des nombreux formulaires 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);
      });
    });
10
répondu lawnbowler 2014-02-22 20:20:22

une autre solution possible est d'ajouter un champ caché dans votre forme:

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

puis dans la fonction ready ajouter des fonctions pour enregistrer ce que la touche a été pressé:

$('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 sous la forme submition handler lire la variable cachée et décider sur la base de celui-ci:

var act = $('form#myForm #btaction').val();
6
répondu wmac 2013-06-30 10:54:39

construit sur ce que Stan et yann-h ont fait mais celui-ci par défaut au premier bouton. La beauté de cette approche globale est qu'elle reprend à la fois le clic et la touche Entrée (même si le focus n'était pas sur le bouton. Si vous avez besoin d'autoriser enter dans le formulaire, puis juste répondre à cela quand un bouton est focalisé (c.-à-d. la réponse de Stan). Dans mon cas, je voulais permettre à enter de soumettre le formulaire même si l'utilisateur se concentrait actuellement sur la zone de texte.

j'utilisais aussi un l'attribut 'name' 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;
6
répondu andrewmo 2014-05-04 21:54:49

j'ai trouvé la meilleure solution est

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

cela fonctionne non seulement sur les entrées, mais il fonctionne également sur les étiquettes de boutons. Aussi il obtient l'id du bouton.

6
répondu Thomas Williams 2017-01-19 09:04:54

si ce que vous voulez dire par ne pas ajouter un .click event est que vous ne voulez pas avoir de gestionnaires séparés pour ces événements, vous pouvez gérer tous les clics (soumet) dans une 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 );
}
4
répondu jcane86 2011-04-19 19:54:45

celui-ci a travaillé pour moi

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

}
4
répondu Saheb Mondal 2014-09-03 14:56:23
$("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é

3
répondu anydasa 2014-02-15 15:16:28

pour moi, les meilleures solutions étaient celles-ci:

$(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'))

});
3
répondu Jeramiah Harland 2014-11-20 20:49:46

travailler avec cette excellente réponse , vous pouvez vérifier l'élément actif (le bouton), Ajouter une entrée cachée dans le formulaire, et éventuellement le supprimer à la fin du gestionnaire soumettre.

$('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 de Côté: personnellement, j'ai ajouter la classe form-js sur tous les formulaires soumis par l'intermédiaire du JavaScript.

3
répondu rybo111 2017-05-23 12:18:22

semblable à Stan réponse mais:

  • si vous avez plus d'un bouton, vous avez pour obtenir uniquement les premier bouton = > [0]
  • si le formulaire peut être soumis avec la touche enter, 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;
    ...
 }
2
répondu yann-h 2014-03-04 14:26:09

C'est la solution utilisée par moi et travailler 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>
2
répondu vasilenicusor 2015-01-07 15:25:11

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 (c'est-à-dire attachés au formulaire en utilisant l'attribut form ). C'est pour navigateur moderne: http://caniuse.com/#feat=form-attribute . Le closest('form') est utilisé comme repli pour l'attribut form non supporté 151970920"

$(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]');
})
2
répondu user3074069 2015-09-02 17:21:48

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

Le formulaire

a été soumis seulement après que le bouton Soumettre a été cliqué.

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

return false;
1
répondu w4kskl 2017-05-23 11:55:10

j'ai aussi fait une solution, et cela fonctionne assez bien:

Il utilise jQuery et CSS



Tout d'abord, j'ai fait une classe CSS rapide, cela peut être intégré 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, ajouter la classe CSS au bouton. Si le bouton a déjà la classe CSS, supprimez-la. (Nous ne voulons pas de deux classes CSS [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 l'testé bouton n'a pas le CSS, puis l'autre bouton.

    // 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.
        }
    });

Espérons que cette aide! Acclamations!

0
répondu Jason Cidras 2014-10-08 14:47:39

vous pouvez créer le type d'entrée=" caché " comme support pour une information d'identification de 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 passe la valeur" 1 " (id de votre bouton) sur submit. Cela fonctionne si onClick se produit avant de soumettre (?), ce que je ne suis pas sûr si c'est toujours vrai.

0
répondu darekk 2017-03-19 00:09:25

un moyen simple de distinguer quel bouton est pressé, est en cochant leur 'id':

$("button").click(function() {
  var id = $(this).attr('id');
  ... 
});
0
répondu Apostolos 2017-08-16 22:01:16

voici un échantillon, qui utilise ceci.formulaire pour obtenir le formulaire de soumission est en, et les champs de données pour stocker la dernière cliqué/concentré élément. J'ai aussi enveloppé le code submit dans un timeout pour être sûr que les évènements de clic se produisent avant qu'il ne soit exécuté (certains utilisateurs ont rapporté dans des commentaires que sur Chrome parfois un événement de clic est déclenché après un submit).

fonctionne lors de la navigation à la fois avec des clés et avec la souris / les doigts sans compter sur les navigateurs pour envoyer un événement de clic sur le retour key (doesn't hurt though), j'ai ajouté un gestionnaire d'événements pour focus events pour les boutons et les champs.

vous pouvez ajouter des boutons de type=" submit " aux éléments qui se sauvegardent eux-mêmes lorsque cliqué.

dans la démo j'ai mis une bordure rouge pour afficher l'article sélectionné et une alerte qui affiche le nom et la valeur/étiquette.

voici le violon

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

DUMMY HTML:

<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}
0
répondu FrancescoMM 2017-10-12 16:31:55

vous voulez utiliser fenêtre.événement.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 recevrez une alerte qui dit: "l'élément cliqué était monbutton.

dans votre exemple amélioré, vous pouvez ajouter une fenêtre.événement.srcElement à process_form_submission et vous aurez une référence à n'importe quel élément invoqué le processus.

-1
répondu Cos Callis 2011-04-19 19:51:39