क्लाइंट की ओर से कई बार फ़ॉर्म सबमिट करने से कैसे रोकें?

Question

कभी-कभी जब प्रतिक्रिया धीमी होती है, तो व्यक्ति कई बार सबमिट बटन पर क्लिक कर सकता है।

इसे कैसे रोका जाए?

Comments

मुझे उम्मीद है कि आपने अपने प्रश्न के शीर्षक पर "ग्राहक पक्ष" डाल दिया है क्योंकि आप जानते हैं कि ग्राहक पर किसी भी समाधान की कोशिश करना और डुबकी से बचने के लिए 100% असुरक्षित है और आपको हमेशा सर्वर पक्ष पर सत्यापन करना चाहिए ।

— पाओलो बरगीनो

पाओलो: हाँ, यदि आप पूरी डेटा सुरक्षा में रुचि रखते हैं, तो इसे सर्वर-साइड किया जाना चाहिए। लेकिन कभी-कभी आप केवल सबमिट बटन पर डबल क्लिक करने से दादी को रोकना चाहते हैं जब उसे केवल एक क्लिक की आवश्यकता होती है। इन मामलों में जावास्क्रिप्ट पूरी तरह से ठीक है।

— साइमन ईस्ट

इसे केवल सर्वर-साइड करना 100% सुरक्षित नहीं है, क्योंकि आपका पहला अनुरोध समाप्त होने में काफी समय लग सकता है, इसलिए दूसरा यह जानना चाहिए कि इसे आगे नहीं बढ़ना चाहिए।

— igorsantos07

CSRF के हमलों को रोकने के लिए डबल-सबमिट कुकी पैटर्न को भी म्यूटेंट फॉर्म सबमिट करने से नहीं रोकता है?

— मार्टिन थोमा

Answer 1

फॉर्म जमा होने के बाद पहले से ही जमा करने के लिए विनीत जावास्क्रिप्ट का उपयोग करें। यहाँ jQuery का उपयोग करके एक उदाहरण दिया गया है।

संपादित करें: सबमिट बटन पर क्लिक किए बिना फॉर्म सबमिट करने के साथ फिक्स्ड समस्या। धन्यवाद, ichiban।

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});

Comments

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

— इचिबन

क्या आपको भी जरूरत है return true? मुझे लगता है कि आरंभिक जमा को इसके बिना काम करना चाहिए।

— साइमन ईस्ट

मेरा मानना return trueहै कि छोड़ दिया गया है तो निहित है।

— डेरेक

मैंने विनीत मान्यता और एमवीसी के साथ इस समाधान की कोशिश की। जेएस को पहले बुलाया जाता है जो हमेशा गलत तरीके से लौटता है और फिर सत्यापन कहा जाता है। तो अगर मेरे फॉर्म में कुछ सत्यापन त्रुटि है तो फॉर्म कभी जमा नहीं होता है !!

— बजन

वास्तव में महान काम करता है। मुझे सबमिट बटन को अक्षम करना और साथ ही उपयोगकर्ता का संकेत दिखाने के लिए सबमिट बटन टेक्स्ट को बदलना भी पसंद है। $(this).find("input[type='submit']").attr('disabled', 'disabled').val('submiting'); return true; });

— कैम सांग

Answer 2

मैंने एस्पेस्ट पीवीसी 3 विनीत सत्यापन के साथ वैनस्टी के समाधान की कोशिश की , और यदि क्लाइंट सत्यापन विफल रहता है, तो कोड अभी भी चलाया जाता है, और फॉर्म सबमिट अच्छे के लिए अक्षम है। मैं खेतों को सही करने के बाद फिर से जमा करने में सक्षम नहीं हूं। (देखें भजन की टिप्पणी)

इसलिए मैंने इस तरह से वैनस्टी की स्क्रिप्ट को संशोधित किया:

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

Comments

नोट करने के लिए कोई अन्य दुष्प्रभाव, या क्या आपने हर जगह आवेदन करने के लिए यह काम किया है?

— सियारन गलाघेर

Answer 3

क्लाइंट साइड फॉर्म सबमिशन कंट्रोल को बहुत ही शिष्टता से प्राप्त किया जा सकता है, ताकि ऑनसुमिट हैंडलर सबमिट बटन को छिपा सके और उसे लोडिंग एनीमेशन से बदल सके। इस तरह से उपयोगकर्ता को उसी स्थान पर तत्काल दृश्य प्रतिक्रिया मिलती है जहां उसका एक्शन (क्लिक) हुआ था। उसी समय आप फ़ॉर्म को दूसरी बार सबमिट करने से रोकते हैं।

यदि आप XHR के माध्यम से फॉर्म जमा करते हैं, तो ध्यान रखें कि आपको जमा करने की त्रुटियों को भी संभालना होगा, उदाहरण के लिए टाइमआउट। आपको फिर से सबमिट बटन प्रदर्शित करना होगा क्योंकि उपयोगकर्ता को फॉर्म को फिर से सबमिट करना होगा।

एक अन्य नोट पर, लिलिम्बिब एक बहुत ही मान्य बिंदु लाता है। सभी फॉर्म सत्यापन सर्वर साइड होने चाहिए। इसमें कई सबमिशन चेक शामिल हैं। ग्राहक पर कभी भरोसा न करें! यह केवल एक मामला नहीं है यदि जावास्क्रिप्ट अक्षम है। आपको यह ध्यान रखना होगा कि सभी क्लाइंट साइड कोड को संशोधित किया जा सकता है। यह कल्पना करना थोड़ा मुश्किल है लेकिन आपके सर्वर से बात कर रहा html / जावास्क्रिप्ट आपके द्वारा लिखे गए HTML / जावास्क्रिप्ट जरूरी नहीं है।

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

बेशक, एक बार में, आपको पहचानकर्ताओं को साफ करना होगा जिसके लिए कभी भी कोई फॉर्म डेटा जमा नहीं किया गया था। लेकिन सबसे शायद आपकी वेबसाइट पहले से ही "कचरा संग्रह" तंत्र के कुछ प्रकारों को नियुक्त करती है।

Answer 4

<form onsubmit="if(submitted) return false; submitted = true; return true">

Comments

निम्न त्रुटि से बचने के लिए, अपनी स्क्रिप्ट के सही बिंदु पर उपयोग करें <form onsubmit="return (typeof submitted == 'undefined') ? (submitted = true) : !submitted">, या लिखें :। var submitted = false;Uncaught ReferenceError: submitted is not defined

— तमस्सु बोल्वरी

Answer 5

यहाँ यह करने का सरल तरीका है:

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;    
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }    
</script>

Comments

jQuery के विनीत सत्यापन के साथ, अवरोधन स्क्रिप्ट को पहले और सत्यापन कहा जाता है, जिसके परिणामस्वरूप कोई भी सबमिशन नहीं होती है यदि सत्यापन त्रुटियां हैं

— bjan

Answer 6

क्लिक के तुरंत बाद सबमिट बटन को अक्षम करें। सुनिश्चित करें कि आप मान्यताओं को ठीक से संभालते हैं। सभी प्रसंस्करण या डीबी संचालन के लिए एक मध्यवर्ती पृष्ठ भी रखें और फिर अगले पृष्ठ पर पुनर्निर्देशित करें। यह सुनिश्चित करता है कि दूसरे पेज को रिफ्रेश करने से कोई और प्रोसेसिंग नहीं होती है।

Comments

हाँ, महान टिप शोबन, मैं सहमत हूँ। होना चाहिएform page ---submits to---> form_submission_script.php ---after saving, redirects to---> form_thankyou.html

— साइमन ईस्ट

Answer 7

वर्तमान समय को हैश करें, इसे प्रपत्र पर एक छिपा हुआ इनपुट बनाएं। सर्वर की तरफ, प्रत्येक फॉर्म सबमिशन के हैश की जांच करें; यदि आप पहले से ही उस हैश को प्राप्त कर चुके हैं तो आपको एक रिपीट सबमिशन मिल गया है।

संपादित करें: जावास्क्रिप्ट पर भरोसा करना एक अच्छा विचार नहीं है, इसलिए आप सभी उन विचारों को बनाए रख सकते हैं, लेकिन कुछ उपयोगकर्ताओं ने आपको सक्षम नहीं किया है। सही उत्तर सर्वर साइड पर उपयोगकर्ता इनपुट पर भरोसा नहीं करना है।

Comments

यह देखो "बहुत ज्यादा" नहीं? ;-)

— शोभन

ऐसा लगता है कि यह एक उपयोगकर्ता को प्रति सेकंड एक से अधिक बार फ़ॉर्म सबमिट करने से रोक देगा। अगर मैं 2009-05-29 12:13:37 पर फॉर्म जमा करता हूं, तो सर्वर मुझे उसी हैश के साथ दूसरा फॉर्म सबमिट नहीं करने देगा, लेकिन अगर मैंने सबमिट किया तो 2009-05-29 12:13:38 पर क्लिक करें। इसके माध्यम से जाना होगा। साथ ही, आपकी तकनीक 2 अलग-अलग उपयोगकर्ताओं को एक साथ दो अलग-अलग फ़ॉर्म सबमिट करने से रोकेगी: उनमें से एक को बाहर निकाल दिया जाएगा, भले ही यह संभवतः उससे पहला सबमिशन होगा।

— सारा वेसल्स

@moneypenny आपकी पहली आपत्ति झूठी है, हैश उस समय का होगा जब फॉर्म उपयोगकर्ता को भेजा गया था, न कि समय जमा करने के लिए। यदि आप वास्तव में दूसरे के बारे में चिंतित हैं, तो आपके पास बहुत सारे विकल्प हैं। आपके पास हैश करने के लिए उनकी सत्र आईडी जोड़ें, और / या सटीक समानता के लिए फ़ॉर्म के सभी क्षेत्रों की जांच करें; दो उपयोगकर्ताओं ने संभवतः एक ही फ़ॉर्म सबमिट नहीं किया था।

— llimllib

@ शोबान मुझे क्षमा करें, मैं यह नहीं कहता कि आप क्या कह रहे हैं

— llimllib

"अत्यधिक" देखने वाले की आंखों में है। यदि आपको वास्तव में डुप्लिकेट फॉर्म सबमिशन को रोकने की आवश्यकता है, तो समाधान का कम से कम हिस्सा सर्वर-साइड होना चाहिए। "आप उपयोगकर्ताओं पर भरोसा नहीं कर सकते।"

— बेन ब्लैंक

Answer 8

आप यह इंगित करने के लिए कि प्रगति संसाधन है, आप एक प्रगति पट्टी या एक स्पिनर भी प्रदर्शित कर सकते हैं।

Answer 9

JQuery का उपयोग करके आप कर सकते हैं:

$('input:submit').click( function() { this.disabled = true } );

और

   $('input:submit').keypress( function(e) {
     if (e.which == 13) {
        this.disabled = true 
     } 
    }
   );

Comments

यदि बटन अक्षम होने के बाद टेक्स्ट बॉक्स में ENTER दबाकर फॉर्म जमा किया जाता है तो क्या होगा?

— इकिबन

इस तरह से बटन को निष्क्रिय करने से उपयोगकर्ता एंटर को दबा सकेगा। लेकिन, यह सही है कि सबमिट इनपुट पर एक

— कीपर को बांधना होगा

यह बटन को सबमिट करने से रोकता है। इसलिए, सर्वर साइड सत्यापन को अक्षम करना।

— Marko Aleksić

@ मार्को, सही है, लेकिन वह ओपी ने कहा है, वैसे भी एक टोकन का उपयोग करने से फ़ॉर्म को दो बार जमा करने से रोका जा सकता है।

