Jquery erkennt, welcher Button das Formular übermittelt hat

Question

Ich habe ein Formular mit folgendem Inhalt:

    ...
    Die erste Schaltfläche
    Die letzte Schaltfläche

Ich möchte herausfinden, welcher die Formularsendeereignis ausgelöst hat, nur mit:

$('#my-form').submit(function(){
    //Pseudocode
    if($('[name=bttnsubmit]').val() == 1) {
        ....
    }
});

Offensichtlich wird dieser Selektor immer den Wert des ersten bttnsubmit-Elements zurückgeben, auf das er stößt, also benötige ich einen anderen magischen Selektor oder Filter oder etwas Ähnliches.

Ich habe $('[name=bttnsubmit][clicked=true]') gehört, aber das hat in meinen Versuchen bisher nicht funktioniert...

Natürlich könnte ich auf $('[name=bttnsubmit]').click() zurückgreifen, würde aber lieber meine Ziele im Formularsendeereignis erreichen.

Jede Hilfe/Tipp wird sehr geschätzt.

Answer 1

Ich weiß nicht, ob es einige eingebaute Event-Daten gibt (vielleicht gibt es welche), aber eine Idee, die mir einfällt, ist, das Klick-Ereignis der Schaltflächen zu behandeln und eine globale Referenz des Werts zu speichern. Etwas wie das:

var ButtonValue;

$('button[type="submit"]').click(function(e){
   ButtonValue = $(this).val();
});

$('#my-form').submit(function(){
    //Pseudo-Code
    if(ButtonValue == 1)
    {
        ....
    }
});

Answer 2

Dies ist eine Verbesserung der Antwort von @musefan.

Vermeiden Sie globale Variablen. Es ist besser, Daten in Form zu behalten:

$('button[type=submit]').click(function (e) {
    var button = $(this);
    buttonForm = button.closest('form');
    buttonForm.data('submittedBy', button);
});

Und im Submit-Handler einfach darauf zugreifen:

$('#my-form').submit(function (e) {
    var form = $(this);
    var submittedBy = form.data('submittedBy');
    if(submittedBy.val() == 1) {
        // Hier beliebiger Code...
    }
});

Das Formular kann durch Drücken der Eingabetaste übermittelt werden. Um null in der submittedBy-Variable zu vermeiden:

var submittedBy = form.data('submittedBy') || form.find('button[type=submit]:first');

Answer 3

HTML DOM wirft eine active Element-Eigenschaft aus, wenn ein Element angeklickt wird. Sie gibt das aktuell fokussierte Element im DOM zurück. Beim Absenden des Formulars durch Klicken auf eine Schaltfläche "Absenden" können Sie dieses Element in Jquery erkennen und die erforderlichen Operationen durchführen. Diese Methode ist besser als andere, da Sie Ihr Element von button type="submit" auf input type="submit" ändern können und es dennoch funktioniert. Sie können die ID und Klasse des Elements ändern und es funktioniert dennoch. Sie können sowohl Schaltfläche als auch Eingabetaste hinzufügen oder egal wie viele Schaltflächen Sie hinzufügen, es funktioniert immer noch. Um diese Schaltfläche in Jquery zu erkennen, können Sie diesen Code verwenden, um das aktive Element zu erkennen.

$('#my-form').submit(function(){
   var value=$(document.activeElement).val();
//Pseudocode
    if(value == 1)
    {
        Ihr Code....
    }
});

Der obige Code gibt die Schaltfläche zurück, die angeklickt wurde, als das Formular abgesendet wurde. Dieser Code kann auch nützlich sein, wenn Sie versuchen, ein Formular zu senden, während Sie auf eine Schaltfläche klicken, die nicht das Attribut "submit" hat oder indem Sie auf eine Schaltfläche außerhalb des Formulars klicken und sogar für diejenigen, bei denen der Klick ein virtuelles Formular erstellt und absendet.

P.S. Getestet auf Firefox 45 und höher, Chrome 67 und höher

Answer 4

Betreffend Ihrer Aussage:

Ich habe gesehen, dass $('[name=bttnsubmit][clicked=true]') hochgelobt wird, aber das hat in meinen Versuchen noch nicht funktioniert...

Ich fand, dass dies anderswo nicht korrekt erklärt wurde. Es ist keine automatische Sache. Sie müssen es immer noch einrichten, indem Sie das "clicked" Attribut hinzufügen, wenn eine Schaltfläche zum Absenden geklickt wird.

$("#my-form input[type=submit]").click(function () {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});
$("#my-form").submit(function () {
    var clickedSubmitValue = $("input[type=submit][clicked=true]").val();
    if (clickedSubmitValue == "1")
    {
        ...
    }
});

Ähnlich wie im Beispiel hier.