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
বিড়ম্বনা সত্ত্বেও যে সার্ভার-সাইড নির্ধারণ করার জন্য এই তথ্যটি তুচ্ছ।
— নীল
5
@ নীল আপনি ফর্মটিতে aj .AAAX () এবং একটি সিরিয়ালাইজআরে () এর মাধ্যমে ফর্মটি জমা দিচ্ছেন তা নয়।
— হারুন
— বার্গি
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 চমৎকার সমাধান। আপনি যদি এমন একটি বিবৃতি যুক্ত করতে চান যা ফর্ম জমা দেওয়ার কারণে এজ্যাক্স উপায়ে হ্যান্ডেল করা হয় এবং আপনি আবার স্পষ্টত ক্লিক করা বোতামটি এড়াতে চান তবে বোতামগুলির জুড়ে ক্লিক করা গুণকে পুনরায় সেট করে।
— চান্ডু
1
আচ্ছা বুঝলাম. আপনি নিজের "ক্লিক করা" বৈশিষ্ট্য যুক্ত করছেন। আমি "ক্লিক করা" বুলিয়ান খুঁজছিলাম এবং কোথাও খুঁজে পেলাম না। আমি নিজেই নিজেকে তৈরি করার কথা ভাবিনি। ভাল ধারণা!
— হাকপ্লেক্স
9
সচেতন থাকুন যে এটি কেবল বোতামের উপাদান নয়, ইনপুট উপাদানগুলির সাথে কাজ করে।
— Bob.at.Indigo.Health
1
বোতামের উপাদানগুলির সাথে এটি ক্রোমে অপ্রয়োজনীয়। আমি সহজভাবে জমা দেওয়া ইভেন্টটি পরিচালনা করি, ফর্মটি থেকে একটি ফর্মড্যাটা অবজেক্টটি তৈরি করি এবং এতে সর্বদা ক্লিক করা বোতামটির মান অন্তর্ভুক্ত থাকে। ফায়ারফক্স এই আচরণটি প্রদর্শন করে না এবং পরিবর্তে বোতামের মানটি প্রেরণ করে না। উপরের সমাধানের মতো ক্রোম স্বয়ংক্রিয়ভাবে কিছু করছে বলে মনে হচ্ছে, কোন বোতামটি ক্লিক করা হয়েছিল এবং তা ফর্মের ডেটাতে স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত করে। অবশ্যই, স্ট্যান্ডার্ড আচরণের এই অভাব (যাইহোক জাভাস্ক্রিপ্টে সবকিছু জর্জরিত করা, তাই আমি অবাক হই না), বৈশিষ্ট্যটিকে অকেজো করে তোলে।
— ট্রিইঙ্কো
1
এছাড়াও, নির্বাচকগুলিকে "বোতাম [টাইপ করুন = জমা করুন]" (কমা দ্বারা পৃথক করা) যুক্ত করার বিষয়টি বিবেচনা করুন যেহেতু জমা দেওয়ার উপাদানগুলিকে ইনপুট ট্যাগ হতে হবে না।
— কিসলেজিয়েরেয়েক
91

আমি দেখতে পেলাম যে এটি কাজ করেছে।

$(document).ready(function() {
    $( "form" ).submit(function () {
        // Get the submit button element
        var btn = $(this).find("input[type=submit]:focus" );
    });
}
— স্ট্যান
সূত্র
12
এই সমাধানটি ক্রোমে ভাল কাজ করে, তবে সাফারিটিতে কাজ করতে পারে না, এটি অপরিজ্ঞাত ফিরে আসবে, বোতামের বস্তু নয়
— মিঃ সান লিন
1
@ ক্রিংল আমি সর্বাধিক সাধারণ উপায় দেখানোর জন্য এটির মতো কোড করেছিলাম। আমি মনে করি ডিভগুলি এগুলি তাদের স্বাদে অনুকূল করতে যথেষ্ট স্মার্ট।
— স্ট্যান
অন্যান্য সমাধানের তুলনায় পরিষ্কার। যদিও এখনও এমন কোনও সমাধান খুঁজে পাওয়া যায় নি যা এন্টার টিপে
— টিপানোর সময় কার্যকর হয়
এই উত্তরটি সর্বদা কার্যকর হবে না। আসলে আপনার ক্লিক করা বাটনটি দরকার, ফোকাসড নয় (কারণ ফোকাস ক্রিয়াটি ক্লিক ক্রিয়া নয়)। নির্বাচিত উত্তর (শিকারীর) সঠিক উত্তর।
— ভাসিল পপভ 16
সাবমিট বাটনগুলিতে আমার ক্লিকের ইভেন্ট রয়েছে এবং তাদের ফর্মগুলিতে ইভেন্টগুলি জমা দিন ... পরবর্তীটি পূর্ববর্তীটিকে ট্রিগার করে। আমি ইভেন্টটির উত্সটি বের করতে এটি ব্যবহার করেছি। কিছু ব্রাউজারে বোতামটি ক্লিক করে আপনি বোতামটি ফোকাস হিসাবে পাবেন, অন্যগুলিতে আপনি কিছুই পাবেন না। সমস্ত পরীক্ষিত ব্রাউজারগুলিতে আমি কোনও ইনপুট থাকাকালীন এন্টার চাপলে ইনপুটকে ফোকাস করে।
— 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 ব্যবহার করার দরকার নেই - খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করা আরও সহজ:document.activeElement.id
— নিক এফ
5
নোট করুন যে এটি সাফারিতে প্রত্যাশা অনুযায়ী কাজ করবে না। :(
— রিনোগো
@ রিনোগো: সাফারিতে কী ঘটে?
— ক্রিসেন্ট ফ্রেশ
1
সাফারি document.activeElementইনপুট নয়। আমার ক্ষেত্রে এটি একটি মডেল ডিভ (যা ফর্ম ধারণ করে)।
— mgalgs
46

ফর্মটি জমা দেওয়া হলে:

  • document.activeElement ক্লিক করা সাবমিট বাটন আপনাকে দেবে।

  • document.activeElement.getAttribute('value') আপনাকে সেই বোতামটির মান দেবে।

— নিক এফ
সূত্র
2
নোট করুন যে এটি সাফারিতে প্রত্যাশা অনুযায়ী কাজ করবে না। :(
— রিনোগো
আমি সাফারি সম্পর্কে জানি না তবে ক্রোমে ভাল কাজ করেছে :) ধন্যবাদ!
— ইঙ্গুস
ক্রোম 63 এবং
— আই
আমার কাছে jquery অবিরত বৈধতা চলছে, এবং এটি এর আগে বাধা দেয় এবং বোতামটির পরিবর্তে অকার্যকর ইনপুটটিকে অ্যাক্টিভমেন্ট হিসাবে সেট করে।
— Peheje
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, যখন ক্লিকটি বাচ্চাদের পরিবর্তে ফর্মের সাথে আবদ্ধ থাকায় এই পদ্ধতিটি সঠিকভাবে কাজ করে।
— pospi
7
এটি ফর্মটি ক্লিকের বাইরে অন্য কোনও উপায়ে দাখিল করা ক্ষেত্রে কেসটি হ্যান্ডেল করতে ব্যর্থ হয়েছে (যেমন, এন্টার টিপুন)। অন্য উপায়ে ফর্মটি জমা দেওয়া হলে, এটি সর্বশেষ জমা দেওয়া বোতাম যা জমা দেওয়া ইভেন্টটিকে ট্রিগার করেছিল, সর্বশেষ ক্লিক করা নয়।
— চুপচাপ
এর পরে একটি সেমিকোলন অনুপস্থিত রয়েছে ... $(event.target))তবে সম্পাদনা করতে পারে না কারণ সম্পাদনাগুলি>
— cha টি
13

বাহ, কিছু সমাধান জটিল হতে পারে! আপনি যদি কোনও সাধারণ গ্লোবাল ব্যবহার করতে আপত্তি না দেখান তবে কেবল ইনপুট বোতাম ক্লিক ইভেন্টটি প্রথমে আগুন জ্বলে ওঠে এই সুযোগটি গ্রহণ করুন। একাধিক ফর্মের জন্য $ ('ইনপুট') নির্বাচককে আরও filter ('# আমারফর্ম ইনপুট') ব্যবহার করে ফিল্টার করতে পারে।

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

এটি কেবল ইনপুটগুলিতেই কাজ করে না, তবে এটি বোতাম ট্যাগগুলিতেও কাজ করে। এছাড়াও এটি বোতামের আইডি পায়।

— টমাস উইলিয়ামস
সূত্র
আমার পৃষ্ঠাগুলি এখন সাফারিতে কাজ করছে কিনা তা দেখতে হবে। সাফারি কেন সবসময় এত কঠিন হতে হয়। তার জন্য ধন্যবাদ. আমি কখন বাড়ি যাব তা যাচাই করতে যাচ্ছি
— থমাস উইলিয়ামস
— রুট /
এটি সাফারিতে আমার পক্ষে কাজ করছে না। শরীরের একটি বোতামে শ্রোতাদের ক্লিক করুন a ফর্মটিতে জমা দিন। জমা হ্যান্ডলারের $(document.activeElement).attr('id')রিটার্নের অভ্যন্তরেundefined
— ডায়োডজি
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

স্ট্যান এবং ইয়ান-এইচ কী করেছে তা ভিত্তিতে কিন্তু এটি প্রথম বোতামের ডিফল্ট। এই সামগ্রিক পদ্ধতির সৌন্দর্য হ'ল এটি ক্লিক এবং এন্টার কী উভয়ই উপভোগ করে (এমনকি যদি ফোকাসটি বোতামটিতে না ছিল you যদি আপনাকে ফর্মটিতে প্রবেশের অনুমতি দেওয়ার প্রয়োজন হয়, তবে যখন কোনও বোতাম ফোকাস করা হয় তখন কেবল এটির প্রতিক্রিয়া জানান ( যেমন স্ট্যানের উত্তর) আমার ক্ষেত্রে, আমি ব্যবহারকারীর বর্তমান ফোকাস পাঠ্য বাক্সের দিকে থাকলেও ফর্মটি জমা দেওয়ার অনুমতি দিতে চেয়েছিলাম।

আমি 'আইডি' এর পরিবর্তে একটি 'নাম' বৈশিষ্ট্যও ব্যবহার করছিলাম তবে এটি একই পদ্ধতির।

var pressedButtonName =
     typeof $(":input[type=submit]:focus")[0] === "undefined" ?
     $(":input[type=submit]:first")[0].name :
     $(":input[type=submit]:focus")[0].name;
— andrewmo
সূত্র
তাই আপনি যদি টিএবির সাথে দ্বিতীয় বোতামটির দিকে মনোনিবেশ করেন এবং রিটার্ন টিপুন তবে এটি প্রথম বোতামে ডিফল্ট হয়ে যাবে ...
— ফ্রান্সেসকোএমএম
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
সূত্র
বুদ্ধিটা খারাপ না. এটি পৃষ্ঠায় কোনও ফর্মের জন্য কাজ করবে?
— হাকপ্লেক্স
@ হ্যাঁ হাঁ, এটি করা উচিত আমি জানি না এটি পছন্দসই আচরণ কিনা, তবে আপনার কোডটি ফর্মটি জমা দেয় না, তাই আমারও হয় না। আপনি যদি এটি জমা দিতে চান তবে সরিয়ে ফেলুন event.preventDefaultবা এর মতো কিছু করুন input.parents("form")[0].submit()।
— jcane86
এবং আপনি যদি একটি ক্লিক ছাড়াই জমা দেন (কী কী?) এটি সম্পূর্ণ জগাখিচুড়ি হয়ে যাবে ..
— ফ্রান্সেসকোএমএম
4

আমি গৃহীত উত্তরের বিষয়ে মন্তব্য করতে না পারায়, আমি এখানে একটি পরিবর্তিত সংস্করণ এনেছি যা ফর্মের বাইরে থাকা উপাদানগুলিকে বিবেচনা করা উচিত (যেমন: formবৈশিষ্ট্যটি ব্যবহার করে ফর্মের সাথে সংযুক্ত )। এটি আধুনিক ব্রাউজারের জন্য: http://caniuse.com/#feat=for-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]"
— উইল
@ উইল তবে সমস্ত বোতাম জমা দেওয়ার বোতাম নয়, এটি তাদের ধরণের উপর নির্ভর করে।
— ptyskju
হ্যাঁ, তবে কোনও <ইনপুট টাইপ = "জমা">] এর অভাবে, আমি যে কোনও সংযুক্ত আরব আমি ব্যবহার করেছি তারা ফর্ম জমা দেওয়ার ট্রিগার হিসাবে একটি <বাটন> ট্যাগকে চিকিত্সা করেছে, তাই এটি কেসটি ধরবে। বা লেখক একটি সাবধানীকরণ যুক্ত করতে পারেন যা সমস্ত জমা-সক্ষম উপাদানগুলির অবশ্যই [টাইপ = জমা করুন] বৈশিষ্ট্য থাকতে হবে ... অন্যগুলির মধ্যে একটি।
— Wil
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 এ কাজ করে না Note দ্রষ্টব্য: ফায়ারফক্সে এখন একটি গোপন ক্ষেত্রের প্রয়োজন, কারণ এটি জিকোয়ারির সাথে পাঠানো হলে ক্লিক করা মানটি প্রেরণ করতে পারে না: এটি s সাবমিট () একটি জমা দেওয়া ইভেন্টে। আমি কিছুটা উদ্বিগ্ন যে $ (এটি) .attr ('নাম') সম্ভবত সমস্ত ব্রাউজার জুড়ে কাজ করছে না।
— ব্যবহারকারী 1610743
আমার ফায়ারফক্স 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

