jQuery: come ottenere il pulsante su cui è stato fatto clic sull’invio del modulo?

Ho un evento .submit() impostato per l’invio del modulo. Ho anche più moduli sulla pagina, ma solo uno qui per questo esempio. Mi piacerebbe sapere quale pulsante di invio è stato cliccato senza applicare un evento .click() a ciascuno di essi.

Ecco la configurazione:

   jQuery research: <a href="https://www.yocker.com/t/forms" title="Topics of forms" target="_blank">forms</a>   $(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 ); }    

Here's my form:

Esempio dal vivo su jsfiddle

Oltre all’applicazione di un evento .click () su ciascun pulsante, esiste un modo per determinare quale pulsante di invio è stato selezionato?

Ho fatto la stessa domanda: come posso ottenere il pulsante che ha causato l’invio dall’evento di invio del modulo?

Ho finito per venire con questa soluzione e ha funzionato abbastanza bene:

 $(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"); }); }); 

Nel tuo caso con più moduli potresti doverlo modificare leggermente ma dovrebbe comunque essere applicato

Ho scoperto che questo ha funzionato.

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

Questo funziona per me:

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

Quando il modulo è presentato:

  • document.activeElement ti fornirà il pulsante di invio su cui è stato fatto clic.

  • document.activeElement.getAttribute('value') ti darà il valore di quel pulsante.

Ecco l’approccio che sembra più pulito per i miei scopi.

Innanzitutto, per qualsiasi e tutte le forms:

 $('form').click(function(event) { $(this).data('clicked',$(event.target)) }); 

Quando questo evento click viene triggersto per un modulo, registra semplicemente il target di origine (disponibile nell’object evento) a cui accedere successivamente. Questo è un colpo abbastanza ampio, dato che sparerà per qualsiasi clic in qualsiasi punto del modulo. I commenti sull’ottimizzazione sono ben accetti, ma sospetto che non causerà mai problemi evidenti.

Quindi, in $ (‘form’). Submit (), puoi chiedere che cosa è stato fatto l’ultimo clic, con qualcosa di simile

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

Wow, alcune soluzioni possono complicarsi! Se non ti dispiace usare un global semplice, approfitta del fatto che l’evento click del pulsante di input viene triggersto per primo. Si potrebbe ulteriormente filtrare il selettore $ (‘input’) per uno dei molti moduli usando $ (‘# input myForm’).

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

Un’altra ansible soluzione è aggiungere un campo nascosto nel modulo:

  

Quindi, nella funzione Pronto, aggiungere funzioni per registrare quale tasto è stato premuto:

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

Ora nel gestore di invio del modulo leggere la variabile nascosta e decidere in base ad essa:

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

Basandosi su ciò che Stan e yann-h hanno fatto, ma questo è il primo pulsante predefinito. La bellezza di questo approccio generale è che raccoglie sia il clic che il tasto Invio (anche se il focus non era sul pulsante.) Se devi consentire l’inserimento nel modulo, rispondi semplicemente a questo quando un pulsante è focalizzato ( cioè la risposta di Stan). Nel mio caso, volevo consentire a invio di inviare il modulo anche se l’attuale focus dell’utente era sulla casella di testo.

Stavo anche usando un attributo ‘name’ piuttosto che ‘id’, ma questo è lo stesso approccio.

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

Ho trovato che la soluzione migliore è

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

Questo non funziona solo sugli input, ma funziona anche sui tag button. Inoltre ottiene l’id del pulsante.

Se ciò che intendi non aggiungendo un evento .click è che non vuoi avere gestori separati per quegli eventi, puoi gestire tutti i clic (sottomissioni) in un’unica funzione:

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

Questo ha funzionato per me

 $('#Form').submit(function(){ var btn= $(this).find("input[type=submit]:focus").val(); alert('you have clicked '+ btn); } 
 $("form input[type=submit]").click(function() { $("") .attr('type', 'hidden') .attr('name', $(this).attr('name')) .attr('value', $(this).attr('value')) .appendTo(this) }); 

aggiungi campo nascosto

Per me, la soluzione migliore era questa:

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

Lavorando con questa eccellente risposta , è ansible controllare l’elemento attivo (il pulsante), aggiungere un input nascosto al modulo e, facoltativamente, rimuoverlo alla fine del gestore di invio.

 $('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(''); } // Handle the form submit here $('#form-js-temp').remove(); }); 

Nota a margine: personalmente aggiungo la class form-js su tutti i moduli inviati tramite JavaScript.

Simile alla risposta di Stan ma:

  • se hai più di un pulsante, devi ottenere solo il primo pulsante => [0]
  • se il modulo può essere inviato con il tasto invio, devi gestire un valore predefinito => myDefaultButtonId

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

Questa è la soluzione utilizzata da me e funziona molto bene:

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

Siccome non posso commentare la risposta accettata, porto qui una versione modificata che dovrebbe tenere conto di elementi che sono al di fuori del modulo (cioè: allegato al modulo usando l’attributo form ). Questo è per il browser moderno: http://caniuse.com/#feat=form-attribute . Il closest('form') viene utilizzato come fallback per l’attributo di form non supportato

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

Mi ha aiutato https://stackoverflow.com/a/17805011/1029257

Modulo inviato solo dopo aver fatto clic sul pulsante di invio.

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

Ho anche fatto una soluzione, e funziona abbastanza bene:
Usa jQuery e CSS

In primo luogo, ho creato una rapida class CSS, che può essere incorporata o in un file separato.

  

Successivamente, nell’evento click di un pulsante all’interno del modulo, aggiungi la class CSS al pulsante. Se il pulsante ha già la class CSS, rimuoverlo. (Non vogliamo due classi CSS [Solo nel caso]).

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

Ora, prova il pulsante per vedere che ha la class CSS, se il pulsante testato non ha il CSS, allora l’altro pulsante lo farà.

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

Spero che questo ti aiuti! Saluti!

È ansible creare il tipo di input = “nascosto” come titolare per le informazioni sull’ID del pulsante.

   

In questo caso il modulo passa il valore “1” (id del tuo pulsante) su submit. Funziona se onClick si verifica prima dell’invio (?), Cosa non sono sicuro se è sempre vero.

Un modo semplice per distinguere quale pulsante

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

Ecco un esempio, che utilizza this.form per ottenere il modulo corretto in cui è inoltrato, e campi dati per memorizzare l’ultimo elemento cliccato / focalizzato. Ho anche inserito il codice di invio all’interno di un timeout per assicurarmi che gli eventi di clic avvengano prima che venga eseguito (alcuni utenti hanno segnalato nei commenti che su Chrome a volte un evento click viene generato dopo un invio).

Funziona quando si naviga sia con i tasti che con il mouse / le dita senza contare sui browser per inviare un evento click sul tasto RETURN (non fa male però), ho aggiunto un gestore di eventi per gli eventi di messa a fuoco per pulsanti e campi.

È ansible aggiungere pulsanti di tipo = “submit” agli elementi che si salvano da soli quando si fa clic.

Nella demo ho impostato un bordo rosso per mostrare l’elemento selezionato e un avviso che mostra nome e valore / etichetta.

Ecco il FIDDLE

Ed ecco lo (stesso) codice:

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:

 

CSS DUMB:

 input {display:block} 

Si desidera utilizzare window.event.srcElement.id in questo modo:

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

per un pulsante che assomiglia a:

  

riceverai un avviso che dice: “l’object cliccato era myButton.

Nel tuo esempio migliorato puoi aggiungere window.event.srcElement a process_form_submission e avrai un riferimento a qualsiasi elemento abbia invocato il processo.