jQuery: jak uzyskać, który przycisk został kliknięty podczas przesyłania formularza?

Odkryłem, że to działa.

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

To działa dla mnie:

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

Gdy formularz jest złożony:

• document.activeElement wyświetli przycisk submit, który został kliknięty.

• document.activeElement.getAttribute('value') da ci wartość tego przycisku.

Oto podejście, które wydaje się czystsze dla moich celów.

Po pierwsze, dla dowolnych i wszystkich form:

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

Gdy to zdarzenie click zostanie wywołane dla formularza, po prostu zapisuje obiekt docelowy (dostępny w obiekcie event), który będzie później dostępny. Jest to dość szeroki pociągnięcie, ponieważ odpali każde kliknięcie w dowolnym miejscu formularza. Komentarze optymalizacyjne są mile widziane, ale podejrzewam, że nigdy nie spowoduje to zauważalnych problemów.

Następnie w $('Forma').submit (), możesz zapytać co było ostatnio kliknięty, z czymś w rodzaju

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

Wow, niektóre rozwiązania mogą się skomplikować! Jeśli nie masz nic przeciwko użyciu prostego globalnego, po prostu skorzystaj z faktu, że przycisk input click event zostanie wywołany jako pierwszy. Można dodatkowo filtrować selektor $('input') dla jednej z wielu form używając $('#myform input').

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

Innym możliwym rozwiązaniem jest dodanie ukrytego pola w formularzu:

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

Następnie w funkcji ready Dodaj funkcje, aby zapisać, jaki klawisz został naciśnięty:

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

Teraz w formularzu submition handler odczytaj ukrytą zmienną i zdecyduj na jej podstawie:

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

Bazując na tym, co zrobili Stan i yann-h, ale ten domyślnie jest pierwszym przyciskiem. Piękno tego ogólnego podejścia polega na tym, że podnosi zarówno kliknięcie, jak i klawisz enter (nawet jeśli fokus nie był na przycisku. Jeśli chcesz zezwolić enter w formularzu, po prostu odpowiedz na to, gdy przycisk jest skupiony (tj. odpowiedź Stana). W moim przypadku chciałem zezwolić enter na przesłanie formularza, nawet jeśli użytkownik koncentruje się na polu tekstowym.

Używałem też atrybutu 'name' raczej niż "id", ale jest to to samo podejście.

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

Znalazłem najlepsze rozwiązanie

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

Działa to nie tylko na wejściach, ale także na znacznikach przycisków. Otrzymuje również identyfikator przycisku.

Jeśli co masz na myśli nie dodając a .Zdarzenie click polega na tym, że nie chcesz mieć osobnych programów obsługi dla tych zdarzeń, możesz obsłużyć wszystkie Kliknięcia (przesłania) w jednej funkcji:

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

This one worked for me

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

}

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

Dodaj ukryte pole

Dla mnie najlepsze rozwiązania były takie:

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

});

Pracując z tą doskonałą odpowiedzią , Możesz sprawdzić aktywny element (przycisk), dodać ukryte dane wejściowe do formularza i opcjonalnie usunąć je na końcu procedury przesyłania.

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

Uwaga na marginesie: ja osobiście dodaję klasę form-js do wszystkich formularzy, które są przesyłane przez JavaScript.

Podobne do Stan answer ale:

• Jeśli masz więcej niż jeden przycisk, musisz uzyskać tylko pierwszy przycisk = > [0]
• Jeśli formularz można przesłać za pomocą klawisza enter, należy zarządzać domyślnym = > myDefaultButtonId

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

Jest to rozwiązanie stosowane przeze mnie i działa bardzo dobrze:

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

Ponieważ nie mogę skomentować zaakceptowanej odpowiedzi, przynoszę tutaj zmodyfikowaną wersję, która powinna uwzględniać elementy spoza formularza(tj.: dołączone do formularza za pomocą atrybutu form). To jest dla nowoczesnej przeglądarki: http://caniuse.com/#feat=form-attribute . Atrybut closest('form') jest używany jako alternatywa dla nieobsługiwanego atrybutu form

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

Pomogło mi https://stackoverflow.com/a/17805011/1029257

Formularz przesłany dopiero po kliknięciu przycisku submit.

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

return false;

Też zrobiłem rozwiązanie i działa całkiem dobrze:
Używa jQuery i CSS

Po pierwsze, zrobiłem szybką klasę CSS, może to być osadzone lub w oddzielnym pliku.

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

Następnie po kliknięciu przycisku w formularzu Dodaj klasę CSS do przycisku. Jeśli przycisk ma już klasę CSS, usuń ją. (Nie chcemy dwóch klas CSS [na wszelki wypadek]).

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

Teraz przetestuj przycisk, aby zobaczyć, że ma klasę CSS, jeśli testowany przycisk nie ma CSS, a następnie drugi przycisk.

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

Możesz utworzyć input type = "hidden" jako uchwyt dla informacji o identyfikatorze przycisku.

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

W tym przypadku formularz przekazuje wartość " 1 " (id twojego przycisku) przy wysyłaniu. To działa, jeśli onClick wystąpi przed submit (?), co nie jestem pewien, czy zawsze jest prawdą.

Prosty sposób na odróżnienie lub jest wciśnięty, jest przez sprawdzenie ich 'id':

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

Oto próbka, która używa tego.formularz, aby uzyskać poprawny formularz, w którym znajduje się submit, oraz pola danych do przechowywania ostatnio klikniętego/skupionego elementu. Zawinąłem również kod przesłania w limicie czasu, aby upewnić się, że zdarzenia kliknięcia zdarzają się przed jego wykonaniem(niektórzy użytkownicy zgłaszali w komentarzach, że w Chrome czasami Zdarzenie kliknięcia jest wywoływane po przesłaniu).

Działa podczas nawigacji zarówno za pomocą klawiszy, jak i myszy / palców bez liczenia, że przeglądarki wysyłają Zdarzenie kliknięcia na klawiszu RETURN (nie boli chociaż), dodałem obsługę zdarzeń dla zdarzeń ostrości dla Przycisków i pól.

Możesz dodać przyciski type= "submit"do elementów, które zapisują się po kliknięciu.

W demo ustawiłem czerwoną ramkę, aby pokazać wybrany element i alert, który pokazuje nazwę i wartość / Etykietę.

Oto skrzypce

A oto (ten sam) kod:

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

ATRAPA 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}

Chcesz użyć window.event.srcElement.id Tak:

function clickTheButton() {

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

}

Dla przycisku, który wygląda następująco:

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

Zostanie wyświetlony komunikat o treści: "kliknięty element to myButton.

W ulepszonym przykładzie możesz dodać okno.wydarzenie.srcElement to process_form_submission and you will have a reference to whatever element called the process.