jQuery: Wie erhalte ich, auf welche Schaltfläche beim Senden des Formulars geklickt wurde?

227

Ich habe eine .submit()Veranstaltung für die Formularübermittlung eingerichtet. Ich habe auch mehrere Formulare auf der Seite, aber nur eines hier für dieses Beispiel. Ich möchte wissen, auf welche Schaltfläche zum Senden geklickt wurde, ohne .click()auf jedes Ereignis ein Ereignis anzuwenden .

Hier ist das Setup:

<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-Beispiel auf jsfiddle

Gibt es neben dem Anwenden eines .click () -Ereignisses auf jede Schaltfläche eine Möglichkeit, festzustellen, auf welche Senden-Schaltfläche geklickt wurde?

jquery forms hawkexp
quelle

2

Die Ironie ist natürlich, dass diese Informationen trivial sind, um die Serverseite zu bestimmen.

Neil

5

@Neil Nicht, wenn Sie das Formular über $ .ajax () und ein serializeArray () im Formular senden.

Aaron

Mögliches Duplikat von Wie kann ich die Schaltfläche, die die Übermittlung verursacht hat, aus dem Formularübermittlungsereignis erhalten?

Bergi

1

Wie wäre es, wenn Sie einen Listener auf die Senden-Schaltflächen setzen und das Formular manuell senden.

JMRC

1

Wie wäre es mit einem Blick auf die serialisierte Version der Formulardaten und die Übereinstimmung mit den Schaltflächen name?

Augustin Riedinger

235

Ich habe dieselbe Frage gestellt: Wie kann ich die Schaltfläche, die die Übermittlung verursacht hat, aus dem Formularübermittlungsereignis abrufen?

Am Ende habe ich mir diese Lösung ausgedacht und sie hat ziemlich gut funktioniert:

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

In Ihrem Fall mit mehreren Formularen müssen Sie dies möglicherweise etwas anpassen, es sollte jedoch weiterhin gelten

Jäger
quelle

11

+1 Schöne Lösung. Möglicherweise möchten Sie eine Anweisung hinzufügen, die das angeklickte Attribut über die Schaltflächen hinweg auf false zurücksetzt, falls die Übermittlung des Formulars auf Ajax-Weise behandelt wird und Sie vermeiden möchten, dass erneut auf die Schaltfläche geklickt wird.

Chandu

1

Oh, ich verstehe. Sie fügen Ihr eigenes "angeklicktes" Attribut hinzu. Ich habe überall nach einem "angeklickten" Booleschen Wert gesucht und konnte nirgendwo einen finden. Ich hätte nie gedacht, selbst einen zu machen. Gute Idee!

Hawkexp

9

Beachten Sie, dass dies nur mit Eingabeelementen funktioniert, nicht mit Schaltflächenelementen.

Bob.at.Indigo.Health

1

Dies ist in Chrome mit Schaltflächenelementen nicht erforderlich. Ich behandle einfach das Ereignis on submit, erstelle ein FormData-Objekt aus dem Formular und es enthält immer den Wert der Schaltfläche, auf die geklickt wurde. FireFox zeigt dieses Verhalten NICHT und sendet stattdessen überhaupt keinen Schaltflächenwert. Chrome scheint so etwas wie die oben genannte Lösung automatisch auszuführen, sich zu merken, auf welche Schaltfläche geklickt wurde, und sie automatisch in die Formulardaten aufzunehmen. Natürlich macht dieses Fehlen von Standardverhalten (das sowieso alles in JavaScript plagt, also wundert es mich nicht) die Funktion unbrauchbar.

Triynko

1

Erwägen Sie außerdem, den Selektor "button [type = submit]" (durch Komma getrennt) hinzuzufügen, da Submit-Elemente keine Eingabe-Tags sein müssen.

Kyselejsyreček

91

Ich fand, dass dies funktionierte.

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

Stan
quelle

12

Diese Lösung funktioniert gut in Chrome, kann aber nicht in Safari funktionieren. Sie gibt undefiniert zurück, nicht das Schaltflächenobjekt

Mr. Sun Lin

1

@Krinkle Ich habe es so codiert, um den allgemeinsten Weg zu zeigen, der möglich ist. Ich denke, Entwickler sind klug genug, um es nach ihrem Geschmack zu optimieren.

Stan

Sauberer als die anderen Lösungen.

Ich habe

Diese Antwort wird nicht immer funktionieren. Eigentlich benötigen Sie die angeklickte Schaltfläche, nicht die fokussierte (da die Fokusaktion keine Klickaktion ist). Die ausgewählte Antwort (des Jägers) ist die richtige.

Vasil Popov

Ich habe ein Klickereignis auf Senden-Schaltflächen und sende Ereignisse auf ihren Formularen ... das letztere löst das erstere aus. Ich habe dies verwendet, um die Quelle des Ereignisses herauszufinden. In einigen Browsern wird durch Klicken auf die Schaltfläche die Schaltfläche als fokussiert angezeigt, in anderen wird nichts angezeigt. In allen von mir getesteten Browsern bleibt die Eingabe fokussiert, wenn Sie bei einer Eingabe die Eingabetaste drücken.

Notacouch

65

Das funktioniert bei mir:

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

seddonym
quelle

3

Das war hilfreich, die bekommen idvon der activeElementhabe ich$(document.activeElement).attr('id');

Mikolaj

9

Für das, was es wert ist, müssen Sie nicht jQuery verwenden, um die ID zu erhalten - es ist noch einfacher, reines Javascript zu verwenden:document.activeElement.id

Nick F

5

Beachten Sie, dass dies auf Safari anscheinend nicht wie erwartet funktioniert. :(

Rinogo

@rinogo: Was passiert in Safari?

Crescent Fresh

1

In Safari document.activeElementist nicht die Eingabe. In meinem Fall ist es ein modales Div (das das Formular enthält).

mgalgs

46

Wenn das Formular gesendet wird:

document.activeElement gibt Ihnen die Schaltfläche "Senden", auf die geklickt wurde.
document.activeElement.getAttribute('value') gibt Ihnen den Wert dieser Schaltfläche.

Nick F.
quelle

2

Beachten Sie, dass dies auf Safari anscheinend nicht wie erwartet funktioniert. :(

Rinogo

Ich weiß nicht, wie es mit Safari ist, aber auf Chrome hat es gut funktioniert :) Danke!

Ingus

Funktioniert in Chrome 63 und IE11

Sir Crispalot

Ich hatte eine unauffällige jquery-Validierung ausgeführt, die zuvor abfängt und die ungültige Eingabe als activeElement anstelle der Schaltfläche festlegt.

Peheje

28

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

Erstens für alle Formen:

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

Wenn dieses Klickereignis für ein Formular ausgelöst wird, zeichnet es einfach das Ursprungsziel (im Ereignisobjekt verfügbar) auf, auf das später zugegriffen werden soll. Dies ist ein ziemlich breiter Strich, da er für jeden Klick irgendwo auf dem Formular ausgelöst wird. Optimierungskommentare sind willkommen, aber ich vermute, dass sie niemals erkennbare Probleme verursachen werden.

Dann können $('form').submit()Sie in nachfragen, was zuletzt angeklickt wurde, mit so etwas wie

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

Jonathan Camenisch
quelle

Was ist, wenn dies ein Formularübermittlungsereignis ist, anstatt zu klicken?

Tony

1

@ Tony, sorry, ich habe deine Frage nicht früher gesehen. Diese Antwort bezieht sich ausschließlich auf Formulareingaben. Senden-Schaltflächen werden ebenfalls angeklickt und lösen somit das Klick-Ereignis aus.

Jonathan Camenisch

2

Stimmen Sie diese Antwort über die Antwort des Jägers ab, da die Übermittlungsereignisse des Formulars ausgelöst werden, bevor untergeordnete Elemente auf Ereignisse klicken. Dies führt zu Schwierigkeiten, wenn das Übermittlungsereignis Ihres Formulars mit abgebrochen wird return false, während diese Methode ordnungsgemäß funktioniert, da der Klick an das Formular anstatt an dessen untergeordnete Elemente gebunden ist.

Pospi

7

Dies kann den Fall nicht ordnungsgemäß behandeln, in dem das Formular mit anderen Mitteln als einem Klick (z. B. Drücken der Eingabetaste) gesendet wird. Wenn das Formular auf andere Weise gesendet wird, ist es die erste Senden-Schaltfläche, die das Senden-Ereignis ausgelöst hat, nicht die zuletzt angeklickte.

quietmint

Es fehlt ein Semikolon danach ... $(event.target)), kann aber nicht bearbeitet werden, da die Änderungen> 6 Zeichen sein müssen

Hafenkranich

13

Wow, manche Lösungen können kompliziert werden! Wenn es Ihnen nichts ausmacht, ein einfaches globales Ereignis zu verwenden, nutzen Sie einfach die Tatsache, dass das Klickereignis der Eingabeschaltfläche zuerst ausgelöst wird. Man könnte den Selektor $ ('input') für eine von vielen Formen weiter filtern, indem man $ ('# myForm input') verwendet.

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

Rasenbowler
quelle

12

Ich habe die beste Lösung gefunden

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

Dies funktioniert nicht nur bei Eingaben, sondern auch bei Schaltflächen-Tags. Außerdem wird die ID der Schaltfläche angezeigt.

Thomas Williams
quelle

Verdammt, ich muss sehen, ob meine Seite jetzt auf Safari funktioniert, doh. Warum muss Safari immer so schwierig sein? Dank dafür. Ich werde nachsehen, wann ich nach Hause komme

Thomas Williams

developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/…

Oliver Hader

Das funktioniert bei mir in Safari nicht. Klicken Sie auf Listener auf einer Schaltfläche im Text, um .submit in einem Formular aufzurufen. Innerhalb der Submit - Handler $(document.activeElement).attr('id')zurückkehrtundefined

dyodji

7

Eine andere mögliche Lösung besteht darin, Ihrem Formular ein verstecktes Feld hinzuzufügen:

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

Fügen Sie dann in der Bereitschaftsfunktion Funktionen hinzu, um aufzuzeichnen, welche Taste gedrückt wurde:

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

Lesen Sie nun im Formular-Submitions-Handler die versteckte Variable und entscheiden Sie basierend darauf:

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

wmac
quelle

6

Aufbauend auf dem, was Stan und Yann-h getan haben, wird standardmäßig der erste Knopf verwendet. Das Schöne an diesem Gesamtansatz ist, dass sowohl der Klick als auch die Eingabetaste erfasst werden (auch wenn der Fokus nicht auf der Schaltfläche lag. Wenn Sie die Eingabe in das Formular zulassen müssen, reagieren Sie einfach darauf, wenn eine Schaltfläche fokussiert ist ( dh Stans Antwort). In meinem Fall wollte ich die Eingabe zulassen, um das Formular zu senden, auch wenn der aktuelle Fokus des Benutzers auf dem Textfeld lag.

Ich habe auch ein 'name'-Attribut anstelle von' id 'verwendet, aber dies ist der gleiche Ansatz.

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

andrewmo
quelle

Wenn Sie also mit TAB den Fokus auf die zweite Schaltfläche verschieben und RETURN drücken, wird standardmäßig die erste Schaltfläche verwendet ...

FrancescoMM

5

Dieser hat für mich gearbeitet

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

}

Saheb Mondal
quelle

Das verdient eine Medaille!

Martin Zvarík

4

Wenn Sie damit meinen, dass Sie kein .click-Ereignis hinzufügen, dass Sie keine separaten Handler für diese Ereignisse haben möchten, können Sie alle Klicks (Submits) in einer Funktion verarbeiten:

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

jcane86
quelle

keine schlechte Idee. Würde dies für eine beliebige Anzahl von Formularen auf der Seite funktionieren?

Hawkexp

@hawk yep, sollte es. Ich weiß nicht, ob dies das gewünschte Verhalten ist, aber Ihr Code sendet das Formular nicht wirklich, also meins auch nicht. Wenn Sie es einreichen möchten, entfernen Sie einfach das event.preventDefaultoder tun Sie etwas wie input.parents("form")[0].submit().

jcane86

Und wenn Sie ohne einen Klick einreichen (Return-Taste?), Wird es ein totales Chaos sein ..

FrancescoMM

4

