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

Question

मैं सबमिट बटन का मूल्य खोजने की कोशिश कर रहा हूं, जिसने फ़ॉर्म को सबमिट करने के लिए ट्रिगर किया है

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

});

मैं संभवतः एक $ आग लगा सकता हूं ("इनपुट [टाइप = सबमिट]")। प्रत्येक बटन के लिए क्लिक करें () घटना और कुछ चर सेट करें, लेकिन यह कुछ कम से कम सुरुचिपूर्ण लगता है कि सबमिट पर फॉर्म का बटन कैसे खींच रहा है।

Comments

ध्यान दें कि जरूरी नहीं कि ऐसा कोई बटन हो। एक स्क्रिप्ट हो सकता है formobj.submit()। मुझे लगता है कि क्लिक इवेंट्स जाने का रास्ता है।

— जेसन ओरेंडोर्फ

आधुनिक ब्राउज़रों के लिए अब वह है event.submitterजो आपको देता है <button>या <input type="submit">जिसे क्लिक किया गया था।

— gfv

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()क्लिक के बाद एक सही करते हैं।

@Doin ने एक और कमी दिखाई है। यदि उपयोगकर्ता enterपाठ फ़ील्ड में फ़ॉर्म सबमिट करता है , तो document.activeElementवह सेट नहीं किया जाता है। आपको स्वयं को इसके लिए देखने की आवश्यकता होगी, keypressजैसे input[type="text"]और इसी तरह की घटनाओं को संभालकर।

अद्यतन 2017-01: मेरे पुस्तकालय के लिए Hyperform मैं उपयोग करने के लिए नहीं चुना है activeElementलेकिन सभी घटनाओं, प्रपत्र प्रस्तुत करने पर लेकर जाते हैं पकड़ने के लिए। इसके लिए कोड Github पर है।

यदि आप हाइपरफॉर्म का उपयोग करते हैं, तो यह है कि आप उस बटन को कैसे एक्सेस करेंगे जो सबमिट को ट्रिगर करता है:

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

Comments

MDN हाँ कहता है। (एफएफ 3, आईई 4, क्रोम 2, सफारी 4, ओपेरा 9)

— बोल्ड्यूविन

इसका उत्तर होना चाहिए।

— रॉय नमिर

हम्मम ... क्या यह काम करता है अगर फॉर्म को [एंटर] के माध्यम से sumbitted किया जाता है? युक्ति कहती है कि डिफ़ॉल्ट सबमिट बटन पर क्लिक करने के बराबर होना चाहिए, लेकिन मुझे यकीन नहीं है कि यह इसे सक्रिय तत्व के रूप में छोड़ता है या नहीं।

— चल रहा

अफसोस की बात है, आप केवल इस पर भरोसा नहीं कर सकते हैंactiveElement , क्योंकि "सबमिटर" को परिभाषित किया जा सकता है: ए। वाया प्रामाणिक क्लिक सक्रियण (माउस या कीबोर्ड स्पेस / एंटर के साथ सीधे क्लिक किया गया); बी वाया सिंथेटिक क्लिक सक्रियण ( buttonElement.click()या buttonElement.dispatch(new MouseEvent(...)), ध्यान केंद्रित किए बिना); के माध्यम से सी फार्म परोक्ष submittion (अन्य रूप के क्षेत्र के साथ कुंजीपटल सहभागिता) के डी कोई नहीं, जब करने के लिएformElement.submit()

— एमईएमएस

चीजों को चालू रखने के लिए बस एक नोट। अभी के रूप में, सफारी सबमिट बटन पर क्लिक करते समय दस्तावेज़ निकाय में सक्रियता सेट करता है। मैं सफारी 9.1

— कोडरकेविन

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

क्रॉसब्रोसर / एकाधिक सबमिट बटन-सक्षम नहीं।

— user1610743

