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é?
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
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" );
});
}
ça marche pour moi:
$("form").submit(function() {
// Print the value of the button that was clicked
console.log($(document.activeElement).val());
}
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.
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();
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);
});
});
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();
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;
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.
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 );
}
celui-ci a travaillé pour moi
$('#Form').submit(function(){
var btn= $(this).find("input[type=submit]:focus").val();
alert('you have clicked '+ btn);
}
$("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é
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'))
});
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.
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;
...
}
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>
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]');
})
ça m'a aidé https://stackoverflow.com/a/17805011/1029257
Le formulairea été soumis seulement après que le bouton Soumettre a été cliqué.
var theBtn = $(':focus');
if(theBtn.is(':submit'))
{
// ....
return true;
}
return false;
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!
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.
un moyen simple de distinguer quel bouton
$("button").click(function() {
var id = $(this).attr('id');
...
});
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}
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.