— बोरिस गुएरी

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

— साइमन ईस्ट

Answer 10

मुझे पता है कि आपने 'जावास्क्रिप्ट' के साथ अपने प्रश्न को टैग किया था, लेकिन यहां एक समाधान है जो जावास्क्रिप्ट पर बिल्कुल भी निर्भर नहीं करता है:

यह PRG नाम का एक वेबप पैटर्न है , और यहाँ एक अच्छा लेख है जो इसका वर्णन करता है

Answer 11

आप बस इसके साथ कई जमा रोक सकते हैं:

var Workin = false;

$('form').submit(function()
{
   if(Workin) return false;
   Workin =true;

   // codes here.
   // Once you finish turn the Workin variable into false 
   // to enable the submit event again
   Workin = false;

});

Comments

आपके उत्तर के साथ समस्या यह है कि उपयोगकर्ता द्वारा क्लिक किए जाने और समय के बीच एक दूसरा विभाजन होता है Workin =true;। डबल सबमिट अभी भी संभव हैं, लेकिन कम होने की संभावना है।

— प्रेषित

Answer 12

इस प्रश्न का सबसे सरल उत्तर जैसा कि पूछा गया है: "कभी-कभी जब प्रतिक्रिया धीमी होती है, तो व्यक्ति कई बार सबमिट बटन पर क्लिक कर सकता है। इसे होने से कैसे रोकें?"

बस नीचे दिए गए कोड की तरह फ़ॉर्म सबमिट बटन को अक्षम करें।

<form ... onsubmit="buttonName.disabled=true; return true;">
  <input type="submit" name="buttonName" value="Submit">
</form>

यह सबमिट बटन को अक्षम करेगा, सबमिट करने के लिए पहले क्लिक करें। इसके अलावा यदि आपके पास कुछ सत्यापन नियम हैं, तो यह ठीक काम करेगा। आशा है कि यह मदद करेगा।

Comments

मुझे लगता है कि आप कुछ याद कर रहे हैं कृपया अपना कोड पोस्ट करें।

— इमरान खान

Answer 13

क्लाइंट साइड पर , आपको सबमिट बटन को एक बार निष्क्रिय कर देना चाहिए क्योंकि फॉर्म को जावास्क्रिप्ट कोड के साथ सबमिट किया जाता है जैसे @vanstee और @chaos द्वारा प्रदान की गई विधि।

लेकिन नेटवर्क लैग या जावास्क्रिप्ट-अक्षम स्थिति के लिए एक समस्या है जहां आपको ऐसा करने से रोकने के लिए JS पर भरोसा नहीं करना चाहिए।

तो, सर्वर-साइड पर , आपको एक ही क्लाइंट से बार-बार सबमिशन की जांच करनी चाहिए और उस दोहराया को छोड़ देना चाहिए जो उपयोगकर्ता की झूठी कोशिश लगती है।

Comments

मुझे पता है कि यह एक लंबे समय से पहले उत्तर दिया गया था, लेकिन क्या कोई समझा सकता है कि नेटवर्क लैग अक्षम को कैसे रोक सकता है? मैं अभी इस मुद्दे से निपट रहा हूं और मैं इस बात से बहुत उलझन में हूं कि बटन को निष्क्रिय करने के बावजूद एक फॉर्म को कैसे डबल-सबमिट किया गया। मैंने कभी भी जावास्क्रिप्ट अक्षम के बारे में नहीं सोचा था। मुझे नहीं लगता कि मेरे मामले में यह मुद्दा है, लेकिन फिर भी यह दिलचस्प अंतर्दृष्टि है।

— davidatthepark

मैं क्लिक हैंडलर को थ्रॉटल करने पर भी विचार कर रहा था।

— davidatthepark

Answer 14

आप सुरक्षित jquery प्लगइन की कोशिश कर सकते हैं ।

$('#example').safeform({
    timeout: 5000, // disable form on 5 sec. after submit
    submit: function(event) {
        // put here validation and ajax stuff...

        // no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
})

Answer 15

मेरे लिए सबसे सरल और सुरुचिपूर्ण समाधान:

function checkForm(form) // Submit button clicked
{
    form.myButton.disabled = true;
    form.myButton.value = "Please wait...";
    return true;
}

<form method="POST" action="..." onsubmit="return checkForm(this);">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

अधिक के लिए लिंक ...

Answer 16

इस कोड का उपयोग अपने फॉर्म में करें। यह कई क्लिकों को हैंडल करेगा।

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function() {
            $(this).submit(function() {
                return false;
            });
            return true;
        });     
    }); 
</script>

यह सुनिश्चित करने के लिए काम करेगा।

Answer 17

यह हर 2 सेकंड सबमिट करने की अनुमति देता है। सामने सत्यापन के मामले में।

$(document).ready(function() {
    $('form[debounce]').submit(function(e) {
        const submiting = !!$(this).data('submiting');

        if(!submiting) {
            $(this).data('submiting', true);

            setTimeout(() => {
                $(this).data('submiting', false);
            }, 2000);

            return true;
        }

        e.preventDefault();
        return false;
    });
})

Answer 18

कई को प्रस्तुत करने से रोकने का सबसे अच्छा तरीका यह है कि विधि में बटन आईडी पास करें।

    function DisableButton() {
        document.getElementById("btnPostJob").disabled = true;
    }
    window.onbeforeunload = DisableButton; 

Answer 19

जावास्क्रिप्ट का उपयोग करना थोड़ा आसान है। निम्नलिखित कोड है जो वांछित कार्यक्षमता देगा:

$('#disable').on('click', function(){
    $('#disable').attr("disabled", true);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="disable">Disable Me!</button>

Answer 20

सबसे सरल समाधान यह है कि क्लिक पर बटन को अक्षम करें, ऑपरेशन पूरा होने के बाद इसे सक्षम करें। Jsfiddle पर समान समाधान की जांच करने के लिए:

[click here][1]

और आप इस जवाब पर कुछ अन्य समाधान पा सकते हैं ।

Comments

जबकि एक लिंक महान है, कृपया अपने लिंक (ओं) को संदर्भ प्रदान करें , क्योंकि उत्तर में वास्तव में उत्तर होना चाहिए। इस बात से अवगत रहें कि किसी बाहरी साइट की लिंक से मुश्किल से अधिक होना एक संभावित कारण है कि कुछ उत्तरों को क्यों और कैसे हटाया जाता है? ।

— Jan

Answer 21

यह मेरे लिए बहुत अच्छा काम करता है। यह खेत को सबमिट करता है और बटन को निष्क्रिय करता है और 2 सेकंड के बाद बटन को सक्रिय करता है।

<button id="submit" type="submit" onclick="submitLimit()">Yes</button>

function submitLimit() {
var btn = document.getElementById('submit')
setTimeout(function() {
    btn.setAttribute('disabled', 'disabled');
}, 1);

setTimeout(function() {
    btn.removeAttribute('disabled');
}, 2000);}

ECMA6 सिंटेक्स में

function submitLimit() {
submitBtn = document.getElementById('submit');

setTimeout(() => { submitBtn.setAttribute('disabled', 'disabled') }, 1);

setTimeout(() => { submitBtn.removeAttribute('disabled') }, 4000);}

Answer 22

बस ब्राउज़र इनपुट सत्यापन को दरकिनार किए बिना संभव उत्तरों को जोड़ने के लिए

$( document ).ready(function() {
    $('.btn-submit').on('click', function() {
        if(this.form.checkValidity()) {
            $(this).attr("disabled", "disabled");
            $(this).val("Submitting...");
            this.form.submit();
        }
    });
});

Answer 23

इससे पहले जो प्रस्तावित किया गया था, उसका एक विकल्प:

jQuery('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
});