ما هو أفضل أسلوب لتعطيل زر الإرسال (من جانب العميل)؟

StackOverflow https://stackoverflow.com/questions/46079

سؤال

تفاصيل:

  • يتم التعطيل فقط بعد أن ينقر المستخدم على زر الإرسال، ولكن قبل إعادة النشر إلى الخادم
  • نماذج ويب ASP.NET (.NET 1.1)
  • تفضل jQuery (إن وجدت مكتبة على الإطلاق)
  • يجب تمكينه في حالة إعادة تحميل النموذج (على سبيل المثال.فشلت بطاقة الائتمان)

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

هل كانت مفيدة؟

المحلول

بالنسبة لجميع أزرار الإرسال، عبر JQuery، ستكون:

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

أو قد يكون من المفيد القيام بذلك عند إرسال النموذج:

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

لكنني أعتقد أنه يمكننا تقديم إجابة أفضل لسؤالك إذا عرفنا المزيد عن السياق.

إذا كان هذا طلبًا من نوع ajax، فستحتاج إلى التأكد من تمكين أزرار الإرسال مرة أخرى في حالة النجاح أو الفشل.

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

نصائح أخرى

يمكنك أن تفعل شيئا مثل هذا:

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

فوائد هذا:

  • سيعمل مع جميع النماذج الخاصة بك، مع جميع طرق التقديم:
    • النقر على عنصر إرسال
    • الضغط على زر الإدخال، أو
    • الاتصال form.submit() من بعض التعليمات البرمجية الأخرى
  • سيتم تعطيل جميع عناصر الإرسال:
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • انها حقا قصيرة.

أعتقد أنك لا تريدهم أن يضغطوا على زر الإرسال أكثر من مرة أثناء معالجة الإرسال.

كان الأسلوب الذي اتبعته هو إخفاء الزر بالكامل وعرض نوع ما من مؤشرات الحالة (صور متحركة، وما إلى ذلك) بدلاً من ذلك.

إليك مثالًا مفتعلًا للغاية (إنه من الناحية الفنية في النموذج الأولي ولكن أعتقد أن إصدار jquery سيكون مشابهًا جدًا):

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

في مسج:

$('#SubmitButtonID').click(function() { this.disabled = true; });

الشيء الذي يجب أن تكون على دراية به هو أنه لا يجب عليك تعطيل الزر قبل إرسال النموذج.إذا قمت بتعطيل الزر باستخدام جافا سكريبت في حدث OnClick، فقد تفقد إرسال النموذج.

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

هناك ثلاث طرق لإرسال النموذج الذي ينبغي تغطيته.استخدم اقتراحات ديفيد ماكلولين وجيمي.سيقوم أحدهما بتعطيل عنصر نموذج زر الإرسال بينما يقوم الآخر بتعطيل إرسال نموذج HTML الأساسي.

بالنسبة للثالث، لن يؤدي ذلك إلى تعطيل جافا سكريبت من القيام بـ form.submit().ال OnSubmit="return false" تنطبق الطريقة فقط عندما ينقر المستخدم على زر الإرسال أو يضغط على Enter في عنصر نموذج الإدخال.يجب أيضًا التعامل مع البرمجة النصية من جانب العميل.

ماذا عن

الكود خلف:

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

جافا سكريبت:

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top