क्या यह गारंटी है कि फॉर्म सबमिट करने से पहले क्लिक इवेंट चालू हो जाता है? मैं सुझाव दूंगा कि doNotSubmitकक्षा को एक फंक्शन चेक के अंदर दें, अगर क्लास मौजूद नहीं है (तो सबमिट न करें), क्लिक इवेंट के अंदर फॉर्म क्लास को हटा दें doNotSubmitऔर एक $ ('' myForm ') ट्रिगर करें। ('प्रस्तुत'); एक छिपे हुए क्षेत्र के रूप में सबमिट बटन मान जोड़ने के बाद

— Hafenkranich

@Hafenkranich क्रोम पर कुछ दुर्लभ अवसरों पर क्लिक ईवेंट को सबमिट इवेंट के बाद ट्रिगर किया जाता है।

— रोमेनोज़ा

@roamnoza ने ठीक वही किया जो मैंने भी किया था।

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

@ j4k3 एक बेहतर समाधान है? यह उत्तर 8 वर्ष का है

— शिकारी

Answer 3

मैंने एक परीक्षण प्रपत्र बनाया और फायरबग का उपयोग करके मूल्य प्राप्त करने का यह तरीका पाया;

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

दुर्भाग्य से, केवल फ़ायरफ़ॉक्स इस घटना का समर्थन करता है।

Comments

IE में यह संपत्ति नहीं है (

— क्लियरऑरिजिनल टारगेट

अच्छा पुराना IE इसे गड़बड़ कर रहा है, फायरबग के माध्यम से चला गया और किसी भी अन्य ऑब्जेक्ट मानों का उपयोग करने के लिए नहीं देख सका, लेकिन सादे वैकल्पिक ब्राउज़रों के बारे में भूल गया। यह सुनकर हैरानी नहीं होती है, हालांकि, क्रोम की जांच करनी होगी।

— डेव एंडरसन

केवल फ़ायरफ़ॉक्स इस घटना का समर्थन करता है।

— एंडी ई

तो मूल रूप से, HTML में ऐसा कुछ है जो JS में नहीं किया जा सकता है ... मोज़िला ने लापता सुविधा को लागू करने का फैसला किया, और किसी ने भी पीछा नहीं किया? यही कारण है कि हम अच्छा बातें नहीं हो सकता है

— aross

Answer 4

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

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

$('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, जो:

घटना शुरू करने वाली वस्तु का प्रतिनिधित्व करने वाला एक स्ट्रिंग लौटाता है।

मैंने अभी एक पृष्ठ परीक्षण किया है कि वह मान क्या है, और ऐसा प्रतीत होता है जैसे कि प्रतिनिधित्व फॉर्म के लिए है, न कि बटन पर क्लिक करने के लिए। दूसरे शब्दों में, जावास्क्रिप्ट क्लिक बटन को निर्धारित करने की सुविधा प्रदान नहीं करता है।

जहाँ तक डेव एंडरसन के समाधान की बात है , इसका उपयोग करने से पहले कई ब्राउज़रों में परीक्षण करना एक अच्छा विचार हो सकता है। यह संभव है कि यह ठीक काम कर सके, लेकिन मैं किसी भी तरह से नहीं कह सकता।

Comments

targetपूरे रूप देता है। इस प्रकार दुर्भाग्य से सही सबमिट बटन का पता लगाने में मददगार नहीं है।

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

मैं अपने जवाब में उतना ही कहता हूं, @Hafenkranich।

— cmptrgeekken

Event.targetएक तार नहीं है। यह एक EventTargetवस्तु है, जो इस मामले में स्वयं प्रस्तुत प्रपत्र है।

— अक्सली

Answer 7

प्रत्येक फॉर्म बटन पर क्लिक इवेंट का उपयोग करने के लिए एक स्वच्छ दृष्टिकोण है। बटन को बचाने, रद्द करने और हटाने के साथ HTML फॉर्म निम्न है:

<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

मैंने सबमिट बटन प्राप्त करने के कई तरीके खोजे और पाए namevalue jQuery + AJAX का उपयोग करके सर्वर पर भेजे गए + । मैं उन्हें बहुत पसंद नहीं था ...

सबसे अच्छे में से एक शिकारी समाधान यहाँ प्रस्तुत किया गया था!

लेकिन मैंने खुद एक और लिखा।

मैं साझा करना चाहता हूं, क्योंकि यह अच्छा है, और, जैसा कि मुझे ज़रूरत थी, यह अजाक्स के माध्यम से लोड किए गए रूपों के साथ भी काम करता है (दस्तावेज़ के बाद पहले से ही:

$(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 सबमिट बटन का ।

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

बेहतर कोड:

$(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/d8ecv से पता चलता है कि nameविशेषता के बारे में मेरा क्या मतलब है । यदि फॉर्म का पुन: उपयोग किया जाता है और विभिन्न नामों के साथ इनपुट प्रस्तुत करता है, तो पुराने इनपुट फॉर्म को अव्यवस्थित कर सकते हैं।

— बिंकी

अब मैं देख रहा हूं ... मैं अपने उत्तर को अपडेट करूंगा। (वास्तव में, मैंने असंबंधित तथ्य के कारण आपकी टिप्पणी पर ज्यादा ध्यान नहीं दिया कि आप <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

आप इस तरह से "event.originalEvent.x" और "event.originalEvent.y" के साथ कोशिश कर सकते हैं:

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

"yikes" ?, यह काम करता है, यह काम नहीं करता है, यह उपयोगी है, उपयोगी नहीं है, ...? , मैं अच्छी अंग्रेजी नहीं बोलता

— 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

अधिक विशिष्ट ईवेंट हैंडलर और JQuery के साथ, आपकी ईवेंट ऑब्जेक्ट बटन क्लिक की गई है। जरूरत पड़ने पर आप इस इवेंट से प्रतिनिधि फॉर्म भी प्राप्त कर सकते हैं।

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