jQuery: วิธีการรับปุ่มที่ถูกคลิกเมื่อส่งแบบฟอร์ม?

227

ฉันมี .submit()กิจกรรมที่ตั้งค่าสำหรับการส่งแบบฟอร์ม ฉันยังมีหลายรูปแบบในหน้า แต่เพียงหนึ่งที่นี่สำหรับตัวอย่างนี้ ฉันต้องการทราบว่าคลิกปุ่มส่งใดโดยไม่ใช้.click()แต่ละเหตุการณ์

นี่คือการตั้งค่า:

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

ตัวอย่างสดบน jsfiddle

นอกเหนือจากการใช้เหตุการณ์คลิก () กับแต่ละปุ่มแล้วจะมีวิธีพิจารณาว่าปุ่มที่ส่งถูกคลิกหรือไม่

jquery forms

— hawkexp
แหล่งที่มา

2

การประชดแน่นอนว่าข้อมูลนี้มีความสำคัญต่อการกำหนดฝั่งเซิร์ฟเวอร์

— Neil

5

@Neil ไม่ได้หากคุณกำลังส่งแบบฟอร์มผ่านทาง $ .ajax () และ serializeArray () ในแบบฟอร์ม

— แอรอน

ความเป็นไปได้ที่ซ้ำกันของฉันจะรับปุ่มที่ทำให้เกิดการส่งจากเหตุการณ์ส่งแบบฟอร์มได้อย่างไร

— Bergi

1

วิธีการเกี่ยวกับการวางฟังบนปุ่มส่งและส่งแบบฟอร์มด้วยตนเอง

— JMRC

1

วิธีการเกี่ยวกับการดูข้อมูลในแบบฟอร์มต่อเนื่องและจับคู่กับปุ่มname?

— Augustin Riedinger

235

ฉันถามคำถามเดียวกันนี้: ฉันจะรับปุ่มที่ทำให้เกิดการส่งจากเหตุการณ์ส่งแบบฟอร์มได้อย่างไร

ฉันลงเอยด้วยวิธีนี้และใช้งานได้ดี:

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

ในกรณีของคุณที่มีหลายรูปแบบคุณอาจต้องปรับแต่งนี้เล็กน้อย แต่ก็ยังควรใช้

— ผู้ล่า
แหล่งที่มา

11

+1 ทางออกที่ดี คุณอาจต้องการเพิ่มคำสั่งที่รีเซ็ตแอททริบิวต์ที่คลิกไปเป็นเท็จทั่วทั้งปุ่มในกรณีที่การส่งแบบฟอร์มนั้นได้รับการจัดการด้วยวิธี ajax และคุณต้องการหลีกเลี่ยงการคลิกที่ปุ่มล่วงหน้าอีกครั้ง

— Chandu

1

อ้อเข้าใจแล้ว. คุณกำลังเพิ่มคุณสมบัติ "คลิก" ของคุณเอง ฉันมองหาบูลีนแบบ "คลิกแล้ว" และไม่สามารถหาได้ทุกที่ ฉันไม่เคยคิดที่จะทำมันด้วยตัวเอง ความคิดที่ดี!

— hawkexp

9

โปรดทราบว่าสิ่งนี้ใช้ได้กับองค์ประกอบอินพุตเท่านั้นไม่ใช่องค์ประกอบของปุ่ม

— Bob.at.Indigo.Health

1

สิ่งนี้ไม่จำเป็นใน Chrome ที่มีองค์ประกอบปุ่ม ฉันจัดการเหตุการณ์ส่งเมื่อสร้างวัตถุ FormData จากแบบฟอร์มและมันจะรวมถึงค่าของปุ่มที่คลิก FireFox ไม่แสดงพฤติกรรมนี้และจะไม่ส่งค่าปุ่มเลย Chrome ดูเหมือนว่าจะทำสิ่งต่าง ๆ เช่นวิธีแก้ปัญหาข้างต้นโดยอัตโนมัติจดจำว่ามีการคลิกปุ่มใดและรวมไว้ในข้อมูลแบบฟอร์มโดยอัตโนมัติ แน่นอนว่าการขาดพฤติกรรมมาตรฐานนี้ (ทำให้เกิดปัญหาทุกอย่างใน JavaScript ต่อไปดังนั้นฉันจึงไม่แปลกใจ) ทำให้คุณลักษณะนี้ไร้ประโยชน์

— Triynko

1

นอกจากนี้ให้พิจารณาเพิ่มปุ่มตัวเลือก "type = submit]" (คั่นด้วยเครื่องหมายจุลภาค) เนื่องจากองค์ประกอบการส่งไม่จำเป็นต้องเป็นแท็กอินพุต

— Kyselejsyreček

91

ฉันพบว่าสิ่งนี้ใช้ได้ผล

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

— สแตน
แหล่งที่มา

12

โซลูชันนี้ทำงานได้ดีบน Chrome แต่ไม่สามารถทำงานกับ Safari ได้มันจะกลับมาไม่ได้กำหนดไม่ใช่วัตถุปุ่ม

— Mr. Sun Lin

1

@ กระพริบตาฉันเขียนมันเหมือนที่จะแสดงวิธีที่ทั่วไปมากที่สุดที่เป็นไปได้ ฉันคิดว่า devs ฉลาดพอที่จะปรับให้เหมาะกับรสนิยมของพวกเขา

— สแตน

สะอาดกว่าโซลูชันอื่น ๆ ยังไม่พบวิธีแก้ปัญหาที่ใช้งานได้เมื่อกด Enter

— andrewtweber

คำตอบนี้จะไม่ทำงานเสมอ จริงๆแล้วคุณต้องการปุ่มที่ถูกคลิกไม่ใช่การโฟกัส (เนื่องจากการดำเนินการโฟกัสไม่ใช่การคลิก) คำตอบที่เลือก (ของนักล่า) เป็นคำตอบที่ถูกต้อง

— Vasil Popov

ฉันมีเหตุการณ์คลิกที่ปุ่มส่งและส่งกิจกรรมในรูปแบบของพวกเขา ... ซึ่งเป็นตัวกระตุ้นเหตุการณ์ในอดีต ฉันใช้สิ่งนี้เพื่อหาที่มาของเหตุการณ์ ในบางเบราว์เซอร์คลิกที่ปุ่มคุณจะได้รับปุ่มที่เน้นในอื่น ๆ ที่คุณจะได้รับอะไร ในทุกเบราว์เซอร์ที่ฉันทดสอบการกดปุ่ม Enter ในขณะที่อินพุตจะยังคงโฟกัสอยู่

— notacouch

65

สิ่งนี้ใช้ได้กับฉัน:

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

— seddonym
แหล่งที่มา

3

สิ่งนี้มีประโยชน์เพื่อให้ได้idของactiveElementฉัน$(document.activeElement).attr('id');

— Mikolaj

9

สำหรับสิ่งที่คุ้มค่าคุณไม่จำเป็นต้องใช้ jQuery เพื่อรับรหัส - มันง่ายยิ่งขึ้นในการใช้ Javascript บริสุทธิ์:document.activeElement.id

— Nick F

5

โปรดทราบว่านี่จะไม่ทำงานตามที่คาดไว้ใน Safari :(

— rinogo

@rinogo: เกิดอะไรขึ้นกับ Safari?

— Crescent Fresh

1

ใน Safari document.activeElementไม่ใช่อินพุต ในกรณีของฉันมันเป็นคำกริยา div (ซึ่งมีแบบฟอร์ม)

— mgalgs

46

เมื่อส่งแบบฟอร์ม:

document.activeElement จะให้ปุ่มส่งที่คุณคลิก
document.activeElement.getAttribute('value') จะให้คุณค่ากับปุ่มนั้น

— นิคเอฟ
แหล่งที่มา

2

โปรดทราบว่านี่จะไม่ทำงานตามที่คาดไว้ใน Safari :(

— rinogo

ฉันไม่ทราบวิธีการเกี่ยวกับ Safari แต่ใน Chrome ทำงานได้ดี :) ขอบคุณ!

— Ingus

ใช้งานได้ใน Chrome 63 และ IE11

— Sir Crispalot

ฉันมี jQuery ตรวจสอบไม่สร้างความรำคาญและการสกัดกั้นก่อนหน้านี้และตั้งค่าการป้อนข้อมูลที่ไม่ถูกต้องเป็น activeElement แทนที่จะเป็นปุ่ม

— Peheje

28

นี่คือวิธีที่ดูเหมือนจะสะอาดกว่าสำหรับวัตถุประสงค์ของฉัน

ครั้งแรกสำหรับทุกรูปแบบ:

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

เมื่อเหตุการณ์การคลิกนี้เริ่มทำงานสำหรับฟอร์มมันจะบันทึกเป้าหมายต้นทาง (พร้อมใช้งานในวัตถุเหตุการณ์) เพื่อเข้าถึงในภายหลัง นี่เป็นจังหวะที่ค่อนข้างกว้างเนื่องจากมันจะทำงานสำหรับการคลิกที่ใดก็ได้ในแบบฟอร์ม ยินดีต้อนรับความคิดเห็นการเพิ่มประสิทธิภาพ แต่ฉันคิดว่ามันจะไม่ทำให้เกิดปัญหาที่เห็นได้ชัด

จากนั้น$('form').submit()คุณสามารถสอบถามสิ่งที่ได้รับการคลิกครั้งสุดท้ายด้วยสิ่งที่ต้องการ

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

— Jonathan Camenisch
แหล่งที่มา

จะเกิดอะไรขึ้นถ้านี่เป็นเหตุการณ์ส่งแบบฟอร์มแทนที่จะคลิก

— โทนี

1

@ โทนี่ขอโทษฉันไม่เห็นคำถามของคุณเร็วกว่านี้ คำตอบนี้เป็นเรื่องเกี่ยวกับการส่งแบบฟอร์มทั้งหมด ปุ่มส่งก็ถูกคลิกเช่นกันและทำให้พวกเขาเริ่มต้นเหตุการณ์การคลิก

— Jonathan Camenisch

2

การถอนคำตอบนี้เหนือคำตอบของนักล่าเนื่องจากมีการส่งเหตุการณ์ของแบบฟอร์มก่อนที่จะมีการคลิกองค์ประกอบย่อย ซึ่งทำให้เกิดปัญหาเมื่อเหตุการณ์การส่งแบบฟอร์มของคุณถูกยกเลิกreturn falseในขณะที่วิธีนี้ทำงานได้อย่างถูกต้องเนื่องจากการคลิกถูกผูกไว้กับแบบฟอร์มแทนที่จะเป็นแบบลูก

— pospi

7

สิ่งนี้ล้มเหลวในการจัดการกรณีและปัญหาที่ฟอร์มถูกส่งโดยวิธีการอื่นที่ไม่ใช่การคลิก (เช่นการกด Enter) เมื่อมีการส่งแบบฟอร์มผ่านวิธีการอื่น ๆ มันเป็นปุ่มส่งแรกที่ทริกเกอร์เหตุการณ์ส่งไม่ใช่คลิกครั้งสุดท้าย

— quietmint

มีเซมิโคลอนหายไปหลังจาก... $(event.target))แต่ไม่สามารถแก้ไขได้เนื่องจากการแก้ไขจะต้อง> 6 chars

— Hafenkranich

13

ว้าวโซลูชันบางอย่างอาจซับซ้อน! หากคุณไม่สนใจการใช้งานโกลบอลอย่างง่ายเพียงใช้ประโยชน์จากความจริงที่ว่าเหตุการณ์การคลิกปุ่มอินพุตเริ่มต้นขึ้นก่อน เราสามารถกรองตัวเลือก $ ('อินพุต') สำหรับหนึ่งในหลายรูปแบบโดยใช้ $ ('# 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);
      });
    });

— lawnbowler
แหล่งที่มา

12

ฉันได้พบทางออกที่ดีที่สุดคือ

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

สิ่งนี้ไม่เพียงทำงานได้กับอินพุตเท่านั้น แต่ยังใช้งานได้บนแท็กปุ่ม นอกจากนี้ยังได้รับรหัสของปุ่ม

— โทมัสวิลเลียมส์
แหล่งที่มา

ประณามฉันต้องดูว่าหน้าของฉันทำงานบน Safari ได้หรือไม่ ทำไม Safari จึงต้องลำบากอยู่เสมอ ขอบคุณสำหรับสิ่งนั้น จะตรวจสอบเมื่อฉันกลับถึงบ้าน

— โทมัสวิลเลียมส์

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

— Oliver Hader

สิ่งนี้ไม่ทำงานสำหรับฉันใน Safari คลิกฟังบนปุ่มในร่างกายโทร. ส่งบนแบบฟอร์ม ภายในตัวส่งการส่ง$(document.activeElement).attr('id')คืนundefined

— dyodji

7

อีกวิธีที่เป็นไปได้คือการเพิ่มเขตข้อมูลที่ซ่อนอยู่ในแบบฟอร์มของคุณ:

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

จากนั้นในฟังก์ชั่นพร้อมเพิ่มฟังก์ชั่นในการบันทึกสิ่งที่กดปุ่ม:

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

ตอนนี้ในตัวจัดการการส่งแบบฟอร์มอ่านตัวแปรที่ซ่อนอยู่และตัดสินใจตาม:

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

— wmac
แหล่งที่มา

6

การสร้างสิ่งที่ Stan และ yann-h ทำ แต่สิ่งนี้เริ่มต้นที่ปุ่มแรก ความสวยงามของวิธีการโดยรวมนี้คือการเลือกทั้งการคลิกและปุ่ม Enter (แม้ว่าการโฟกัสไม่ได้อยู่ที่ปุ่มถ้าคุณต้องการอนุญาตให้ป้อนในแบบฟอร์มให้ตอบกลับเมื่อปุ่มถูกโฟกัส ( เช่นคำตอบของ Stan) ในกรณีของฉันฉันต้องการอนุญาตให้ป้อนเพื่อส่งแบบฟอร์มแม้ว่าโฟกัสปัจจุบันของผู้ใช้จะอยู่ในกล่องข้อความ

ฉันใช้แอตทริบิวต์ 'name' แทน 'id' แต่นี่เป็นวิธีการเดียวกัน

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

— andrewmo
แหล่งที่มา

ดังนั้นถ้าคุณย้ายโฟกัสไปที่ปุ่มที่สองด้วย TAB และกด RETURN มันจะเริ่มต้นที่ปุ่มแรก ...

— FrancescoMM

5

อันนี้ใช้ได้สำหรับฉัน

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

}

— Saheb Mondal
แหล่งที่มา

สมควรได้รับเหรียญนี้!

— Martin Zvarík

4

หากสิ่งที่คุณหมายถึงโดยไม่เพิ่มกิจกรรม. คลิกคือคุณไม่ต้องการแยกตัวจัดการเหตุการณ์เหล่านั้นคุณสามารถจัดการการคลิกทั้งหมด (ส่ง) ในฟังก์ชั่นเดียว:

$(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
แหล่งที่มา

ไม่ใช่ความคิดที่เลว สิ่งนี้จะใช้กับรูปแบบจำนวนเท่าใดก็ได้บนหน้าเว็บ?

— hawkexp

@ เหยี่ยวใช่มันควร ฉันไม่รู้ว่านี่เป็นพฤติกรรมที่ต้องการหรือไม่ แต่รหัสของคุณไม่ได้ส่งแบบฟอร์มจริง หากคุณไม่ต้องการที่จะส่งมันก็ลบหรือทำสิ่งที่ชอบevent.preventDefault input.parents("form")[0].submit()

— jcane86

และถ้าคุณส่งโดยไม่ต้องคลิก (คีย์คืน) มันจะยุ่งเหยิงทั้งหมด ..

— FrancescoMM

4

เนื่องจากฉันไม่สามารถแสดงความคิดเห็นกับคำตอบที่ยอมรับได้ฉันนำรุ่นที่ปรับเปลี่ยนมาซึ่งควรคำนึงถึงองค์ประกอบของบัญชีที่อยู่นอกฟอร์ม (เช่น: แนบกับฟอร์มโดยใช้formแอตทริบิวต์) นี้เป็นเบราว์เซอร์ที่ทันสมัย: http://caniuse.com/#feat=form-attribute closest('form') จะใช้เป็นทางเลือกสำหรับผู้ที่ไม่สนับสนุน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]');
})

— user3074069
แหล่งที่มา

นี่ควรเป็นคำตอบที่เลือก ฉันจะเพิ่มว่ากฎควรเป็น"button,[type=submit]"

— Wil

@ จะไม่ส่งปุ่มทั้งหมด แต่ขึ้นอยู่กับชนิดของปุ่ม

— ptyskju

ใช่ แต่หากไม่มี <input type = "submit">] ทุก UA ที่ฉันเคยใช้จะถือว่าแท็ก <button> เป็นทริกเกอร์การส่งแบบฟอร์มดังนั้นสิ่งนี้จะเกิดขึ้น หรือผู้แต่งสามารถเพิ่มข้อแม้ที่องค์ประกอบความสามารถในการส่งทั้งหมดจะต้องมีคุณสมบัติ [type = submit] ... หนึ่งในองค์ประกอบอื่น ๆ

— วิล

3

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

เพิ่มเขตข้อมูลที่ซ่อนอยู่

— anydasa
แหล่งที่มา

ไม่ทำงานใน Firefox 30 / Windows 7 หมายเหตุ: จำเป็นต้องมีฟิลด์ที่ซ่อนอยู่ใน firefox เนื่องจากอาจไม่ส่งค่าส่งที่คลิกถ้าส่งด้วย jquery's: this.submit () ในเหตุการณ์ที่ส่ง ฉันเป็นกังวลเล็กน้อยว่า $ (นี้) .attr ('ชื่อ') อาจไม่ทำงานในเบราว์เซอร์ทั้งหมด

— user1610743

ฉันมี Firefox 30 / Windows 7 ฉันมีทุกอย่างทำงานได้อย่างสมบูรณ์

— anydasa

อย่าลืมใส่และbutton[type=submit] input[type=image]

— rybo111

3

สำหรับฉันทางออกที่ดีที่สุดคือ:

$(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
แหล่งที่มา

3

การทำงานกับคำตอบที่ยอดเยี่ยมนี้คุณสามารถตรวจสอบองค์ประกอบที่ใช้งาน (ปุ่ม) ผนวกข้อมูลที่ซ่อนอยู่ในแบบฟอร์มต่อท้ายและเลือกที่จะลบออกเมื่อสิ้นสุดตัวจัดการการส่ง

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

หมายเหตุด้านข้าง: ส่วนตัวฉันเพิ่มคลาสform-jsในทุกรูปแบบที่ส่งผ่าน JavaScript

— rybo111
แหล่งที่มา

2

คล้ายกับคำตอบของ Stan แต่:

หากคุณมีมากกว่าหนึ่งปุ่มคุณจะต้องได้รับปุ่มแรกเท่านั้น => [0]
ถ้าแบบฟอร์มสามารถส่งได้ด้วยรหัสป้อนคุณต้องจัดการค่าเริ่มต้น => 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
แหล่งที่มา

2

นี่เป็นวิธีที่ฉันใช้และทำงานได้ดีมาก:

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

ขยายตัวอย่างข้อมูล

— vasilenicusor
แหล่งที่มา

1

มันช่วยฉันhttps://stackoverflow.com/a/17805011/1029257

ส่งแบบฟอร์มหลังจากคลิกปุ่มส่งเท่านั้น

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

return false;

— w4kskl
แหล่งที่มา

1

นี่คือทางออกของฉัน:

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

— Roldan
แหล่งที่มา

0

ฉันยังแก้ปัญหาและทำงานได้ค่อนข้างดี:
ใช้ jQuery และ CSS

ก่อนอื่นฉันสร้างคลาส CSS ด่วนซึ่งสามารถฝังหรือแยกไฟล์ได้

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

ถัดไปในเหตุการณ์การคลิกปุ่มภายในฟอร์มให้เพิ่มคลาส CSS ลงในปุ่ม หากปุ่มนั้นมีคลาส CSS อยู่ให้ลบออก (เราไม่ต้องการ CSS สองคลาส [เพียงแค่ในกรณี])

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

ตอนนี้ทดสอบปุ่มเพื่อดูว่ามันมีคลาส CSS หากปุ่มทดสอบไม่มี CSS ดังนั้นปุ่มอื่นจะ

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

หวังว่านี่จะช่วยได้! ไชโย!

— Jason Cidras
แหล่งที่มา

อย่าลืมใส่และbutton[type=submit] input[type=image]

— rybo111

คุณควรลบการอ้างอิงถึงสไตล์และ CSS - ไม่เกี่ยวข้องที่นี่ นอกจากนี้บรรทัดที่คุณใช้hasClass()และremoveClass()ซ้ำซ้อนเนื่องจากaddClass()จะไม่เพิ่มคลาสเดียวกันสองครั้ง

— rybo111

0

คุณสามารถสร้าง input type = "hidden" ในฐานะตัวยึดสำหรับข้อมูลรหัสปุ่ม

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

ในกรณีนี้แบบฟอร์มส่งค่า "1" (id ของปุ่มของคุณ) เมื่อส่ง สิ่งนี้จะทำงานได้หาก onClick เกิดขึ้นก่อนที่จะส่ง (?) สิ่งที่ฉันไม่แน่ใจว่าเป็นจริงหรือไม่

— darekk
แหล่งที่มา

0

วิธีง่าย ๆ ในการแยกความแตกต่างที่ <button> หรือ <input type = "button" ... >> คือการตรวจสอบ 'id':

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

— Apostolos
แหล่งที่มา

0

นี่คือตัวอย่างที่ใช้ this.form เพื่อให้ได้แบบฟอร์มที่ถูกต้องในการส่งและเขตข้อมูลเพื่อเก็บองค์ประกอบคลิก / โฟกัสสุดท้าย ฉันยังใส่รหัสการส่งภายในเวลาที่กำหนดเพื่อให้แน่ใจว่ามีการคลิกเหตุการณ์เกิดขึ้นก่อนที่จะมีการดำเนินการ (ผู้ใช้บางคนรายงานในความคิดเห็นว่าใน Chrome บางครั้งเหตุการณ์การคลิกจะเริ่มขึ้นหลังจากการส่ง)

ทำงานเมื่อใช้งานทั้งปุ่มและเมาส์ / นิ้วโดยไม่ต้องนับบนเบราว์เซอร์เพื่อส่งเหตุการณ์การคลิกที่ปุ่ม RETURN (ไม่เจ็บเลย) ฉันได้เพิ่มตัวจัดการเหตุการณ์สำหรับเหตุการณ์โฟกัสสำหรับปุ่มและฟิลด์

คุณอาจเพิ่มปุ่มชนิด = "ส่ง" ให้กับรายการที่บันทึกตัวเองเมื่อคลิก

ในการสาธิตฉันตั้งค่าเส้นขอบสีแดงเพื่อแสดงรายการที่เลือกและการแจ้งเตือนที่แสดงชื่อและค่า / ป้ายกำกับ

นี่คือFIDDLE

และนี่คือรหัส (เดียวกัน):

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>

CSS DUMB:

input {display:block}

— FrancescoMM
แหล่งที่มา

0

ฉันเขียนฟังก์ชั่นนี้เพื่อช่วยฉัน

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

จากนั้นใช้

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

— BabiBN
แหล่งที่มา

0

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

— อาเล็กซาน
แหล่งที่มา

-1

คุณต้องการใช้window.event.srcElement.idเช่นนี้:

function clickTheButton() {

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

}

สำหรับปุ่มที่มีลักษณะดังนี้:

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

คุณจะได้รับการแจ้งเตือนที่อ่านว่า: "รายการที่คลิกคือ myButton

ในตัวอย่างที่ได้รับการปรับปรุงของคุณคุณสามารถเพิ่ม window.event.srcElement เพื่อ process_form_submission และคุณจะมีการอ้างอิงถึงองค์ประกอบใดที่เรียกใช้กระบวนการ

— Cos Callis
แหล่งที่มา

1

อย่าใช้ onclick สำหรับองค์ประกอบมันเลิกใช้แล้ว

— Krzysztof Cygan

1

ดูเหมือนว่าจะใช้งานไม่ได้กับปุ่มส่ง window.event.srcElement กำลังส่งคืนรหัสของแบบฟอร์ม

— 333Mhz

@KrzysztofCygan คุณมีแหล่งที่มาของสิ่งนั้นหรือไม่?

— vard