jQuery: bagaimana cara mendapatkan tombol mana yang diklik pada pengiriman formulir?

227

Saya memiliki .submit()acara yang diatur untuk pengiriman formulir. Saya juga memiliki beberapa formulir di halaman, tetapi hanya satu di sini untuk contoh ini. Saya ingin tahu tombol kirim mana yang diklik tanpa menerapkan .click()acara untuk masing-masing.

Ini pengaturannya:

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

Contoh langsung di jsfiddle

Selain menerapkan acara .click () pada setiap tombol, apakah ada cara untuk menentukan tombol kirim mana yang diklik?

jquery forms hawkexp
sumber

2

Ironisnya, tentu saja informasi ini sepele untuk menentukan sisi server.

Neil

5

@Neil Tidak jika Anda mengirimkan formulir melalui $ .ajax () dan serializeArray () pada formulir.

Aaron

kemungkinan rangkap dari Bagaimana saya bisa mendapatkan tombol yang menyebabkan pengiriman dari acara pengiriman formulir?

Bergi

1

Bagaimana dengan menempatkan pendengar pada tombol kirim dan mengirimkan formulir secara manual.

JMRC

1

Bagaimana kalau melihat versi serial data formulir dan mencocokkan tombol name?

Augustin Riedinger

235

Saya mengajukan pertanyaan yang sama: Bagaimana saya bisa mendapatkan tombol yang menyebabkan pengiriman dari acara pengiriman formulir?

Saya akhirnya menemukan solusi ini dan itu bekerja dengan cukup baik:

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

Dalam kasus Anda dengan beberapa bentuk, Anda mungkin perlu sedikit men-tweak ini tetapi itu masih berlaku

pemburu
sumber

11

+1 Solusi yang bagus. Anda mungkin ingin menambahkan pernyataan yang me-reset atribut yang diklik menjadi false di seluruh tombol seandainya formulir dikirimkan ditangani dengan cara ajax dan Anda ingin menghindari tombol klik yang previsouly lagi.

Chandu

1

Oh begitu. Anda menambahkan atribut "diklik" Anda sendiri. Saya mencari boolean yang "diklik" dan tidak dapat menemukannya di mana pun. Saya tidak pernah berpikir untuk membuatnya sendiri. Ide bagus!

hawkexp

9

Ketahuilah bahwa ini hanya berfungsi dengan elemen input, bukan elemen tombol.

Bob.at.Indigo.Health

1

Ini tidak perlu di Chrome dengan elemen tombol. Saya hanya menangani acara ajukan, membuat objek FormData dari formulir, dan selalu menyertakan nilai tombol yang diklik. FireFox TIDAK menunjukkan perilaku ini, dan sebaliknya tidak mengirim nilai tombol sama sekali. Chrome tampaknya melakukan sesuatu seperti solusi di atas secara otomatis, mengingat tombol mana yang diklik dan memasukkannya ke dalam formulir data secara otomatis. Tentu saja, kurangnya perilaku standar ini (mengganggu semua yang ada dalam JavaScript, jadi saya tidak terkejut), membuat fitur ini tidak berguna.

Triynko

1

Juga, pertimbangkan untuk menambahkan pemilih "tombol [type = kirim]" (dipisahkan oleh koma) karena mengirim elemen tidak harus menjadi tag input.

Kyselejsyreček

91

Saya menemukan bahwa ini berhasil.

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

Stan
sumber

12

solusi ini bekerja dengan baik di Chrome, tetapi tidak dapat bekerja di Safari, itu akan kembali tidak terdefinisi, bukan objek tombol

Mr. Sun Lin

1

@Krinkle Saya mengkodekannya seperti itu untuk menunjukkan cara yang paling umum. Saya pikir devs cukup pintar untuk mengoptimalkannya sesuai selera mereka.

Stan

Lebih bersih dari solusi lainnya. Masih belum menemukan solusi yang berfungsi saat menekan enter

andrewtweber

Jawaban ini tidak akan selalu berhasil. Sebenarnya Anda perlu tombol yang diklik, bukan fokus (karena tindakan fokus bukan tindakan klik). Jawaban yang dipilih (dari pemburu) adalah yang benar.

Vasil Popov

Saya memiliki acara klik pada tombol kirim dan kirimkan acara di formulir mereka ... yang terakhir memicu yang pertama. Saya menggunakan ini untuk mencari tahu sumber acara. Di beberapa browser mengklik tombol Anda akan mendapatkan tombol sebagai fokus, di browser lain Anda tidak akan mendapatkan apa-apa. Di semua browser yang saya uji, menekan enter saat input tetap menjaga input tetap fokus.

