ফর্মটি জমা দেওয়ার ইভেন্ট থেকে জমা হওয়া বোতামটি আমি কীভাবে পেতে পারি?

Question

আমি জমা দেওয়ার বোতামের মানটি অনুসন্ধান করার চেষ্টা করছি যা ফর্মটি জমা দেওয়ার জন্য ট্রিগার করেছিল

$("form").submit(function() {

});

আমি সম্ভবত একটি $ ("ইনপুট [টাইপ = জমা দিন]") ফায়ার করতে পারি each

Comments

মনে রাখবেন যে অগত্যা এ জাতীয় কোনও বোতাম নেই। একটি স্ক্রিপ্ট করতে পারে formobj.submit()। আমি মনে করি ক্লিক ইভেন্টগুলি যাওয়ার উপায়।

— জেসন ওরেডরফ

আধুনিক ব্রাউজারগুলির জন্য এখন এমনটি রয়েছে event.submitterযা আপনাকে ক্লিক করে <button>বা <input type="submit">যা ক্লিক করে।

— জিএফভি

Answer 1

আমি document.activeElementএই উত্তরে স্কেচ হিসাবে লিভারেজ করেছি : jQuery এর সাথে কেন্দ্রীভূত উপাদানটি পাবেন?

$form.on('submit', function() {
    var $btn = $(document.activeElement);

    if (
        /* there is an activeElement at all */
        $btn.length &&

        /* it's a child of the form */ 
        $form.has($btn) &&

        /* it's really a submit element */
        $btn.is('button[type="submit"], input[type="submit"], input[type="image"]') &&

        /* it has a "name" attribute */
        $btn.is('[name]')
    ) {
        console.log("Seems, that this element was clicked:", $btn);
        /* access $btn.attr("name") and $btn.val() for data */
    }
});

আমি এই সত্যটির সদ্ব্যবহার করি, বোতামটি ক্লিক করার পরে সর্বদা ফোকাসযুক্ত উপাদান। ক্লিক করার পরে আপনি যদি সঠিকভাবে কাজ করেন তবে এটি কাজ করবে নাblur() ।

@ ডাইন আরেকটি ত্রুটি দেখা দিয়েছে। যদি কোনও ব্যবহারকারী enterকোনও পাঠ্য ক্ষেত্রের মাধ্যমে ফর্মটি জমা দেয় তবে document.activeElementসেট করা নেই। এর keypressমধ্যে input[type="text"]এবং অনুরূপ ইভেন্টগুলি পরিচালনা করার জন্য আপনাকে নিজেরাই এটি নজর রাখা দরকার ।

আপডেট 2017-01: আমার লাইব্রেরির হাইপারফর্মের জন্য আমি ব্যবহার না করে activeElementসমস্ত ইভেন্টগুলি ধরার জন্য বেছে নিয়েছি , যা ফর্ম জমা দেওয়ার দিকে নিয়ে যায়। এর জন্য কোডটি গিথুবে রয়েছে।

যদি আপনি হাইপারফর্ম ব্যবহার করতেই পারেন তবে আপনি কীভাবে সাবস্ক্রিপ্ট করে এমন বোতামটি অ্যাক্সেস করবেন:

$(form).on('submit', function(event) {
  var button = event.submittedVia;
});

Comments

এমডিএন হ্যাঁ বলে। (এফএফ 3, আই 4, ক্রোম 2, সাফারি 4, অপেরা 9)

— বোল্ডউইন

এই উত্তর হওয়া উচিত।

— রই নমির

হুম ... ফর্মটি [এন্টার] এর মাধ্যমে সংযুক্ত করা থাকলে এটি কি কাজ করবে? স্পেক বলছে যে এটি ডিফল্ট সাবমিট বোতামটি ক্লিক করার সমতুল্য হওয়া উচিত, তবে আমি নিশ্চিত নই যে এটি এটিকে সক্রিয় উপাদান হিসাবে রাখে বা না করে।

— Doin থেকে

