Wie kann ich den Button, der das Senden verursacht hat, vom Formular absenden-Ereignis erhalten?

Ich versuche den Wert der Übermittlungsschaltfläche zu finden, die das Senden des Formulars ausgetriggers hat

$("form").submit(function() { }); 

Ich könnte möglicherweise ein $ (“input [type = submit]”). Click () -Ereignis für jede Taste und setzen Sie eine Variable, aber das scheint weniger elegant als einige, wie das Ziehen der Taste aus dem Formular beim Senden.

Solutions Collecting From Web of "Wie kann ich den Button, der das Senden verursacht hat, vom Formular absenden-Ereignis erhalten?"

Ich nutzte document.activeElement wie in dieser Antwort skizziert: Wie bekomme ich das fokussierte Element mit jQuery?

 $form.on('submit', function() { var $btn = $(document.activeElement); if ( /* there is an activeElement at all */ $btn.length && /* it's a child of the form */ $form.has($btn) && /* it's really a submit element */ $btn.is('button[type="submit"], input[type="submit"], input[type="image"]') && /* it has a "name" attribute */ $btn.is('[name]') ) { console.log("Seems, that this element was clicked:", $btn); /* access $btn.attr("name") and $btn.val() for data */ } }); 

Ich nutze die Tatsache, dass der Knopf immer das fokussierte Element ist, nachdem ich ihn angeklickt habe. Dies funktioniert nicht , wenn Sie direkt nach dem Klick eine blur() .

@Doin hat einen weiteren Nachteil entdeckt. Wenn ein Benutzer das Formular über die enter in ein Textfeld eingibt, wird das document.activeElement nicht festgelegt. Sie müssen selbst darauf aufpassen, indem Sie in input[type="text"] und ähnlichen keypress .

Update 2017-01: Für meine Bibliothek Hyperform habe ich mich entschieden, nicht activeElement zu verwenden, sondern alle Ereignisse zu activeElement , die zur Formularübergabe führen. Der Code dafür ist auf Github.

Wenn Sie Hyperform benutzen, würden Sie so auf die Schaltfläche zugreifen, die das Senden ausgetriggers hat:

 $(form).on('submit', function(event) { var button = event.submittedVia; }); 

Ich habe das implementiert und ich nehme an, es wird reichen.

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

und das ist das Submit-Button-Event, das es einrichtet

 $("form input[type=submit]").click(function() { $("input[type=submit]", $(this).parents("form")).removeAttr("clicked"); $(this).attr("clicked", "true"); }); 

Danke für die Antworten, aber das ist nicht besonders unelegant …

Ich habe ein Testformular erstellt und Firebug verwendet, um den Wert zu ermitteln.

 $('form').submit(function(event){ alert(event.originalEvent.explicitOriginalTarget.value); }); 

Leider unterstützt nur Firefox dieses Ereignis.

Hier ist ein Ansatz, der für meine Zwecke sauberer erscheint.

Erstens, für alle Formen:

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

Wenn dieses click -Ereignis für ein Formular ausgetriggers wird, wird einfach das Ursprungsziel (verfügbar im Ereignisobjekt) für den späteren Zugriff aufgezeichnet. Dies ist ein ziemlich breiter Strich, da er für jeden Klick auf dem Formular ausgetriggers wird. Optimierungskommentare sind willkommen, aber ich vermute, dass es nie zu merklichen Problemen kommen wird.

Dann können Sie in $ (‘form’) .submit () fragen, was zuletzt geklickt wurde, mit etwas wie

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

Gemäß dieser Verknüpfung enthält das Event-Objekt ein Feld Event.target , das

Gibt eine Zeichenfolge zurück, die das Objekt darstellt, das das Ereignis ausgetriggers hat.

Ich habe gerade eine Seite erstellt, die testet, was dieser Wert ist, und es scheint, als ob diese Darstellung für das Formular selbst und nicht für die angeklickte Schaltfläche ist. Mit anderen Worten, Javascript bietet nicht die Möglichkeit, die angeklickte Schaltfläche zu bestimmen.

Soweit Dave Anderson Lösung , könnte es eine gute Idee sein, das in mehreren Browsern zu testen, bevor Sie es verwenden. Es ist möglich, dass es gut funktionieren könnte, aber das kann ich nicht sagen.

Ein sauberer Ansatz besteht darin, das Klickereignis für jede Formularschaltfläche zu verwenden. Es folgt ein HTML-Formular mit den Schaltflächen Speichern, Abbrechen und Löschen:

 

Folgendes ist die JQuery. Ich sende die entsprechende “Aktion” an dieselbe Serverfunktion, je nachdem, auf welche Schaltfläche geklickt wurde (“Speichern” oder “Löschen”). Wenn ‘Abbrechen’, wird geklickt, ich lade einfach die Seite neu.

 $('.savenote').click(function(){ var options = { data: {'action':'save'} }; $(this).parent().ajaxSubmit(options); }); $('.deletenote').click(function(){ var options = { data: {'action':'delete'} }; $(this).parent().ajaxSubmit(options); }); $('.cancelnote').click(function(){ window.location.reload(true); return false; }); 

Ich suchte und fand mehrere Möglichkeiten, um den Sendebutton- name + value zu erhalten, der mit jQuery + AJAX an den Server gesendet wurde. Ich mochte sie nicht sehr …

Einer der Besten war die hier präsentierte Jägerlösung!

Aber ich habe selbst noch einen geschrieben.

Ich möchte teilen, weil es gut ist, und, wie ich gebraucht habe, funktioniert es auch mit Formularen, die über Ajax geladen werden (nach document.ready):

 $(document).on('click', 'form input[type=submit]', function(){ $('').appendTo($(this).parents('form').first()).attr('name', $(this).attr('name')).attr('value', $(this).attr('value')); }); 

Einfach! Wenn auf die Schaltfläche “Senden” geklickt wird, wird dem Formular ein verborgenes Feld hinzugefügt, das den gleichen name und den gleichen value wie die Schaltfläche zum Senden verwendet.

BEARBEITEN: Die folgende Version ist einfacher zu lesen. Es wird auch darauf geachtet, zuvor angehängte versteckte Felder zu entfernen (im Falle, dass das gleiche Formular zweimal gesendet wird, was bei Verwendung von AJAX durchaus möglich ist).

Verbesserter Code:

 $(document).on('click', 'form input[type=submit]', function(){ var name = $(this).attr('name'); if (typeof name == 'undefined') return; var value = $(this).attr('value'); var $form = $(this).parents('form').first(); var $input = $('').attr('name', name).attr('value', value); $form.find('input.temp-hidden').remove(); $form.append($input); }); 

Ich habe einige der Beispiele versucht, aber sie haben nicht für unsere Zwecke funktioniert.

Hier ist eine Geige zu zeigen: http://jsfiddle.net/7a8qhofo/1/

Ich war mit einem ähnlichen Problem konfrontiert, und so haben wir das Problem in unseren Formularen getriggers.

 $(document).ready(function(){ // Set a variable, we will fill later. var value = null; // On submit click, set the value $('input[type="submit"]').click(function(){ value = $(this).val(); }); // On data-type submit click, set the value $('input[type="submit"][data-type]').click(function(){ value = $(this).data('type'); }); // Use the set value in the submit function $('form').submit(function (event){ event.preventDefault(); alert(value); // do whatever you need to with the content }); }); 

Sie können dies mit “event.originalEvent.x” und “event.originalEvent.y” versuchen:

 < !DOCTYPE html>    test   





( Veranstaltung )

 function submForm(form,event){ var submitButton; if(typeof event.explicitOriginalTarget != 'undefined'){ // submitButton = event.explicitOriginalTarget; }else if(typeof document.activeElement.value != 'undefined'){ // IE submitButton = document.activeElement; }; alert(submitButton.name+' = '+submitButton.value) } 

jQuery scheint diese Daten für das Submit-Ereignis nicht bereitzustellen. Sieht so aus, als ob die von Ihnen vorgeschlagene Methode die beste ist.

Nur eine andere Lösung, da keine andere meine Anforderungen erfüllt. Der Vorteil ist, dass Klick und Tastendruck (Enter und Leerzeichen) erkannt werden.

 // Detects the Events var $form = $('form'); $form.on('click keypress', 'button[type="submit"]', function (ev) { // Get the key (enter, space or mouse) which was pressed. if (ev.which === 13 || ev.which === 32 || ev.type === 'click') { // Get the clicked button var caller = ev.currentTarget; // Input Validation if (!($form.valid())) { return; } // Do whatever you want, eg ajax... ev.preventDefault(); $.ajax({ // ... }) } } 

Das hat am besten für mich funktioniert.

Mit einem spezifischeren Event-Handler und JQuery wird auf das Ereignisobjekt geklickt. Sie können bei Bedarf auch das delegierende Formular von diesem Ereignis abrufen.

 $('form').on('click', 'button', function (e) { e.preventDefault(); var $button = $(e.target), $form = $(e.delegateTarget); var buttonValue = $button.val(); }); 

Dieser Doc hat alles, was Sie brauchen, um loszulegen. JQuery-Dok .