notacouch

65

Ini bekerja untuk saya:

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

seddonym
sumber

3

Ini sangat membantu, untuk mendapatkan idsatu activeElement, saya lakukan$(document.activeElement).attr('id');

Mikolaj

9

Untuk apa nilainya, Anda tidak perlu menggunakan jQuery untuk mendapatkan id - itu bahkan lebih mudah untuk menggunakan Javascript murni:document.activeElement.id

Nick F

5

Perhatikan bahwa ini tampaknya tidak berfungsi seperti yang diharapkan di Safari. :(

rinogo

@rinogo: apa yang terjadi di Safari?

Crescent Fresh

1

Di Safari document.activeElementbukan input. Dalam kasus saya ini adalah modal div (yang berisi formulir).

mgalgs

46

Ketika formulir dikirimkan:

document.activeElement akan memberi Anda tombol kirim yang diklik.
document.activeElement.getAttribute('value') akan memberi Anda nilai tombol itu.

Nick F
sumber

2

Perhatikan bahwa ini tampaknya tidak berfungsi seperti yang diharapkan di Safari. :(

rinogo

Saya tidak tahu bagaimana dengan Safari tetapi di Chrome berfungsi dengan baik :) Terima kasih!

Ingus

Bekerja di Chrome 63 dan IE11

Sir Crispalot

Saya menjalankan validasi jquery jinak, dan itu memotong sebelum ini dan menetapkan input yang tidak valid sebagai activeElement alih-alih tombol.

Peheje

28

Inilah pendekatan yang tampaknya lebih bersih untuk tujuan saya.

Pertama, untuk semua dan semua bentuk:

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

Ketika acara klik ini diaktifkan untuk formulir, itu hanya merekam target yang berasal (tersedia di objek acara) untuk diakses nanti. Ini adalah langkah yang cukup luas, karena akan diaktifkan untuk klik di mana saja pada formulir. Komentar pengoptimalan diterima, tetapi saya menduga itu tidak akan pernah menyebabkan masalah yang nyata.

Kemudian, di $('form').submit(), Anda dapat menanyakan apa yang terakhir diklik, dengan sesuatu seperti

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

Jonathan Camenisch
sumber

Bagaimana jika ini adalah formulir ajukan acara alih-alih klik?

Tony

1

@Tony, maaf saya tidak melihat pertanyaan Anda lebih cepat. Jawaban ini sepenuhnya berkaitan dengan pengiriman formulir. Tombol-tombol kirim juga bisa diklik, dan karenanya mereka memunculkan acara klik.

Jonathan Camenisch

2

Memvotasikan jawaban ini daripada jawaban pemburu karena acara pengiriman formulir dipecat sebelum acara klik elemen anak. Ini menyebabkan kesulitan ketika acara pengiriman formulir Anda dibatalkan return false, sedangkan metode ini berfungsi dengan benar karena klik terikat pada formulir alih-alih anak-anaknya.

pospi

7

Ini gagal menangani dengan benar kasus di mana formulir dikirimkan dengan cara lain selain klik (misalnya, menekan Enter). Ketika formulir dikirimkan melalui cara lain, itu adalah tombol kirim pertama yang memicu acara kirim, bukan yang terakhir diklik.

quietmint

Ada titik koma yang hilang setelah ... $(event.target))tetapi tidak dapat diedit karena hasil edit harus> 6 karakter

Hafenkranich

13

Wow, beberapa solusi bisa jadi rumit! Jika Anda tidak keberatan menggunakan global yang sederhana, manfaatkan fakta bahwa acara klik tombol input akan menyala terlebih dahulu. Seseorang dapat memfilter pemilih $ ('input') lebih lanjut untuk salah satu dari banyak formulir dengan menggunakan $ ('# input myForm').

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

pembuat undang-undang
sumber

12

Saya telah menemukan solusi terbaiknya

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

Ini tidak hanya bekerja pada input, tetapi juga bekerja pada tag tombol. Juga mendapat id dari tombol.

Thomas Williams
sumber

Sial, saya harus melihat apakah halaman saya berfungsi di Safari sekarang. Mengapa Safari selalu harus sangat sulit. Terima kasih untuk itu. Pergi untuk memeriksa ketika saya sampai di rumah

Thomas Williams

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

Oliver Hader