দুঃখজনকভাবে, আপনি কেবল নির্ভর করতে পারবেন নাactiveElement , কারণ "সাবমিটার" সংজ্ঞায়িত করা যেতে পারে: উ: খাঁটি ক্লিক অ্যাক্টিভেশন মাধ্যমে (মাউস বা কীবোর্ড স্পেস / এন্টার দিয়ে সরাসরি ক্লিক করা); বি। সিন্থেটিক ক্লিক অ্যাক্টিভেশন মাধ্যমে ( buttonElement.click()বা buttonElement.dispatch(new MouseEvent(...)), ফোকাস gaing ছাড়া); সি ফর্মের মাধ্যমে সুস্পষ্টভাবে জমা দেওয়া (অন্যান্য ফর্মের ক্ষেত্রের সাথে কীবোর্ড মিথস্ক্রিয়া) D. কারও কাছে নেই, কখনformElement.submit()

— মেমস

জিনিসগুলি বর্তমান রাখতে কেবল একটি নোট। এখনই হিসাবে, সাফারি সাবমিট বাটনে ক্লিক করার সময় ডকুমেন্টের বডিতে অ্যাক্টিভ এলিমেন্ট সেট করে। আমি এই

— ইস্যুটিতে

Answer 2

আমি এটি বাস্তবায়ন করেছি এবং আমার ধারণা এটি কার্যকর হবে।

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

প্রতিক্রিয়াগুলির জন্য ধন্যবাদ, তবে এটি মারাত্মকভাবে অবহেলিত নয় ...

Comments

ক্রসব্রোজার / একাধিক জমা বোতাম-সক্ষম নয়।

— ব্যবহারকারী 1610743