Da ich die akzeptierte Antwort nicht kommentieren kann, bringe ich hier eine modifizierte Version mit, die Elemente berücksichtigen sollte, die sich außerhalb des Formulars befinden (dh: mit dem formAttribut an das Formular angehängt ). Dies ist für moderne Browser: http://caniuse.com/#feat=form-attribute . Das closest('form') wird als Fallback für nicht unterstützte formAttribute verwendet

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

user3074069
quelle

Dies sollte wirklich die ausgewählte Antwort sein. Ich würde nur hinzufügen, dass die Regel sein sollte"button,[type=submit]"

Wil

@Wil aber nicht alle Buttons sind Submit Buttons, es hängt von ihrem Typ ab.

Ptyskju

Ja, aber in Abwesenheit eines <input type = "submit">] hat jede UA, die ich jemals verwendet habe, ein <button> -Tag als Auslöser für das Senden von Formularen behandelt, sodass dieser Fall abgefangen wird. Oder der Autor kann eine Einschränkung hinzufügen, dass alle übermittlungsfähigen Elemente die Eigenschaften [type = submit] haben müssen ... eines der anderen.

Wil

3

$("form input[type=submit]").click(function() {
    $("<input />")
        .attr('type', 'hidden')
        .attr('name', $(this).attr('name'))
        .attr('value', $(this).attr('value'))
    .appendTo(this)
});

verstecktes Feld hinzufügen

anydasa
quelle

Funktioniert nicht in Firefox 30 / Windows 7. Hinweis: In Firefox ist jetzt ein verstecktes Feld erforderlich, da der angeklickte Übermittlungswert möglicherweise nicht gesendet wird, wenn er mit jquery's gesendet wird: this.submit () in einem On-Submit-Ereignis. Ich bin nur ein bisschen besorgt, dass $ (this) .attr ('name') möglicherweise nicht in allen Browsern funktioniert.

user1610743

Ich habe Firefox 30 / Windows 7. Ich habe alles perfekt funktioniert.

Anydasa

Denken Sie daran, button[type=submit]und einzuschließen input[type=image].

Rybo111

3

Für mich war die beste Lösung:

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

});

Jeramiah Harland
quelle

3

Mit dieser hervorragenden Antwort können Sie das aktive Element (die Schaltfläche) überprüfen, eine versteckte Eingabe an das Formular anhängen und es optional am Ende des Übermittlungshandlers entfernen.

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

Randnotiz: Ich persönlich füge die Klasse form-jszu allen Formularen hinzu, die über JavaScript gesendet werden.

rybo111
quelle

2

Ähnlich wie Stan Antwort, aber:

Wenn Sie mehr als eine Schaltfläche haben, müssen Sie nur die erste Schaltfläche erhalten => [0]
Wenn das Formular mit der Eingabetaste gesendet werden kann, müssen Sie eine Standard => myDefaultButtonId verwalten

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

yann-h
quelle

2

Dies ist die von mir verwendete Lösung und funktioniert sehr gut:

// 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>

Erweitern Sie das Snippet

vasilenicusor
quelle

1

Es hat mir geholfen https://stackoverflow.com/a/17805011/1029257

Das Formular wurde erst gesendet, nachdem auf die Schaltfläche "Senden" geklickt wurde.

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

return false;

w4kskl
quelle

1

Hier ist meine Lösung:

   $('#form').submit(function(e){   
        console.log($('#'+e.originalEvent.submitter.id));
        e.preventDefault();
    });

Roldan
quelle

0

Ich habe auch eine Lösung gefunden, und sie funktioniert ganz gut:
Sie verwendet jQuery und CSS

Zuerst habe ich eine schnelle CSS-Klasse erstellt, die eingebettet oder in eine separate Datei eingebettet werden kann.

<style type='text/css'>
    .Clicked {
        /*No Attributes*/
    }
</style>

Fügen Sie als Nächstes beim Klicken auf eine Schaltfläche im Formular die CSS-Klasse zur Schaltfläche hinzu. Wenn die Schaltfläche bereits die CSS-Klasse enthält, entfernen Sie sie. (Wir wollen keine zwei CSS-Klassen [Nur für den Fall]).

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

