لماذا لا شكل آخر عند تعطيل زر الإرسال لمنع النقر المزدوج?

https://stackoverflow.com/questions/400616

03-07-2019
|

سؤال

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

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

هنا بعض التعليمات البرمجية على كيفية تكرار ذلك (اختبار في IE8 Beta2, ولكن لدي نفس المشكلة في IE7)

بلدي رمز aspx

<%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
    function btn_onClick()
    {
        var chk = document.getElementById("chk");
        if(chk.checked)
        {
            var btn = document.getElementById("btn");
            btn.disabled = true;
        }
    }
</script>
<body>
    <form id="form1" runat="server">
        <asp:Literal ID="lit" Text="--:--:--" runat="server" />
        <br />
        <asp:Button ID="btn" Text="Submit" runat="server" />
        <br />
        <input type="checkbox" id="chk" />Disable button on first click
    </form>
</body>
</html>

بلدي cs رمز

using System;

public partial class _Default : System.Web.UI.Page 
{
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        btn.Click += new EventHandler(btn_Click);
        btn.OnClientClick = "btn_onClick();";
    }

    void btn_Click(object sender, EventArgs e)
    {
        lit.Text = DateTime.Now.ToString("HH:mm:ss");
    }
}

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

ما أنا في عداد المفقودين هنا ؟

شكرا مقدما.

المحلول

أعتقد أنك في عداد المفقودين هذا الوسم:

UseSubmitBehavior="false"

انها محاولة من هذا القبيل:

<asp:Button ID="btnUpdate" runat="server" UseSubmitBehavior="false" OnClientClick="if(Page_ClientValidate()) { this.disabled = true; } else {return false;}" Text = "Update" CssClass="button" OnClick="btnUpdate_Click" ValidationGroup="vgNew"/>

تفسير

نصائح أخرى

fallen888 هو الحق ، النهج الخاص بك لا يعمل عبر المتصفح.يمكنني استخدام هذا المقتطف قليلا لمنع مزدوجا.

UseSubmitBehavior="false" يحول زر إرسال إلى وضعها الطبيعي زر (<input type="button">).إذا كنت لا تريد أن يحدث هذا ، يمكنك إخفاء زر إرسال و على الفور تضاف تعطيل زر في مكانها.لأن هذا يحدث بسرعة وسوف تبدو زر يصبح تعطيل المستخدم.التفاصيل في مدونة جوش Stodola.

رمز المثال (مسج):

$("#<%= btnSubmit.ClientID %>").click(function()
{
  $(this)
    .hide()
    .after('<input type="button" value="Please Wait..." disabled="disabled" />');
});

"تعطيل" تحكم HTML لا تنتج دائما متسقة السلوك في جميع المتصفحات الرئيسية.لذلك أنا أحاول أن البقاء بعيدا من ذلك على جانب العميل ، لأن (العمل مع ASP.NET نموذج) تحتاج إلى تتبع عناصر الدولة على العميل و الخادم في هذه الحالة.

ما أريد القيام به هو تحريك زر خارج الجزء المرئي من النافذة عن طريق تبديل الزر className إلى فئة CSS التي تحتوي على ما يلي:

.hiddenButton
{
  position: absolute;
  top: -1000px;
  left: -1000px;
}

الآن ما وضع في مكان الزر ؟

أما الصورة التي تبدو مثل تعطيل زر
أو مجرد النص الذي يقول: "يرجى الانتظار..."

وهذا يمكن أن يتم من نفس الطريق ولكن في الاتجاه المعاكس.نبدأ مع العناصر التي كانت مخبأة في تحميل الصفحة و ثم التبديل إلى مرئية className على تقديم نموذج.

نحن نستخدم التالية مسج النصي إلى تعطيل جميع الأزرار (input type=submit و زر) ، عندما زر واحد النقر.

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

$(document).ready(function() {
    $(":button,:submit").bind("click", function() {
        setTimeout(function() {
            $(":button,:submit").attr("disabled", "true");
        }, 0);
    });
});

هذا السيناريو يمكن أن تمتد بسهولة مع تحقق Page_ClientValidate().

document.getElementById('form1').onsubmit = function() {
    document.getElementById('btn').disabled = true;
};

هذا هو الصحيح و طريقة بسيطة للقيام بذلك:

يعمل في جميع المتصفحات (على عكس الحل المقبول أعلاه).

إنشاء مساعد الأسلوب في التطبيق الخاص بك (في Utlity مساحة اسم):

    Public Shared Sub PreventMultipleClicks(ByRef button As System.Web.UI.WebControls.Button, ByRef page As System.Web.UI.Page)
        button.Attributes.Add("onclick", "this.disabled=true;" + page.ClientScript.GetPostBackEventReference(button, String.Empty).ToString)
    End Sub

الآن من التعليمات البرمجية خلف كل من صفحات الويب الخاصة بك يمكنك ببساطة الاتصال:

    Utility.PreventMultipleClicks(button1, page)

حيث button1 هو الزر الذي ترغب في منع عدة نقرات.

هذا ما يفعله هو ببساطة يضع على انقر فوق معالج:هذا.تعطيل=true

ومن ثم إلحاق الأزرار الخاصة بعد الظهر معالج, حتى نحصل على:

onclick="this.تعطيل=true";__doPostBack('ID$ID',");"

هذا لا يفطر السلوك الافتراضي من الصفحة و تعمل في جميع المتصفحات كما هو متوقع.

استمتع!

لأغراض التصحيح ، ماذا يحدث إذا وضع شرط آخر ضد(chk.التحقق)?

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

function btn_click()
var chk = document.getElementById("chk");
    if(chk.checked)
    {
            var btn = document.getElementById("btn");
            btn.disabled = true;
            return true;   //this enables the controls action to propagate
    }
    else    return false;  //this prevents it from propagating
}

بالنسبة مسج المستخدمين

سوف تحصل في جميع أنواع المشاكل محاولة إضافة جافا سكريبت مباشرة إلى الحدث onClick على ASP.NET أزرار عند استخدام مسج المستمعين الحدث.

لقد وجدت أن أفضل طريقة لتعطيل الأزرار على إعادة نشر العمل أن تفعل شيئا مثل هذا:

    $(buttonID).bind('click', function (e) {

        if (ValidateForm(e)) {

            //client side validation ok!
            //disable the button:
            $(buttonID).attr("disabled", true);

            //force a postback:
            try {
                __doPostBack($(buttonID).attr("name"), "");
                return true;
            } catch (err) {
                return true;
            }

        }
        //client side validation failed!
        return false;
    });

حيث ValidateForm هو التحقق من صحة مخصصة الوظيفة التي تقوم بإرجاع true أو false إذا كان النموذج الخاص بك بالتحقق من جانب العميل.

و buttonID هو معرف الزر الخاص بك مثل '#button1'

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow