رفض النقرات عند إرسال نموذج ويب

Question

يواجه نظام الواجهة الخلفية الذي تمت كتابته بشكل سيئ والذي نتعامل معه مشكلة في التعامل مع الحمل الذي ننتجه.أثناء قيامهم بإصلاح مشكلات التحميل الخاصة بهم، نحاول تقليل أي حمل إضافي نقوم بإنشائه، أحد هذه المشاكل هو أن النظام الخلفي يستمر في محاولة وخدمة إرسال النموذج حتى لو جاء إرسال آخر من نفس المستخدم.

شيء واحد لاحظناه هو قيام المستخدمين بالنقر المزدوج على زر إرسال النموذج.أحتاج إلى إلغاء ارتداد هذه النقرات، ومنع إرسال نموذج ثانٍ.
نهجي (باستخدام النموذج الأولي) يضع onSubmit في النموذج الذي يستدعي الوظيفة التالية التي تخفي زر إرسال النموذج وتعرض "جارٍ التحميل..." div.

function disableSubmit(id1, id2) {
    $(id1).style.display = 'none';
    $(id2).style.display = 'inline';
}

المشكلة التي وجدتها في هذا الأسلوب هي أنه إذا استخدمت صورة GIF متحركة في "جارٍ التحميل..." div, ، يتم تحميله بشكل جيد ولكنه لا يتحرك أثناء إرسال النموذج.

هل هناك طريقة أفضل للقيام بهذا الارتداد والاستمرار في عرض الرسوم المتحركة على الصفحة أثناء انتظار تحميل نتيجة النموذج (أخيرًا)؟­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

Answer 1

إذا كان jQuery في متناول يديك، فأرفق حدث click() الذي يعطل الزر بعد الإرسال الأولي -

$('input[type="submit"]').click(function(event){
 event.preventDefault();
 this.click(null);
});

من هذا القبيل.

Answer 2

باستخدام النموذج الأولي، يمكنك استخدام هذا الرمز لمشاهدة ما إذا تم إرسال أي نموذج وتعطيل جميع أزرار الإرسال عند حدوث ذلك:

document.observe( 'dom:loaded', function() { // when document is loaded
    $$( 'form' ).each( function( form ) { // find all FORM elements in the document
        form.observe( 'submit', function() {  // when any form is submitted
            $$( 'input[type="submit"]' ).invoke( 'disable' );  // disable all submit buttons
        } );
    } );
} );

من المفترض أن يساعد هذا المستخدمين الذين ينقرون نقرًا مزدوجًا على أزرار الإرسال.ومع ذلك، سيظل من الممكن إرسال النموذج بأي طريقة أخرى (على سبيل المثال.الضغط على Enter في حقل النص).لمنع ذلك، عليك أن تبدأ في مشاهدة أي نموذج يتم إرساله بعد النموذج الأول وإيقافه:

document.observe( 'dom:loaded', function() {
    $$( 'form' ).each( function( form ) {
        form.observe( 'submit', function() {
            $$( 'input[type="submit"]' ).invoke( 'disable' );
            $$( 'form' ).observe( 'submit', function( evt ) { // once any form is submitted
                evt.stop(); // prevent any other form submission
            } );
        } );
    } );
} );

Answer 3

جميع الاقتراحات الجيدة أعلاه.إذا كنت تريد حقًا "الرفض" كما تقول، فلدي وظيفة رائعة لذلك.مزيد من التفاصيل في unscriptable.com

var debounce = function (func, threshold, execAsap) {

    var timeout;

    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };

        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);

        timeout = setTimeout(delayed, threshold || 100); 
    };

}

Answer 4

يمكنك محاولة تعيين علامة "معطل" على عنصر الإدخال (النوع=إرسال)، بدلاً من مجرد تغيير النمط.يجب أن يؤدي ذلك إلى إغلاق الصفحة بالكامل من جانب المتصفح.

يرى: http://www.prototypejs.org/api/form/element#method-disable

Answer 5

قم بإرسال النموذج باستخدام AJAX، وسيتم تحريك ملف GIF.