Puis-je déterminer quel bouton de soumission a été utilisé en javascript?

J'ai une forme très simple avec un champ de nom et deux boutons de soumission: 'changer' et 'supprimer'. J'ai besoin de faire une validation de formulaire dans javascript lorsque le formulaire est soumis, donc j'ai besoin de savoir quel bouton a été cliqué. Si l'utilisateur frappe la touche enter, la valeur 'change' est celle qui le rend au serveur. Donc, vraiment, je dois juste savoir si le bouton "supprimer" a été cliqué ou non.

Puis-je déterminer quel bouton a été cliqué? Ou dois-je changer le bouton "supprimer" d'un envoi à un bouton régulier et prendre son événement onclick pour soumettre le formulaire?

Le formulaire ressemble à ceci:

<form action="update.php" method="post" onsubmit="return checkForm(this);"> <input type="text" name="tagName" size="30" value="name goes here" /> <input type="hidden" name="tagID" value="1" /> <input type="submit" name="submit" value="Change" /> <input type="submit" name="submit" value="Delete" /> </form>

Dans la fonction checkForm() , la form["submit"] est une liste de noeud, pas un élément dont je peux saisir la valeur.

Vous pouvez également utiliser l'événement onclick de différentes façons pour résoudre le problème.

Par exemple:

 <input type="submit" name="submit" value="Delete" onclick="return TryingToDelete();" />

Dans la fonction TryingToDelete() dans JavaScript, faites ce que vous voulez, puis return false si vous ne souhaitez pas que la suppression se poursuive.

Voici une approche discrète utilisant jQuery …

 $(function () { // for each form on the page... $("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", that).bind("click keypress", function () { // store the id of the submit-input on it's enclosing form that.data("callerid", this.id); }); }); // assign submit-event to all forms on the page $("form").submit(function () { /* retrieve the id of the input that was clicked, stored on it's enclosing form */ var callerId = $(this).data("callerid"); // determine appropriate action(s) if (callerId == "delete") // do stuff... if (callerId == "change") // do stuff... /* note: you can return false to prevent the default behavior of the form--that is; stop the page from submitting */ }); });

Remarque: ce code utilise la propriété id pour référencer les éléments, donc vous devez mettre à jour votre balisage. Si vous voulez que je mette à jour le code dans ma réponse pour utiliser le nom-attribut pour déterminer les actions appropriées, faites-le moi savoir.

 <html> <script type="text/javascript"> var submit; function checkForm(form) { alert(submit.value); return false; } function Clicked(button) { submit= button ; } </script> <body> <form method="post" onsubmit="return checkForm(this);"> <input type="text" name="tagName" size="30" value="name goes here" /> <input type="hidden" name="tagID" value="1" /> <input onclick="Clicked(this);" type="submit" name="submit" value="Change" /> <input onclick="Clicked(this);" type="submit" name="submit" value="Delete" /> </form> </body> </html>

Certains navigateurs (au moins Firefox, Opera et IE) prennent en charge ceci:

 <script type="text/javascript"> function checkForm(form, event) { // Firefox || Opera || IE || unsupported var target = event.explicitOriginalTarget || event.relatedTarget || document.activeElement || {}; alert(target.type + ' ' + target.value); return false; } </script> <form action="update.php" method="post" onsubmit="return checkForm(this, event);"> <input type="text" name="tagName" size="30" value="name goes here" /> <input type="hidden" name="tagID" value="1" /> <input type="submit" name="submit" value="Change" /> <input type="submit" name="submit" value="Delete" /> </form>

Pour une solution intrinsèque de navigateur croisé, vous devrez ajouter les onclick aux boutons eux-mêmes.

Donnez à chacun des boutons un identifiant unique tel que

 <input type="submit" id="submitButton" name="submit" value="Change" /> <input type="submit" id="deleteButton" name="submit" value="Delete" />

Je ne sais pas très bien comment faire cela en javascript brut, mais jquery, vous pouvez alors le faire

 $('#submitButton').click(function() { //do something }); $('#deleteButton').click(function() { //do something });

Cela indique que si submitButton est cliqué, faites ce qui est en lui. Si deleteButton est cliqué, faites ce qu'il y a dedans

Dans jQuery, vous pouvez utiliser $ .data () pour garder les données dans la portée – pas besoin de variables globales dans ce cas. D'abord, vous cliquez sur le bouton Envoyer, puis (selon son action), vous affectez des données au formulaire. Je n'empêche pas l'action par défaut dans l'événement de clic, de sorte que le formulaire est envoyé juste après que l'événement de clic se termine.

HTML:

 <form action="update.php" method="post""> <input type="text" name="tagName" size="30" value="name goes here" /> <input type="hidden" name="tagID" value="1" /> <input type="submit" name="submit" value="Change" /> <input type="submit" name="submit" value="Delete" /> </form>

JavaScript:

  (function ($) { "use strict"; $(document).ready(function () { // click on submit button with action "Change" $('input[value="Change"]').on("click", function () { var $form = $(this).parents('form'); $form.data("action", "Change"); }); // click on submit button with action "Delete" $('input[value="Delete"]').on("click", function () { var $form = $(this).parents('form'); $form.data("action", "Delete"); }); // on form submit $('form').on("submit", function () { var $self = $(this); // retrieve action type from form // If there is none assigned, go for the default one var action = $self.data("action") || "deafult"; // remove data so next time you won't trigger wrong action $self.removeData("action"); // do sth depending on action type if (action === "change") { } }); }); })(jQuery);

À l'heure actuelle, vous avez le même problème que vous voudriez une entrée de texte normale. Vous avez le même nom sur deux éléments différents. Modifiez les noms à "Modifier" et "Supprimer", puis déterminez si l'un d'eux a été cliqué en appliquant un gestionnaire d'événements sur les deux soumissions et en fournissant différentes méthodes. Je suppose que vous utilisez JavaScript pur, mais si vous voulez qu'il soit rapide, regardez jQuery.

Ce dont vous avez besoin, c'est aussi simple que de suivre ce qui se passe dans les écoles maternelles

Comme vous n'avez pas mentionné l'utilisation d'un cadre, c'est le moyen le plus propre de le faire avec un Javascript direct. Avec ce code, ce que vous faites est de passer l'objet du bouton lui-même dans la fonction go (). Vous avez alors accès à toutes les propriétés du bouton. Vous ne devez rien faire avec setTimeout (0) ou avec d'autres fonctions farfelues.

 <script type="text/javascript"> function go(button) { if (button.id = 'submit1') //do something else if (button.id = 'submit2') //do something else } </script> <form action="update.php" method="post"> <input type="text" name="tagName" size="30" value="name goes here" /> <input type="hidden" name="tagID" value="1" /> <input id="submit1" type="submit" name="submit" value="Change" onclick="go(this);"/> <input id="submit2" type="submit" name="submit" value="Delete" onclick="go(this);"/> </form>

Un événement de clic n'importe où dans un formulaire sera capturé par le gestionnaire de clic d' un formulaire (tant que l'élément est cliqué sur lui permet de se propager). Il sera traité avant l'événement de soumission du formulaire .

Par conséquent, on peut vérifier si la cible de clic était une étiquette d' entrée (ou bouton ) du type de soumission , et enregistrez la valeur de celle-ci (par exemple, sur un attribut de bouton de données sur le formulaire) pour le traitement dans le gestionnaire de soumission du formulaire .

Les boutons de soumission ne nécessitent alors aucun gestionnaire d'événements.

J'avais besoin de le faire pour modifier les attributs de l' action et de la cible d' un formulaire, selon le bouton de soumission qui a été cliqué.

 // TO CAPTURE THE BUTTON CLICKED function get_button(){ var oElement=event.target; var oForm=oElement.form; // IF SUBMIT INPUT BUTTON (CHANGE 'INPUT' TO 'BUTTON' IF USING THAT TAG) if((oElement.tagName=='INPUT')&&(oElement.type=='submit')){ // SAVE THE ACTION oForm.setAttribute('data-button',oElement.value); } } // TO DO THE SUBMIT PROCESSING function submit_form(){ var oForm=event.target; // RETRIEVE THE BUTTON CLICKED, IF ONE WAS USED var sAction=''; if(oForm.hasAttribute('data-button')){ // SAVE THE BUTTON, THEN DELETE THE ATTRIBUTE (SO NOT USED ON ANOTHER SUBMIT) sAction=oForm.getAttribute('data-button'); oForm.removeAttribute('data-button'); } // PROCESS BY THE BUTTON USED switch(sAction){ case'Change': // WHATEVER alert('Change'); break; case'Delete': // WHATEVER alert('Delete'); break; default: // WHATEVER FOR ENTER PRESSED alert('submit: By other means'); break; } }

  <form action="update.php" method="post" onsubmit="submit_form();" onclick="get_button();"> <input type="text" name="tagName" size="30" value="name goes here" /> <input type="hidden" name="tagID" value="1" /> <input type="submit" name="submit" value="Change" /> <input type="submit" name="submit" value="Delete" /> </form> <p id="result"></p>

Nommez le bouton de suppression autrement. Peut-être nommer un SubmitChange et nommer l'autre SubmitDelete.

J'ai moi-même affaire à ce problème. Il n'y a pas de manière intégrée de dire quel bouton soumet un formulaire, mais c'est une fonctionnalité qui pourrait apparaître à l'avenir.

La solution de contournement que j'utilise en production consiste à stocker le bouton quelque part pour une boucle d'événement en cliquant. Le JavaScript pourrait ressembler à ceci:

 function grabSubmitter(input){ input.form.submitter = input; setTimeout(function(){ input.form.submitter = null; }, 0); }

… et vous avez mis un clic sur chaque bouton:

 <input type="submit" name="name" value="value" onclick="grabSubmitter(this)">

click incendies avant de submit , alors dans votre événement de soumission, s'il y a un message sur votre formulaire, un bouton a été cliqué.

J'utilise jQuery, alors j'utilise $.fn.data() au lieu d'expander pour stocker le submitter. J'ai un petit plugin pour gérer temporairement les données sur un élément qui ressemble à ceci:

 $.fn.briefData = function(key, value){ var $el = this; $el.data(key, value); setTimeout(function(){ $el.removeData(key); }, 0); };

Et je l'attache à des boutons comme celui-ci:

 $(':button, :submit').live('click', function () { var $form = $(this.form); if ($form.length) { $form.briefData('submitter', this); } });