এই দুর্দান্ত উত্তরের সাথে কাজ করে , আপনি সক্রিয় উপাদানটি (বোতাম) পরীক্ষা করতে পারেন, ফর্মটিতে একটি লুকানো ইনপুট সংযোজন করতে পারেন, এবং হ্যান্ডলারের জমা দেওয়ার শেষে optionচ্ছিকভাবে এটিকে সরাতে পারেন।

$('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]
  • যদি এন্টার কী দিয়ে ফর্মটি জমা দেওয়া যায় তবে আপনাকে ডিফল্ট => মাইডিফল্টবাটনআইডি পরিচালনা করতে হবে
$(document).on('submit', function(event) {
    event.preventDefault();
    var pressedButtonId = 
         typeof $(":input[type=submit]:focus")[0] === "undefined" ? 
         "myDefaultButtonId" :
         $(":input[type=submit]:focus")[0].id;
    ...
 }
— Yann-হ
সূত্র
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 ব্যবহার করে


প্রথমত, আমি একটি দ্রুত সিএসএস ক্লাস করেছি, এটি এম্বেড করা যেতে পারে বা একটি পৃথক ফাইলে।

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

আশাকরি এটা সাহায্য করবে! চিয়ার্স!

— জেসন সিড্রাস
সূত্র
অন্তর্ভুক্ত মনে রাখবেন 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" (আপনার বোতামের আইডি) পাস করে। এটি ক্লিক করুন যদি জমা দেওয়ার আগে (?) এর আগে অনক্লিক ঘটে থাকে তবে আমি নিশ্চিত নই যে এটি সর্বদা সত্য কিনা।

— darekk
সূত্র
0

কোন <বাটন> বা <ইনপুট টাইপ = "বোতাম" ...> টিপিত হয় তার পার্থক্যের একটি সহজ উপায় হ'ল তাদের 'আইডি' পরীক্ষা করে:

$("button").click(function() {
  var id = $(this).attr('id');
  ... 
});
— Apostolos
সূত্র
0

এখানে একটি নমুনা দেওয়া হয়েছে, যা জমা দেওয়া সঠিক ফর্মটি পেতে এই.ফর্মটি ব্যবহার করে এবং সর্বশেষ ক্লিক করা / কেন্দ্রিক উপাদান সংরক্ষণ করার জন্য ডেটা ক্ষেত্রগুলি। ক্লিকের ঘটনাগুলি সম্পাদন হওয়ার আগেই ঘটেছিল তা নিশ্চিত হওয়ার জন্য আমি জমা দেওয়ার কোডটি একটি সময়সীমার মধ্যেও আবৃত রেখেছিলাম (কিছু ব্যবহারকারী মন্তব্য করেছিলেন যে ক্রোমে কখনও কখনও ক্লিক ইভেন্ট জমা দেওয়ার পরে বরখাস্ত করা হয়)।

রিটার্ন কীতে ক্লিক ইভেন্ট পাঠানোর জন্য ব্রাউজারগুলিতে গণনা ছাড়াই কী এবং মাউস / আঙ্গুল দিয়ে উভয় নেভিগেট করার সময় কাজ করে (আমি আঘাত করি না), আমি বোতাম এবং ক্ষেত্রগুলির জন্য ফোকাস ইভেন্টগুলির জন্য ইভেন্ট হ্যান্ডলার যুক্ত করেছি।

আপনি ক্লিক করতে পারেন এমন আইটেমগুলিতে = "জমা দিন" টাইপের বোতামগুলি যুক্ত করতে পারেন যা ক্লিক করার পরে তারা নিজেকে বাঁচায়।

ডেমোতে আমি নির্বাচিত আইটেমটি দেখানোর জন্য একটি লাল সীমানা সেট করি এবং একটি সতর্কতা যা নাম এবং মান / লেবেল দেখায়।

এখানে নিখরচায়

এবং এখানে (একই) কোডটি রয়েছে:

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

ডামি এইচটিএমএল:

<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
সূত্র
-1

আপনি উইন্ডো.ইভেন্ট.এসসিআরইলমেন্ট.আইডির মতো ব্যবহার করতে চান :

function clickTheButton() {

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

}

দেখতে এমন বোতামটির জন্য:

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

আপনি একটি সতর্কতা পাবেন যাতে লেখা আছে: "ক্লিক করা আইটেমটি ছিল আমার বোতাম।

আপনার উন্নত উদাহরণে আপনি উইন্ডো.সেন্ট.সিসিএল উপাদানটি প্রসেস_ফর্ম_সোমিশনে যোগ করতে পারেন এবং যে কোনও উপাদানটি প্রক্রিয়াটি শুরু করার জন্য আপনার কাছে একটি রেফারেন্স থাকবে।

— কোস ক্যালিস
সূত্র
1
উপাদানগুলির জন্য
— অনক্লিক
1
এটি জমা দেওয়ার বোতামগুলির জন্য কাজ করছে বলে মনে হচ্ছে না, window.event.srcElement ফর্মের আইডি ফিরিয়ে দিচ্ছে।
— 333Mhz
@ KrzysztofCygan আপনার কি এর কোনও উত্স আছে?
— vard
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.