ফর্ম জমা দেওয়ার ইভেন্টের আগে ক্লিক ইভেন্টটি ট্রিগার হওয়ার নিশ্চয়তা কি? আমি ফর্মটিকে doNotSubmitক্লাস দেওয়ার পরামর্শ দিচ্ছি , ভিতরে ক্লাসটি বিদ্যমান না থাকলে ফাংশন চেক জমা দিন (অন্যথায় জমা দিন না), ক্লিক ইভেন্টের ভিতরে ফর্ম ক্লাসটি সরিয়ে doNotSubmitএকটি $ ('' মাইফর্ম ') ট্রিগার করুন ( 'submit'); একটি লুকানো ক্ষেত্র হিসাবে জমা বোতামের মান যুক্ত করার পরে

— হাফেনক্রিনিচ

@ হাফেনক্র্যানিচ ক্রোমের কয়েকটি বিরল অনুষ্ঠানে ক্লিক ইভেন্ট জমা দেওয়ার ইভেন্টের পরে ট্রিগার করা হয়।

— রোমানोजা

@roamnoza ঠিক তেমনই আমার মুখোমুখি হয়েছিল।

— হাফেনক্রিনিচ

@ j4k3 আরও ভাল সমাধান পেয়েছেন? এই উত্তরটি 8 বছরের পুরানো

— শিকারি

Answer 3

আমি একটি পরীক্ষার ফর্ম তৈরি করেছি এবং ফায়ারব্যাগ ব্যবহার করে এই মূল্যটি পাওয়া যায়;

$('form').submit(function(event){
  alert(event.originalEvent.explicitOriginalTarget.value);
}); 

দুর্ভাগ্যক্রমে, শুধুমাত্র ফায়ারফক্স এই ইভেন্টটিকে সমর্থন করে।

Comments

— আইআই এর

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

— ডেভ অ্যান্ডারসন

শুধুমাত্র ফায়ারফক্স এই ইভেন্টটিকে সমর্থন করে।

— অ্যান্ডি ই

তাই মূলত, HTML এ আছে এমন কিছু বিষয় যা করতে পারবেন না জাতীয় মধ্যে সম্পন্ন করা ... মোজিলা অনুপস্থিত লাগু করার সিদ্ধান্ত নিয়েছে, এবং কেউ কিছু আসেন? এই কারণেই আমাদের সুন্দর জিনিস থাকতে পারে না

— 6:55

Answer 4

আমার উদ্দেশ্যগুলির জন্য এটি পরিচ্ছন্ন বলে মনে হচ্ছে approach

প্রথমত, যে কোনও এবং সমস্ত ফর্মের জন্য:

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

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

তারপরে, $ ('ফর্ম') এ। জমা দিন (), এমন কিছুর সাহায্যে আপনি সর্বশেষে কী ক্লিক করেছেন তা অনুসন্ধান করতে পারেন

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

Answer 5

submitterজমা দেওয়ার ইভেন্টে এখন একটি মানসম্পন্ন সম্পত্তি রয়েছে।
ফায়ারফক্স 75 ইতিমধ্যে বাস্তবায়িত !

document.addEventListener('submit',function(e){
    console.log(e.submitter)
})

ব্রাউজারগুলি এটি সমর্থন করে না এর জন্য, এই পলিফিল ব্যবহার করুন :

!function(){
    var lastBtn = null
    document.addEventListener('click',function(e){
        if (!e.target.closest) return;
        lastBtn = e.target.closest('button, input[type=submit]');
    }, true);
    document.addEventListener('submit',function(e){
        if ('submitter' in e) return;
        var canditates = [document.activeElement, lastBtn];
        for (var i=0; i < canditates.length; i++) {
            var candidate = canditates[i];
            if (!candidate) continue;
            if (!candidate.form) continue;
            if (!candidate.matches('button, input[type=button], input[type=image]')) continue;
            e.submitter = candidate;
            return;
        }
        e.submitter = e.target.querySelector('button, input[type=button], input[type=image]')
    }, true);
}();

Answer 6

এই লিঙ্ক অনুসারে , ইভেন্ট অবজেক্টে একটি ক্ষেত্র রয়েছে Event.target, যা:

ইভেন্টটি শুরু করা বস্তুর প্রতিনিধিত্ব করে একটি স্ট্রিং প্রদান করে।

সেই মানটি কী তা যাচাই করে আমি সবেমাত্র একটি পৃষ্ঠা তৈরি করেছি এবং এটি উপস্থিত হিসাবে প্রদর্শিত হয় যে প্রতিনিধিত্বটি ফর্মের জন্য, ক্লিক করা বোতামটির জন্য নয়। অন্য কথায়, জাভাস্ক্রিপ্ট ক্লিক করা বোতামটি নির্ধারণের জন্য সুবিধা সরবরাহ করে না।

ডেভ অ্যান্ডারসনের সমাধান হিসাবে এটি ব্যবহার করার আগে একাধিক ব্রাউজারে এটি পরীক্ষা করা ভাল ধারণা হতে পারে। এটি সম্ভব যে এটি ভাল কাজ করতে পারে, তবে আমি কোনওভাবেই বলতে পারি না can't

Comments

targetপুরো ফর্ম ফেরৎ। সুতরাং দুর্ভাগ্যক্রমে সঠিক জমা বোতাম সনাক্ত করতে সহায়ক নয়।

— হাফেনক্রিনিচ

আমি আমার উত্তরে যতটুকু বলি, @ হাফেনক্র্যানিচ।

— চেম্বারগেটেকেন

Event.targetএকটি স্ট্রিং নয়। এটি একটি EventTargetঅবজেক্ট, যা এই ক্ষেত্রে জমা দেওয়া ফর্মটি is

— আকসেলি

Answer 7

একটি পরিষ্কার পদ্ধতির প্রতিটি ফর্ম বোতামে ক্লিক ইভেন্ট ব্যবহার করা হয়। সংরক্ষণ, বাতিল এবং মুছুন বোতাম সহ একটি এইচটিএমএল ফর্ম নীচে রয়েছে:

<form  name="formname" action="/location/form_action" method="POST">
<input name="note_id" value="some value"/>
<input class="savenote" type="submit" value="Save"/>
<input class="cancelnote" type="submit" value="Cancel"/>
<input class="deletenote" type="submit" value="Delete" />
</form> 

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

$('.savenote').click(function(){
   var options = {
       data: {'action':'save'}
   };
   $(this).parent().ajaxSubmit(options);
   });


$('.deletenote').click(function(){
   var options = {
       data: {'action':'delete'}
   };
   $(this).parent().ajaxSubmit(options);
   });


$('.cancelnote').click(function(){
   window.location.reload(true);
   return false;
   });

Answer 8

JQuery + AJAX ব্যবহার করে সার্ভারে পাঠানো সাবমিট বাটন name+ পাওয়ার বেশ কয়েকটি উপায় অনুসন্ধান করেছি এবং খুঁজে পেয়েছি value। আমি তাদের খুব পছন্দ করি না ...

বেস্টগুলির মধ্যে একটি হান্টারের সমাধান এখানে উপস্থাপন করা হয়েছিল!

তবে আমি নিজেই আর একটি লিখেছি।

আমি ভাগ করে নিতে চাই, কারণ এটি ভাল, এবং যেমনটি আমার প্রয়োজন ছিল, এটি এজ্যাক্সের মাধ্যমে লোড হওয়া ফর্মগুলির সাথেও কাজ করে (ডকুমেন্টের পরে: প্রস্তুত):

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

সরল! জমা দেওয়ার বোতামটি ক্লিক করা হয়, একই nameএবং valueজমা বোতামটি ব্যবহার করে ফর্মের সাথে একটি লুকানো ক্ষেত্র যুক্ত করা হয় ।

সম্পাদনা: নীচের সংস্করণটি পড়া সহজ। এছাড়াও, এটি পূর্বে সংযুক্ত লুকানো ক্ষেত্রগুলি অপসারণের যত্ন নেয় (একই ফর্মটি দু'বার জমা দেওয়ার ক্ষেত্রে, যা এজেএক্স ব্যবহার করার সময় পুরোপুরি সম্ভব)।

উন্নত কোড:

$(document).on('click', 'form input[type=submit]', function(){
    var name   = $(this).attr('name');
    if (typeof name == 'undefined') return;
    var value  = $(this).attr('value');
    var $form  = $(this).parents('form').first();
    var $input = $('<input type="hidden" class="temp-hidden" />').attr('name', name).attr('value', value);
    $form.find('input.temp-hidden').remove();
    $form.append($input);
});

Comments

1+ এটি আমার জন্য এটি করেছে। ধন্যবাদ!

— লেনার্ট রোল্যান্ড

দেখে মনে হচ্ছে এটি সমস্ত বৈশিষ্ট্য <button/>একই nameবৈশিষ্ট্য ভাগ করে নেওয়ার উপর নির্ভর করে । আমি একটি ক্লাস ব্যবহার করব এবং এটিতে আপনার উল্লেখ করব .remove()।

— বিনকি

@ বিঙ্কি: না, তা হয় না। যাইহোক, প্রতিটি বিকাশকারী তার নিজস্ব প্রয়োজনের সাথে সমাধানটি মানিয়ে নিতে পারে।

— জে ব্রুনি

jsfiddle.net/binki/d8ecvname বৈশিষ্ট্যটি সম্পর্কে আমার অর্থ কী তা দেখায় । যদি ফর্মটি পুনরায় ব্যবহার করা হয় এবং বিভিন্ন নামের সাথে ইনপুট জমা দেয় তবে পুরানো ইনপুটগুলি ফর্মটি বিশৃঙ্খলা করতে পারে।

— বিনকি

এখন আমি দেখছি ... আমি আমার উত্তর আপডেট করব। (প্রকৃতপক্ষে, আপনি কোডটিতে ব্যবহার করার <button/>সময় এই উপাদানটি উল্লেখ করেছেন এমন সম্পর্কযুক্ত কারণে আমি আপনার মন্তব্যে খুব বেশি মনোযোগ দিই নি <input type="submit" />...)

— জে ব্রুনি

Answer 9

আমি প্রদত্ত কয়েকটি উদাহরণ চেষ্টা করেছি, তবে সেগুলি আমাদের উদ্দেশ্যে কাজ করে নি।

এখানে দেখানোর মতো একটি বেহালতা: http://jsfiddle.net/7a8qhofo/1/

আমি একই ধরণের সমস্যার মুখোমুখি হয়েছি এবং আমরা আমাদের ফর্মগুলিতে এভাবেই সমাধান করেছি।

$(document).ready(function(){

    // Set a variable, we will fill later.
    var value = null;

    // On submit click, set the value
    $('input[type="submit"]').click(function(){
        value = $(this).val();
    });

    // On data-type submit click, set the value
    $('input[type="submit"][data-type]').click(function(){
        value = $(this).data('type');
    });

    // Use the set value in the submit function
    $('form').submit(function (event){
        event.preventDefault();
        alert(value);
        // do whatever you need to with the content
    });
});

Answer 10

(ইভেন্ট)

function submForm(form,event){
             var submitButton;

             if(typeof event.explicitOriginalTarget != 'undefined'){  //
                 submitButton = event.explicitOriginalTarget;
             }else if(typeof document.activeElement.value != 'undefined'){  // IE
                 submitButton = document.activeElement;
             };

             alert(submitButton.name+' = '+submitButton.value)
}


<form action="" method="post" onSubmit="submForm(this, event); return false;">

Answer 11

আপনি "ইভেন্ট.রিজিনালইভেন্ট.এক্স" এবং "ইভেন্ট.অরিজিনাল এভেন্ট.ই" দিয়ে এইভাবে চেষ্টা করতে পারেন:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <title>test</title>
</head>
<body>

    <form id="is_a_form">
        <input id="is_a_input_1" type="submit"><br />
        <input id="is_a_input_2" type="submit"><br />
        <input id="is_a_input_3" type="submit"><br />
        <input id="is_a_input_4" type="submit"><br />
        <input id="is_a_input_5" type="submit"><br />
    </form>

</body>
</html>
<script>
$(function(){

    $.fn.extend({
      inPosition: function(x, y) {

        return this.each(function() {

            try{
                var offset = $(this).offset();

                if ( (x >= offset.left) &&
                     (x <= (offset.left+$(this).width())) &&
                     (y >= offset.top) &&
                     (y <= (offset.top+$(this).height())) )
                {
                    $(this).css("background-color", "red");
                }
                else
                {
                        $(this).css("background-color", "#d4d0c8");
                }
                }
                catch(ex)
                {
                }

        });
      }
    }); 

    $("form").submit(function(ev) {

        $("input[type='submit']").inPosition(ev.originalEvent.x ,ev.originalEvent.y);
        return false;

    });

});
</script>

Comments

"হ্যাঁ" ?, এটি কাজ করে, এটি কাজ করে না, এটি দরকারী, দরকারী নয়, ...? , আমি ভাল ইংরেজি বলতে পারি না

— andres descalzo

@ হান্টার আমি কীভাবে আপনার মন্তব্যকে একাধিকবার উপস্থাপন করব?

— টম অাগার

Answer 12

jQuery জমা দেওয়ার ইভেন্টে ডেটা সরবরাহ করে বলে মনে হচ্ছে না। দেখে মনে হচ্ছে আপনার প্রস্তাবিত পদ্ধতিটি আপনার সেরা বাজি।

Answer 13

অন্য কোনটি আমার প্রয়োজনীয়তা পূরণ না করায় কেবল একটি সমাধান। সুবিধাটি হ'ল, ক্লিক এবং কী টিপুন (প্রবেশ এবং স্পেস) সনাক্ত করা হয়।

// Detects the Events
var $form = $('form');
$form.on('click keypress', 'button[type="submit"]', function (ev) {

    // Get the key (enter, space or mouse) which was pressed.
    if (ev.which === 13 || ev.which === 32 || ev.type === 'click') {

        // Get the clicked button
        var caller = ev.currentTarget;

        // Input Validation
        if (!($form.valid())) {
            return;
        }

        // Do whatever you want, e.g. ajax...
        ev.preventDefault();
        $.ajax({
            // ...
        })
    }
}

এটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে।

Answer 14

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

$('form').on('click', 'button', function (e) {
  e.preventDefault();
  var
    $button = $(e.target),
    $form = $(e.delegateTarget);
  var buttonValue = $button.val();
});

শুরু করার জন্য আপনার যা যা প্রয়োজন তা এই ডকের কাছে রয়েছে। JQuery ডক ।

Answer 15

আমি এই ফাংশনটি লিখি যা আমাকে সাহায্য করে

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