Testen Sie nun die Schaltfläche, um festzustellen, ob sie die CSS-Klasse enthält. Wenn die getestete Schaltfläche nicht über das CSS verfügt, wird die andere Schaltfläche angezeigt.

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

Hoffe das hilft! Prost!

Jason Cidras
quelle

Denken Sie daran, button[type=submit]und einzuschließen input[type=image].

Rybo111

Sie sollten Verweise auf Styling und CSS entfernen - sie sind hier nicht relevant. Auch sind die Linien , in denen Sie verwenden hasClass()und removeClass()sind überflüssig, da addClass()nicht die gleiche Klasse hinzufügen zweimal.

Rybo111

0

Sie können den Eingabetyp = "versteckt" als Halter für eine Schaltflächen-ID-Information erstellen.

<input type="hidden" name="button" id="button">
<input type="submit" onClick="document.form_name.button.value = 1;" value="Do something" name="do_something">

In diesem Fall übergibt das Formular beim Senden den Wert "1" (ID Ihrer Schaltfläche). Dies funktioniert, wenn onClick vor dem Senden auftritt (?), Was ich nicht sicher bin, ob es immer wahr ist.

Darekk
quelle

0

Eine einfache Möglichkeit, um zu unterscheiden, welche <button> oder <input type = "button" ...> gedrückt wird, besteht darin, ihre 'id' zu überprüfen:

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

Apostolos
quelle

0

Hier ist ein Beispiel, das this.form verwendet, um das richtige Formular für die Übermittlung zu erhalten, und Datenfelder, um das zuletzt angeklickte / fokussierte Element zu speichern. Ich habe auch den Sendecode in ein Timeout eingeschlossen, um sicherzustellen, dass Klickereignisse auftreten, bevor sie ausgeführt werden (einige Benutzer haben in Kommentaren berichtet, dass in Chrome manchmal ein Klickereignis nach dem Senden ausgelöst wird).

Funktioniert beim Navigieren sowohl mit Tasten als auch mit Maus / Fingern, ohne auf Browser zu zählen, um ein Klickereignis auf die RETURN-Taste zu senden (tut aber nicht weh). Ich habe einen Ereignishandler für Fokusereignisse für Schaltflächen und Felder hinzugefügt.

Sie können den Elementen Schaltflächen vom Typ = "Senden" hinzufügen, die sich beim Klicken selbst speichern.

In der Demo habe ich einen roten Rand gesetzt, um das ausgewählte Element anzuzeigen, und eine Warnung, die Name und Wert / Bezeichnung anzeigt.

Hier ist der FIDDLE

Und hier ist der (gleiche) 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}

FrancescoMM
quelle

0

Ich schreibe diese Funktion, die mir hilft

var PupulateFormData= function (elem) {
var arr = {};
$(elem).find("input[name],select[name],button[name]:focus,input[type='submit']:focus").each(function () {
    arr[$(this).attr("name")] = $(this).val();
});
return arr;
};

und dann verwenden

var data= PupulateFormData($("form"));

BabiBN
quelle

0

$('form').submit(function (ev) {
  let clickedButton = ev.originalEvent.explicitOriginalTarget;
});

Alexandre Paulo
quelle

-1

Sie möchten window.event.srcElement.id folgendermaßen verwenden :

function clickTheButton() {

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

}

für eine Schaltfläche, die aussieht wie:

<input type="button" id="myButton" onclick="clickTheButton();" value="Click Me"/>

Sie erhalten eine Warnung mit der Aufschrift: "Das angeklickte Element war myButton.

In Ihrem verbesserten Beispiel können Sie window.event.srcElement zu process_form_submission hinzufügen, und Sie erhalten einen Verweis auf das Element, das den Prozess aufgerufen hat.

Cos Callis
quelle

1

Verwenden Sie onclick nicht für Elemente, es ist veraltet

Krzysztof Cygan

1

Dies scheint für Senden-Schaltflächen nicht zu funktionieren. Window.event.srcElement gibt die ID des Formulars zurück.

333 MHz

@KrzysztofCygan Hast du eine Quelle dafür?

Vard

jQuery: Wie erhalte ich, auf welche Schaltfläche beim Senden des Formulars geklickt wurde?

Antworten: