jQuery: jak uzyskać, który przycisk został kliknięty po przesłaniu formularza?

227

Mam .submit()skonfigurowane wydarzenie do przesłania formularza. Mam również wiele formularzy na stronie, ale tylko jeden tutaj dla tego przykładu. Chciałbym wiedzieć, który przycisk przesłania został kliknięty bez przypisania .click()zdarzenia do każdego z nich.

Oto konfiguracja:

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

Przykład na żywo na jsfiddle

Czy oprócz zastosowania zdarzenia .click () do każdego przycisku można ustalić, który przycisk przesłania został kliknięty?

jquery forms hawkexp
źródło

2

Ironią jest oczywiście to, że informacje te są trywialne przy ustalaniu po stronie serwera.

Neil,

5

@Neil Nie, jeśli przesyłasz formularz za pomocą $ .ajax () i serializeArray () w formularzu.

Aaron

możliwy duplikat Jak mogę uzyskać przycisk, który spowodował przesłanie ze zdarzenia przesłania formularza?

Bergi

1

Co powiesz na umieszczenie detektora na przyciskach przesyłania i przesłaniu formularza ręcznie.

JMRC

1

A może spojrzeć na serializowaną wersję danych formularza i dopasować według przycisku name?

Augustin Riedinger

235

Zadałem to samo pytanie: Jak mogę uzyskać przycisk, który spowodował przesłanie ze zdarzenia przesłania formularza?

W końcu wymyśliłem to rozwiązanie, które zadziałało całkiem nieźle:

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

W przypadku wielu formularzy może być konieczne trochę poprawienie tego, ale powinno nadal obowiązywać

myśliwy
źródło

11

+1 Dobre rozwiązanie. Możesz dodać instrukcję, która resetuje kliknięty atrybut na false w przypadku przycisków w przypadku, gdy przesłanie formularza jest obsługiwane w trybie ajax i chcesz uniknąć ponownego kliknięcia przycisku uprzednio klikniętego.

Chandu

1

Rozumiem. Dodajesz własny atrybut „kliknięcia”. Szukałem wszędzie „klikniętego” logicznego loga i nigdzie nie mogłem go znaleźć. Nigdy nie myślałem o stworzeniu takiego. Dobry pomysł!

hawkexp

9

Pamiętaj, że działa to tylko z elementami wejściowymi, a nie przyciskowymi.

Bob.at.Indigo.Health

1

Jest to niepotrzebne w Chrome z elementami przycisków. Po prostu obsługuję zdarzenie przy wysyłaniu, konstruuję obiekt FormData z formularza i zawsze zawiera on wartość klikniętego przycisku. FireFox NIE wykazuje tego zachowania i zamiast tego wcale nie wysyła wartości przycisku. Wygląda na to, że Chrome automatycznie robi coś takiego jak powyższe rozwiązanie, zapamiętując, który przycisk został kliknięty i automatycznie dołączając go do danych formularza. Oczywiście ten brak standardowych zachowań (i tak dręczenie wszystkiego w JavaScript, więc nie jestem zaskoczony) sprawia, że ta funkcja jest bezużyteczna.

Triynko

1

Rozważ również dodanie selektora „przycisk [typ = przesłanie]” (oddzielony przecinkiem), ponieważ elementy przesyłania nie muszą być tagami wejściowymi.

Kyselejsyreček

91

Odkryłem, że to zadziałało.

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

Stan
źródło

12

to rozwiązanie działa dobrze w Chrome, ale nie działa w Safari, zwróci niezdefiniowane, a nie obiekt przycisku

Pan Sun Lin

1

@Krinkle Tak kodowałem, aby pokazać najbardziej ogólny sposób. Myślę, że deweloperzy są wystarczająco inteligentni, aby zoptymalizować to do swoich upodobań.

Stan

Czystszy niż inne rozwiązania. Nadal nie znalazłem rozwiązania, które działa po naciśnięciu klawisza Enter

andrewtweber

Ta odpowiedź nie zawsze będzie działać. W rzeczywistości potrzebujesz klikniętego przycisku, a nie fokusa (ponieważ akcja fokusa nie jest akcją kliknięcia). Wybrana odpowiedź (myśliwego) jest prawidłowa.

Wasil Popow,

Mam zdarzenie kliknięcia na przyciskach przesyłania i przesyłaniu zdarzeń na ich formularzach ... to drugie wyzwala pierwsze. Użyłem tego, aby dowiedzieć się o źródle zdarzenia. W niektórych przeglądarkach kliknięcie przycisku spowoduje, że przycisk będzie skoncentrowany, w innych nic nie dostaniesz. We wszystkich testowanych przeglądarkach naciśnięcie klawisza Enter na wejściu powoduje, że wejście jest zogniskowane.

notacouch,

65

To działa dla mnie:

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

seddonym
źródło

3

To było pomocne, aby uzyskać idz activeElementzrobiłem$(document.activeElement).attr('id');

Mikołaj

9

Aby uzyskać wartość, nie musisz używać jQuery, aby uzyskać identyfikator - jeszcze prostsze jest użycie czystego Javascript:document.activeElement.id

Nick F

5

Pamiętaj, że nie działa to zgodnie z oczekiwaniami w Safari. :(

rinogo,

@rinogo: co dzieje się w Safari?

Crescent Fresh

1

W Safari document.activeElementnie ma danych wejściowych. W moim przypadku jest to modalny div (który zawiera formularz).

mgalgs

46

Po przesłaniu formularza:

document.activeElement wyświetli kliknięty przycisk Prześlij.
document.activeElement.getAttribute('value') da ci wartość tego przycisku.

Nick F.
źródło

2

Pamiętaj, że nie działa to zgodnie z oczekiwaniami w Safari. :(

rinogo,

Nie wiem co z Safari, ale na Chrome działało dobrze :) Dzięki!

Ingus

Działa w Chrome 63 i IE11

Sir Crispalot

Miałem uruchomioną dyskretną weryfikację jquery, która przechwytuje wcześniej i ustawia nieprawidłowe dane wejściowe jako activeElement zamiast przycisku.

Peheje

28

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

Po pierwsze, dla wszystkich form:

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

Kiedy to zdarzenie kliknięcia jest uruchamiane dla formularza, po prostu rejestruje docelowy cel (dostępny w obiekcie zdarzenia), aby uzyskać do niego dostęp później. Jest to dość szeroki obrys, ponieważ będzie uruchamiany za każde kliknięcie w dowolnym miejscu formularza. Komentarze dotyczące optymalizacji są mile widziane, ale podejrzewam, że nigdy nie spowoduje to zauważalnych problemów.

Następnie $('form').submit()możesz zapytać o to, co zostało ostatnio kliknięte, za pomocą czegoś takiego

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

Jonathan Camenisch
źródło

Co jeśli jest to zdarzenie przesłania formularza zamiast kliknięcia?

Tony,

1

@ Tony, przepraszam, że nie widziałem twojego pytania wcześniej. Ta odpowiedź dotyczy wyłącznie przesłanych formularzy. Klikane są również przyciski Prześlij, dzięki czemu uruchamiają zdarzenie kliknięcia.

Jonathan Camenisch 17.12.12

2

Uaktualnienie tej odpowiedzi nad odpowiedzią łowcy, ponieważ zdarzenia wysyłania formularza są uruchamiane przed zdarzeniami kliknięcia elementu potomnego. Powoduje to trudności, gdy zdarzenie przesyłania formularza jest anulowane return false, podczas gdy ta metoda działa poprawnie, ponieważ kliknięcie jest powiązane z formularzem zamiast jego elementów potomnych.

pospi

7

To nie obsługuje poprawnie przypadku, w którym formularz jest przesyłany za pomocą innego sposobu niż kliknięcie (np. Naciśnięcie Enter). Gdy formularz jest przesyłany w inny sposób, to pierwszy przycisk przesyłania wywołał zdarzenie przesyłania, a nie ostatni kliknięty przycisk.

quietmint

Brakuje średnika po, ... $(event.target))ale nie można go edytować, ponieważ zmiany muszą zawierać> 6 znaków

Hafenkranich

13

Wow, niektóre rozwiązania mogą się skomplikować! Jeśli nie masz nic przeciwko użyciu prostej globalnej, po prostu skorzystaj z faktu, że zdarzenie kliknięcia przycisku wejściowego uruchamia się jako pierwsze. Można dodatkowo przefiltrować selektor $ („input”) pod kątem 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);
      });
    });

trawnik
źródło

12

Znalazłem najlepsze rozwiązanie

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

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

Thomas Williams
źródło

Cholera, muszę sprawdzić, czy moja strona działa teraz w Safari. Dlaczego Safari zawsze musi być takie trudne. Dziękuję za to. Sprawdzę, kiedy wrócę do domu

Thomas Williams

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

Oliver Hader

To nie działa dla mnie w Safari. Kliknij przycisk nasłuchiwania na przycisku w treści wywołuje .submit w formularzu. Wewnątrz procedury obsługi $(document.activeElement).attr('id')zwrotów zwracaundefined

dyodji

7

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

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

Następnie w funkcji gotowości dodaj funkcje, aby zapisać, który 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 procedury obsługi przesyłania odczytaj ukrytą zmienną i zdecyduj na jej podstawie:

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

wmac
źródło

6

Opierając się na tym, co zrobili Stan i yann-h, ale domyślnie jest to pierwszy przycisk. 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 musisz zezwolić na enter w formularzu, po prostu odpowiedz na to, gdy przycisk jest aktywny ( tj. odpowiedź Stana). W moim przypadku chciałem pozwolić Enter na przesłanie formularza, nawet jeśli użytkownik aktualnie skupił się na polu tekstowym.

Użyłem również atrybutu „name” zamiast „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;

andrewmo
źródło

Więc jeśli przeniesiesz fokus na drugi przycisk za pomocą TAB i naciśniesz RETURN, domyślnie pojawi się pierwszy przycisk ...

FrancescoMM

5

Ten działał dla mnie

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

}

Saheb Mondal
źródło

To zasługuje na medal!

Martin Zvarík

4

Jeśli masz na myśli to, że nie dodajesz zdarzenia .click, że nie chcesz mieć osobnych modułów obsługi 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 );
}

jcane86
źródło

niezły pomysł. Czy to zadziała w przypadku dowolnej liczby formularzy na stronie?

hawkexp

@ jastrząb tak, powinno. Nie wiem, czy jest to pożądane zachowanie, ale twój kod nie przesyła formularza, więc mój też nie. Jeśli chcesz go przesłać, po prostu usuń event.preventDefaultlub zrób coś podobnego input.parents("form")[0].submit().

jcane86

A jeśli prześlesz bez kliknięcia (klawisz powrotu?), Będzie to kompletny bałagan.

FrancescoMM

4

Ponieważ nie mogę skomentować zaakceptowanej odpowiedzi, wprowadzam tutaj zmodyfikowaną wersję, która powinna uwzględniać elementy spoza formularza (tj. Dołączone do formularza za pomocą formatrybutu). Dotyczy to nowoczesnej przeglądarki: http://caniuse.com/#feat=form-attribute . closest('form') Jest użyta w niewspieranych formatrybutu

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

użytkownik3074069
źródło

To naprawdę powinna być wybrana odpowiedź. Dodałbym tylko, że reguła powinna być"button,[type=submit]"

Wil

@Wilko, ale nie wszystkie przyciski są przyciskami przesyłania, zależy to od ich typu.

ptyskju

Tak, ale przy braku <input type = "upload">], każde używane przeze mnie UA traktowało tag <button> jako wyzwalacz przesłania formularza, więc ten przypadek zostanie przechwycony. Lub autor może dodać zastrzeżenie, że wszystkie elementy zdolne do przesyłania muszą mieć właściwości [type = subm] ... jeden z pozostałych.

Wil

3

$("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

anydasa
źródło

Nie działa w przeglądarce Firefox 30 / Windows 7. Uwaga: teraz w Firefoksie jest wymagane ukryte pole, ponieważ może nie wysyłać klikniętej wartości przesłania, jeśli zostanie wysłana z komendą jquery's: this.submit () w przypadku przesłania. Martwię się tylko trochę, że $ (this) .attr ('name') może nie działać we wszystkich przeglądarkach.

user1610743,

Mam Firefox 30 / Windows 7. Mam wszystko działa idealnie.

anydasa

Pamiętaj, aby dołączyć button[type=submit]i input[type=image].

rybo111,

3

Dla mnie najlepsze rozwiązania były następujące:

$(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
źródło

3

Pracując z tą doskonałą odpowiedzią , możesz sprawdzić aktywny element (przycisk), dołączyć ukryte dane wejściowe do formularza i opcjonalnie usunąć je na końcu procedury obsługi 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 dodatkowa: Osobiście dodaję klasę form-jsdo wszystkich formularzy przesyłanych przez JavaScript.

rybo111
źródło

2

Podobna do odpowiedzi Stana, 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, musisz 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;
    ...
 }

yann-h
źródło

2

Oto rozwiązanie, z którego korzystam 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>

Rozwiń fragment kodu

vasilenicusor
źródło

1

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

Formularz przesłany dopiero po kliknięciu przycisku Prześlij.

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

return false;

w4kskl
źródło

1

Oto moje rozwiązanie:

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

Roldan
źródło

0

Stworzyłem również rozwiązanie, które działa całkiem dobrze:
używa jQuery i CSS

Najpierw stworzyłem szybką klasę CSS, którą można osadzić lub w osobnym pliku.

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

Następnie w przypadku zdarzenia kliknięcia 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, to zrobi to 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.
        }
    });

Mam nadzieję że to pomoże! Twoje zdrowie!

Jason Cidras
źródło

Pamiętaj, aby dołączyć button[type=submit]i input[type=image].

rybo111,

Powinieneś usunąć odniesienia do stylizacji i CSS - nie są one tutaj istotne. Ponadto linie, w których używasz hasClass()i removeClass()są nadmiarowe, ponieważ addClass()nie dodają dwukrotnie tej samej klasy.

rybo111

0

Możesz utworzyć typ danych wejściowych = „ukryty” jako uchwyt 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 takim przypadku formularz przekazuje wartość „1” (identyfikator przycisku). Działa to, jeśli onClick występuje przed przesłaniem (?), Czego nie jestem pewien, czy zawsze jest to prawda.

darekk
źródło

0

Prostym sposobem na rozróżnienie, który przycisk <lub przycisk <typ wejścia = „przycisk” ...> jest wciśnięty, jest sprawdzenie jego „id”:

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

Apostolos
źródło

0

Oto przykład, który używa this.form, aby uzyskać prawidłową formę, w której jest przesyłane, oraz pola danych do przechowywania ostatniego klikniętego / skupionego elementu. Owinąłem również kod wysyłania w ramach limitu czasu, aby mieć pewność, że zdarzenie kliknięcia nastąpi przed jego wykonaniem (niektórzy użytkownicy zgłaszali w komentarzach, że w Chrome czasami zdarzenie kliknięcia jest uruchamiane po przesłaniu).

Działa podczas nawigacji zarówno za pomocą klawiszy, jak i myszy / palców, nie licząc na przeglądarki, aby wysłać zdarzenie kliknięcia na klawisz RETURN (choć nie boli), dodałem moduł obsługi zdarzeń dla zdarzeń fokusa dla przycisków i pól.

Możesz dodać przyciski typu = "prześlij" do elementów, które oszczędzają się po kliknięciu.

W wersji demo ustawiłem czerwoną ramkę, aby pokazać wybrany element oraz alert pokazujący nazwę i wartość / etykietę.

Oto FIDDLE

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

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
źródło

0

Piszę tę funkcję, która mi pomaga

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

a następnie użyj

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

BabiBN
źródło

0

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

Alexandre Paulo
źródło

-1

Chcesz użyć window.event.srcElement.id w następujący sposób:

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

otrzymasz ostrzeżenie o treści: „kliknięty element to myButton.

W ulepszonym przykładzie możesz dodać window.event.srcElement do process_form_submission, a będziesz mieć odniesienie do dowolnego elementu, który wywołał proces.

Cos Callis
źródło

1

nie używaj onclick do elementów, to jest przestarzałe

Krzysztof Cygan

1

Wydaje się, że to nie działa w przypadku przycisków przesyłania, window.event.srcElement zwraca identyfikator formularza.

333 MHz

@KrzysztofCygan Czy masz jakieś źródło tego?

vard

jQuery: jak uzyskać, który przycisk został kliknięty po przesłaniu formularza?

Odpowiedzi: