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 पर लाइव उदाहरण

प्रत्येक बटन पर एक .click () घटना को लागू करने के अलावा, यह निर्धारित करने का एक तरीका है कि कौन सा सबमिट बटन क्लिक किया गया था?

jquery forms

— hawkexp
स्रोत

2

बेशक विडंबना यह है कि यह जानकारी सर्वर-साइड निर्धारित करने के लिए तुच्छ है।

— नील

5

@ नहीं, यदि आप फॉर्म पर $ .ajax () और एक serializeArray () के माध्यम से फॉर्म जमा नहीं कर रहे हैं।

— हारून

संभव डुप्लिकेट कैसे मैं उस बटन को प्राप्त कर सकता हूं जो फॉर्म सबमिट इवेंट से सबमिट का कारण बना?

— बर्गी

1

सबमिट बटन पर श्रोता को कैसे रखें और फॉर्म को मैन्युअल रूप से सबमिट करें।

— जेएमआरसी

1

कैसे फार्म डेटा के क्रमबद्ध संस्करण को देखने और बटन पर मैच के बारे में name?

— अगस्तिन रिडिंगरिंगर

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 तरीके से हैंडल किया जाता है और आप फिर से प्रीवीसली क्लिक किए गए बटन को प्राप्त करने से बचना चाहते हैं।

— चंदू

1

ओह मैं समझा। आप अपनी "क्लिक की गई" विशेषता जोड़ रहे हैं। मैं एक "क्लिक की गई" बूलियन के लिए सब कुछ देख रहा था और कहीं भी एक नहीं मिल रहा था। मैंने कभी खुद को बनाने के बारे में नहीं सोचा। अच्छा विचार!

— hawkexp

9

ज्ञात हो कि यह केवल इनपुट तत्वों के साथ काम करता है, बटन तत्वों के साथ नहीं।

— Bob.at.Indigo.Health

1

यह क्रोम में बटन तत्वों के साथ अनावश्यक है। मैं केवल सबमिट ईवेंट को संभालता हूं, फॉर्म से फॉर्मडैट ऑब्जेक्ट बनाता हूं, और इसमें हमेशा उस बटन का मूल्य शामिल होता है जिसे क्लिक किया गया था। फ़ायर्फ़ॉक्स इस व्यवहार को प्रदर्शित नहीं करता है, और इसके बजाय बटन मूल्य बिल्कुल नहीं भेजता है। Chrome स्वचालित रूप से उपरोक्त समाधान की तरह कुछ कर रहा है, यह याद रखना कि कौन सा बटन क्लिक किया गया था और इसे स्वचालित रूप से डेटा में शामिल किया गया था। बेशक, मानक व्यवहार की कमी (जावास्क्रिप्ट में सब कुछ वैसे भी, इसलिए मुझे आश्चर्य नहीं है), सुविधा को बेकार बनाता है।

— ट्राइंको

1

इसके अलावा, चयनकर्ताओं को जोड़ने पर विचार करें "बटन [टाइप करें = सबमिट करें" "(अल्पविराम द्वारा अलग किया गया) क्योंकि सबमिट तत्वों को इनपुट टैग नहीं होना है।

— Kyselejsyreček

91

मैंने पाया कि यह काम करता है।

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

— स्टेन
स्रोत

12

यह समाधान क्रोम पर अच्छी तरह से काम करता है, लेकिन सफारी पर काम नहीं कर सकता है, यह अपरिभाषित वापस आ जाएगा, न कि बटन ऑब्जेक्ट

— श्री सूर्य लिन

1

@ क्रिंकल मैंने इसे इस तरह कोडित किया कि सबसे सामान्य तरीके से संभव हो सके। मुझे लगता है कि देवता अपने स्वाद के लिए इसे अनुकूलित करने के लिए पर्याप्त स्मार्ट हैं।

— स्टेन

अन्य समाधानों की तुलना में क्लीनर। अभी भी एक समाधान नहीं मिला है जो हालांकि दबाने पर काम करता है

— andrewtweber

यह जवाब हमेशा काम नहीं करेगा। वास्तव में आपको क्लिक किए गए बटन की आवश्यकता होती है, न कि फ़ोकस (क्योंकि फ़ोकस एक्शन क्लिक एक्शन नहीं है)। चयनित उत्तर (शिकारी का) सही है।

— वासिल पोपोव

मेरे पास सबमिट बटन पर एक क्लिक की गई घटना है और घटनाओं को उनके रूपों पर सबमिट करना है ... बाद वाला पूर्व को ट्रिगर करता है। मैंने इसका उपयोग घटना के स्रोत का पता लगाने के लिए किया। बटन पर क्लिक करने वाले कुछ ब्राउज़रों में आपको बटन के रूप में फोकस किया जाएगा, अन्य में आपको कुछ नहीं मिलेगा। मैंने जिन सभी ब्राउज़रों का परीक्षण किया, उनमें इनपुट पर ध्यान केंद्रित करते हुए हिट दर्ज करना इनपुट को केंद्रित रखता है।

— नॉटआउट

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

— मिकोलज

9

इसके लायक होने के लिए, आपको आईडी प्राप्त करने के लिए jQuery का उपयोग करने की आवश्यकता नहीं है - शुद्ध जावास्क्रिप्ट का उपयोग करना और भी सरल है:document.activeElement.id

— Nick F

5

ध्यान दें कि यह सफारी पर अपेक्षित रूप से काम नहीं करता है। :(

— रिनोगो

@rinogo: सफारी में क्या होता है?

— वर्धमान ताजा

1

सफारी document.activeElementमें इनपुट नहीं है। मेरे मामले में यह एक मोडल डिव (जिसमें फॉर्म होता है) है।

— मंगल

46

जब फॉर्म जमा किया जाता है:

document.activeElement आपको सबमिट बटन पर क्लिक किया जाएगा।
document.activeElement.getAttribute('value') आपको वह बटन का मूल्य देगा।

— निक एफ
स्रोत

2

ध्यान दें कि यह सफारी पर अपेक्षित रूप से काम नहीं करता है। :(

— रिनोगो

मुझे नहीं पता कि सफारी के बारे में कैसे है लेकिन क्रोम पर अच्छा काम किया :) धन्यवाद!

— इनगस

Chrome 63 और IE11 में काम करता है

— सर क्रिसलॉट

मेरे पास रनिंग विनीत सत्यापन था, और इससे पहले कि यह स्वीकार करता है और बटन के बजाय सक्रिय इनपुट के रूप में अमान्य इनपुट सेट करता है।

— पीजे

28

यहाँ दृष्टिकोण है कि मेरे प्रयोजनों के लिए क्लीनर लगता है।

पहला, किसी भी और सभी रूपों के लिए:

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

जब यह क्लिक ईवेंट किसी प्रपत्र के लिए निकाल दिया जाता है, तो यह मूल उद्गम लक्ष्य (ईवेंट ऑब्जेक्ट में उपलब्ध) को बाद में एक्सेस करने के लिए रिकॉर्ड करता है। यह एक बहुत व्यापक स्ट्रोक है, क्योंकि यह फॉर्म पर कहीं भी किसी भी क्लिक के लिए आग लगाएगा। अनुकूलन टिप्पणियों का स्वागत है, लेकिन मुझे संदेह है कि यह कभी ध्यान देने योग्य मुद्दों का कारण नहीं होगा।

फिर, में $('form').submit(), आप पूछताछ कर सकते हैं कि अंतिम क्लिक क्या था, जैसे कुछ

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

— जोनाथन कैमेनिक
स्रोत

यदि यह क्लिक के बजाय फ़ॉर्म सबमिट ईवेंट है तो क्या होगा?

— टोनी

1

@ टोनी, क्षमा करें, मैंने आपका प्रश्न जल्दी नहीं देखा। यह उत्तर पूरी तरह से सबमिट बनाने के संबंध में है। सबमिट बटन पर भी क्लिक किया जाता है, और इस तरह वे क्लिक इवेंट को आग लगा देते हैं।

— जोनाथन कैमेनिस्क

2

किसी भी बाल तत्व के ईवेंट क्लिक करने से पहले फ़ॉर्म के सबमिट ईवेंट को निकाल दिए जाने के बाद से शिकारी के उत्तर पर इस उत्तर को अपडेट करना। जब आपके फॉर्म की सबमिट ईवेंट को रद्द कर दिया जाता है return false, तो यह कठिनाइयों का कारण बनता है , जबकि यह विधि सही ढंग से काम करती है, क्योंकि क्लिक अपने बच्चों के बजाय फॉर्म के लिए बाध्य है।

— पोस्सी

7

यह ठीक से उस मामले को संभालने में विफल रहता है, जहां फॉर्म एक क्लिक के अलावा अन्य माध्यम से सबमिट किया जाता है (जैसे, एंटर दबाएं)। जब फॉर्म अन्य माध्यमों से सबमिट किया जाता है, तो यह पहला सबमिट बटन होता है, जिसने सबमिट ईवेंट को ट्रिगर किया है, न कि अंतिम क्लिक पर।

— शांत

इसके बाद एक अर्धविराम गायब है, ... $(event.target))लेकिन इसे संपादित नहीं किया जा सकता क्योंकि संपादन> 6 वर्ण

— हफेनक्रानिक

13

वाह, कुछ समाधान जटिल हो सकते हैं! यदि आप एक साधारण वैश्विक का उपयोग करने में कोई आपत्ति नहीं करते हैं, तो बस इस तथ्य का लाभ उठाएं कि इनपुट बटन पर क्लिक करने से सबसे पहले ईवेंट फायर होता है। $ ((# 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);
      });
    });

— lawnbowler
स्रोत

12

मैंने पाया है सबसे अच्छा उपाय है

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

यह न केवल इनपुट पर काम करता है, बल्कि यह बटन टैग पर भी काम करता है। साथ ही इसमें बटन की आईडी भी मिलती है।

— थॉमस विलियम्स
स्रोत

लानत मुझे यह देखना है कि क्या मेरा पेज सफारी पर अब काम करता है। सफारी को हमेशा इतना मुश्किल क्यों होना पड़ता है। उसके लिए धन्यवाद। घर पहुंचने पर जांच करने के लिए जा रहे हैं

— थॉमस विलियम्स

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

— ओलिवर हैडर

यह मेरे लिए सफारी में काम नहीं कर रहा है। बॉडी कॉल के एक बटन पर श्रोता पर क्लिक करें। एक फ़ॉर्म पर सबमिट करें। सबमिट हैंडलर $(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

स्टेन और यान-एच ने जो किया, उस पर निर्माण करते हुए यह पहला बटन डिफॉल्ट करता है। इस समग्र दृष्टिकोण की सुंदरता यह है कि यह क्लिक और एंटर कुंजी दोनों को उठाता है (भले ही बटन पर ध्यान केंद्रित नहीं किया गया था। यदि आपको फॉर्म में प्रवेश करने की अनुमति देने की आवश्यकता है, तो बस बटन के फोकस होने पर इस पर प्रतिक्रिया दें) यानी स्टैन का जवाब)। मेरे मामले में, मैं चाहता था कि यदि उपयोगकर्ता का वर्तमान ध्यान टेक्स्ट बॉक्स पर है, तो भी फॉर्म जमा करने की अनुमति दी जाए।

मैं 'आईडी' के बजाय 'नाम' की विशेषता का उपयोग कर रहा था, लेकिन यह वही दृष्टिकोण है।

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

— andrewmo
स्रोत

इसलिए यदि आप TAB के साथ दूसरे बटन पर ध्यान केंद्रित करते हैं और RETURN को दबाते हैं तो यह पहले बटन पर डिफ़ॉल्ट होगा ...

— फ्रांसेस्कोएम

5

यह एक मेरे लिए काम किया

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

}

— साहब मोंडल
स्रोत

यह पदक के योग्य है!

— मार्टिन ज़्वारीक

4

यदि आप एक .click ईवेंट को न जोड़ने से मतलब रखते हैं, तो यह है कि आप उन ईवेंट के लिए अलग हैंडलर नहीं रखना चाहते हैं, आप एक फ़ंक्शन में सभी क्लिक (सबमेट्स) को संभाल सकते हैं:

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

और यदि आप एक क्लिक के बिना जमा करते हैं (वापसी कुंजी?) तो यह कुल गड़बड़ हो जाएगा ..

— फ्रांसेस्कोएम

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

@Wil लेकिन सभी बटन सबमिट बटन नहीं हैं, यह उनके प्रकार पर निर्भर करता है।

— ptyskju

हां, लेकिन <इनपुट प्रकार = "सबमिट">] की अनुपस्थिति में, मेरे द्वारा उपयोग किए गए हर UA ने फॉर्म सबमिट ट्रिगर के रूप में <बटन> टैग का इलाज किया है, इसलिए यह उस मामले को पकड़ लेगा। या लेखक एक चेतावनी जोड़ सकता है कि सभी जमा-सक्षम तत्वों के पास [प्रकार = सबमिट] गुण ... दूसरे में से एक होना चाहिए।

— विले

3

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

छिपा हुआ क्षेत्र जोड़ें

— anydasa
स्रोत

फ़ायरफ़ॉक्स 30 / विंडोज 7 में काम नहीं करता है। नोट: फ़ायरफ़ॉक्स में अब एक छिपे हुए फ़ील्ड की आवश्यकता है, क्योंकि यह ऑन-सबमिट ईवेंट में jquery के: this.submit () के साथ भेजे गए क्लिक मूल्य को नहीं भेज सकता है। मैं बस थोड़ा चिंतित हूं कि $ (यह) .attr ('नाम') सभी ब्राउज़रों में काम नहीं कर रहा होगा।

— user1610743

मेरे पास फ़ायरफ़ॉक्स 30 / विंडोज 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'))

});

— जेरमिया हारलैंड
स्रोत

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रूप से जावास्क्रिप्ट के माध्यम से प्रस्तुत किए गए सभी रूपों पर वर्ग जोड़ देता हूं ।

— rybo111
स्रोत

2

स्टेन उत्तर के समान है लेकिन:

यदि आपके पास एक से अधिक बटन हैं, तो आपको केवल पहला बटन प्राप्त करना होगा => [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;
    ...
 }

— यान-ज
स्रोत

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

— रोल्डन
स्रोत

0

मैंने एक समाधान भी बनाया, और यह काफी अच्छी तरह से काम करता है:
यह jQuery और CSS का उपयोग करता है

सबसे पहले, मैंने एक त्वरित सीएसएस वर्ग बनाया, यह एम्बेडेड या एक अलग फ़ाइल में हो सकता है।

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

अगला, फॉर्म के भीतर एक बटन के क्लिक इवेंट पर, सीएसएस वर्ग को बटन में जोड़ें। यदि बटन में पहले से ही सीएसएस वर्ग है, तो उसे हटा दें। (हम दो सीएसएस कक्षाएं नहीं चाहते हैं [बस मामले में])।

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

अब, यह देखने के लिए बटन का परीक्षण करें कि इसमें सीएसएस वर्ग है, यदि परीक्षण किए गए बटन में सीएसएस नहीं है, तो दूसरा बटन होगा।

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

उम्मीद है की यह मदद करेगा! चीयर्स!

— जेसन Cidras
स्रोत

button[type=submit]और शामिल करने के लिए याद रखें input[type=image]।

— rybo111

आपको स्टाइल और सीएसएस के संदर्भों को हटा देना चाहिए - वे यहां प्रासंगिक नहीं हैं। साथ ही, वे लाइनें जहाँ आप उपयोग करते हैं hasClass()और removeClass()निरर्थक हैं, क्योंकि addClass()एक ही वर्ग को दो बार नहीं जोड़ेगा।

— rybo111

0

आप बटन आईडी जानकारी के लिए धारक के रूप में इनपुट टाइप = "हिडन" बना सकते हैं।

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

इस मामले में फॉर्म सबमिट पर "1" (आपके बटन की आईडी) मान को पास करता है। यह काम करता है अगर onClick सबमिट होने से पहले होता है (?), मुझे यकीन नहीं है कि क्या यह हमेशा सच है?

— darekk
स्रोत

0

अंतर करने का एक सरल तरीका जो <बटन> या <इनपुट प्रकार = "बटन" ...> दबाया जाता है, उनकी 'आईडी' की जाँच करके है:

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

— अपोस्तोलोस
स्रोत

0

यहां एक नमूना है, जो सबमिट में सही फॉर्म प्राप्त करने के लिए इस का उपयोग करता है। और अंतिम क्लिक / केंद्रित तत्व को संग्रहीत करने के लिए डेटा फ़ील्ड। मैंने एक टाइमआउट के अंदर सबमिट कोड को भी लपेटा है ताकि यह सुनिश्चित हो सके कि इसे निष्पादित करने से पहले क्लिक की जाने वाली घटनाएं हो सकती हैं (कुछ उपयोगकर्ताओं ने टिप्पणियों में बताया कि कभी-कभी क्रोम पर क्लिक इवेंट को सबमिट के बाद निकाल दिया जाता है)।

काम करता है जब RETURN कुंजी (हालांकि चोट नहीं करता है) पर एक क्लिक घटना भेजने के लिए ब्राउज़रों पर गिनती के बिना कुंजी और माउस / उंगलियों के साथ नेविगेट करना, मैंने बटन और फ़ील्ड के लिए फोकस घटनाओं के लिए एक इवेंट हैंडलर जोड़ा।

आप उन आइटमों के प्रकार जोड़ सकते हैं जो क्लिक किए जाने पर खुद को बचाते हैं।

डेमो में मैंने चयनित आइटम और एक चेतावनी दिखाने के लिए एक लाल बॉर्डर सेट किया है जो नाम और मूल्य / लेबल दिखाता है।

यहाँ FIDDLE है

और यहाँ (समान) कोड है:

जावास्क्रिप्ट:

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

डमी 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>

मुंबई सीएसएस:

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 पर जोड़ सकते हैं और आपके पास प्रक्रिया को लागू करने वाले तत्व का संदर्भ होगा।

— कॉस कैलिस
स्रोत

1

तत्वों के लिए onclick का उपयोग न करें, यह पदावनत है

— Krzysztof Cygan

1

यह सबमिट बटन के लिए काम नहीं करता है, window.event.srcElement फॉर्म की आईडी लौटा रहा है।

— 333 मेगाहर्ट्ज जूल

@KrzysztofCygan क्या आपके पास इसका कोई स्रोत है?

— vard