Ini tidak berfungsi untuk saya di Safari. Klik pendengar pada Tombol dalam panggilan tubuh. Kirimkan formulir. Di dalam mengirimkan handler $(document.activeElement).attr('id')kembaliundefined

dyodji

7

Solusi lain yang mungkin adalah menambahkan bidang tersembunyi di formulir Anda:

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

Kemudian di fungsi siap tambahkan fungsi untuk merekam tombol apa yang ditekan:

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

Sekarang di form submission handler baca variabel tersembunyi dan putuskan berdasarkan hal itu:

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

wmac
sumber

6

Membangun apa yang Stan dan yann-h lakukan tetapi yang ini default ke tombol pertama. Keindahan dari pendekatan keseluruhan ini adalah ia mengambil klik dan tombol enter (bahkan jika fokusnya tidak pada tombol. Jika Anda perlu mengizinkan masuk dalam formulir, maka cukup tanggapi ini ketika sebuah tombol terfokus ( yaitu jawaban Stan) .Dalam kasus saya, saya ingin mengizinkan masuk untuk mengirimkan formulir bahkan jika fokus pengguna saat ini adalah pada kotak teks.

Saya juga menggunakan atribut 'nama' daripada 'id' tetapi ini adalah pendekatan yang sama.

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

andrewmo
sumber

Jadi jika Anda memindahkan fokus ke tombol kedua dengan TAB dan tekan RETURN itu akan default ke tombol pertama ...

FrancescoMM

5

Yang ini berhasil untuk saya

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

}

Saheb Mondal
sumber

Ini layak mendapatkan medali!

Martin Zvarík

4

Jika yang Anda maksud dengan tidak menambahkan acara .click adalah bahwa Anda tidak ingin memiliki penangan terpisah untuk acara tersebut, Anda dapat menangani semua klik (kirim) dalam satu fungsi:

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

bukan ide yang buruk. Apakah ini berfungsi untuk sejumlah formulir di halaman?

hawkexp

@ ya ampun, seharusnya. Saya tidak tahu apakah ini perilaku yang diinginkan, tetapi kode Anda sebenarnya tidak mengirimkan formulir, jadi saya juga tidak. Jika Anda ingin mengirimkannya cukup hapus event.preventDefaultatau lakukan sesuatu seperti input.parents("form")[0].submit().

jcane86

Dan jika Anda mengirim tanpa klik (kunci kembali?) Itu akan menjadi kekacauan total ..

FrancescoMM

4

Karena saya tidak dapat mengomentari jawaban yang diterima, saya membawa versi modifikasi yang harus mempertimbangkan unsur-unsur akun yang berada di luar formulir (yaitu: dilampirkan ke formulir menggunakan formatribut). Ini untuk browser modern: http://caniuse.com/#feat=form-attribute . Ini closest('form') digunakan sebagai fallback untuk formatribut yang tidak didukung

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

pengguna3074069
sumber

Ini benar-benar harus menjadi jawaban yang dipilih. Saya hanya akan menambahkan bahwa aturannya harus"button,[type=submit]"

Wil

@Tapi tetapi tidak semua tombol mengirim tombol, tergantung pada tipenya.

ptyskju

Ya, tetapi dengan tidak adanya <input type = "submit">], setiap UA yang pernah saya gunakan telah memperlakukan tag <button> sebagai pemicu form form, jadi ini akan menangkap kasus itu. Atau penulis dapat menambahkan peringatan bahwa semua elemen yang bisa mengirim harus memiliki properti [type = submit] ... salah satunya.

Wil

3

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

tambahkan bidang tersembunyi

anydasa
sumber

Tidak berfungsi di Firefox 30 / Windows 7. Catatan: bidang tersembunyi diperlukan sekarang di firefox, karena mungkin tidak mengirim nilai kirim yang diklik jika dikirim dengan jquery: this.submit () dalam acara saat-kirim. Saya hanya sedikit khawatir bahwa $ (ini) .attr ('name') mungkin tidak berfungsi di semua browser.

user1610743

Saya Memiliki Firefox 30 / Windows 7. Saya memiliki semuanya berfungsi dengan baik.

anydasa

Ingatlah untuk memasukkan button[type=submit]dan input[type=image].

rybo111

3

Bagi saya, solusi terbaik adalah ini:

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

3

Bekerja dengan jawaban yang luar biasa ini , Anda dapat memeriksa elemen aktif (tombol), menambahkan input tersembunyi ke formulir, dan secara opsional menghapusnya di akhir submit handler.

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

Catatan: Saya pribadi menambahkan kelas form-jspada semua formulir yang dikirimkan melalui JavaScript.

rybo111
sumber

2

Mirip dengan jawaban Stan tetapi:

jika Anda memiliki lebih dari satu tombol, Anda harus mendapatkan hanya tombol pertama => [0]
jika formulir dapat dikirimkan dengan tombol enter, Anda harus mengelola default => 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
sumber

2

Ini adalah solusi yang digunakan oleh saya dan bekerja dengan sangat baik:

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

Luaskan cuplikan

vasilenicusor
sumber

1

Ini membantu saya https://stackoverflow.com/a/17805011/1029257

Formulir dikirimkan hanya setelah tombol kirim diklik.

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

return false;

w4kskl
sumber

1

Ini solusinya:

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

Roldan
sumber

0

Saya juga membuat solusi, dan ini bekerja dengan sangat baik:
Menggunakan jQuery dan CSS

Pertama, saya membuat kelas CSS cepat, ini bisa tertanam atau dalam file terpisah.

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

Selanjutnya, Pada acara klik tombol dalam formulir, tambahkan kelas CSS ke tombol. Jika tombol sudah memiliki kelas CSS, hapuslah. (Kami tidak ingin dua kelas CSS [Untuk berjaga-jaga]).

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

Sekarang, uji tombol untuk melihat itu memiliki kelas CSS, jika tombol yang diuji tidak memiliki CSS, maka tombol lainnya akan.

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

Semoga ini membantu! Bersulang!

Jason Cidras
sumber

Ingatlah untuk memasukkan button[type=submit]dan input[type=image].

rybo111

Anda harus menghapus referensi gaya dan CSS - mereka tidak relevan di sini. Juga, garis tempat Anda menggunakan hasClass()dan removeClass()berlebihan, karena addClass()tidak akan menambah kelas yang sama dua kali.

rybo111

0

Anda dapat membuat input type = "hidden" sebagai penampung untuk informasi id tombol.

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

Dalam hal ini formulir meneruskan nilai "1" (id dari tombol Anda) saat mengirim. Ini berfungsi jika onClick terjadi sebelum mengirimkan (?), Apa yang saya tidak yakin apakah itu selalu benar.

darekk
sumber

0

Cara mudah untuk membedakan <button> atau <input type = "button" ...> yang ditekan, adalah dengan memeriksa 'id' mereka:

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

Apostolos
sumber

0

Berikut adalah contoh, yang menggunakan formulir ini.untuk mendapatkan formulir yang benar dengan pengirimannya, dan bidang data untuk menyimpan elemen yang terakhir diklik / fokus. Saya juga memasukkan kode kirim di dalam batas waktu untuk memastikan acara klik terjadi sebelum dijalankan (beberapa pengguna melaporkan dalam komentar bahwa di Chrome kadang-kadang acara klik dipecat setelah pengiriman).

Bekerja ketika menavigasi baik dengan tombol dan dengan mouse / jari tanpa mengandalkan browser untuk mengirim acara klik pada tombol RETURN (meskipun tidak ada salahnya), saya menambahkan pengendali acara untuk acara fokus untuk tombol dan bidang.

Anda dapat menambahkan tombol ketik = "kirim" ke item yang menyelamatkan diri saat diklik.

Dalam demo saya menetapkan batas merah untuk menampilkan item yang dipilih dan peringatan yang menunjukkan nama dan nilai / label.

Ini FIDDLE

Dan ini adalah kode (yang sama):

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
sumber

0

Saya menulis fungsi ini yang membantu saya

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

lalu gunakan

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

BabiBN
sumber

0

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

Alexandre Paulo
sumber

-1

Anda ingin menggunakan window.event.srcElement.id seperti ini:

function clickTheButton() {

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

}

untuk tombol yang terlihat seperti:

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

Anda akan mendapatkan peringatan yang berbunyi: "item yang diklik adalah tombol myButton.

Dalam contoh Anda yang ditingkatkan, Anda dapat menambahkan window.event.srcElement ke process_form_submission dan Anda akan memiliki referensi ke elemen mana saja yang menjalankan proses.

Cos Callis
sumber

1

jangan gunakan onclick untuk elemen, itu sudah usang

Krzysztof Cygan

1

Tampaknya ini tidak berfungsi untuk mengirimkan tombol, window.event.srcElement mengembalikan id formulir.

333Mhz

@KrzysztofCygan Apakah Anda punya sumber itu?

vard

jQuery: bagaimana cara mendapatkan tombol mana yang diklik pada pengiriman formulir?

Jawaban: