zoukankan      html  css  js  c++  java
  • 防止按钮重复提交的方法

    1. 一种简单的方法

    //前台
    <asp:Button ID="btnTest" runat="server" Text="Button" onclick="btnTest_Click"  CssClass="button_common" />

    //后台
    protected void Page_Load(object sender, EventArgs e)
    {
       
    this.btnTest.Attributes.Add("onclick", ClientScript.GetPostBackEventReference(btnTest, "Click"+ ";this.disabled=true; this.value='提交中...';");
    }

    protected void btnTest_Click(object sender, EventArgs e)
    {
       System.Threading.Thread.Sleep(
    5000);
       ClientScript.RegisterStartupScript(GetType(), 
    "btnTest""alert('提交成功!!!');"true);
    }

    可以实现基本功能,提交时,按钮灰掉,按钮显示“提交中...”。

    但是当点击按钮需要验证的时候,比如:

    //JS
    function submitValidate()
    {
      
    if(confirm("Click?"))
        
    return true;
      
    else
        
    return false;
    }
    //前台
    <asp:Button ID="btnTest" runat="server" Text="Button" onclick="btnTest_Click"  CssClass="button_common" OnClientClick="return submitValidate();" />

    Page_Load内的代码会执行,但是按钮样式却不改变了,也不能控制重复提交了(为什么呢?)

    2. 使用JS方法

    //JS
       var isBusyFlag = false;
        
    function ClickButtonValidation(){
            
    if(isBusyFlag){       
                alert(
    "You have click, please waiting...");
                
    return false;
            }
    else{
                isBusyFlag 
    = true;
                
    return true;
            }
        }
        
    function buttonControl(id, btnText, condition)
        {
            
    var obj= document.getElementById(id);
            
    if(condition || condition ==undefined)
            {
                
    if(ClickButtonValidation()){
                obj.className 
    = "disable_button"
                obj.value 
    = btnText;
                
    return true;
                }
                
    else 
                {
                    isBusyFlag 
    = false;
                    
    return false;
                }
            }
            
    else
                
    return false;
        }

    //前台
    <asp:Button ID="btnTest" runat="server" Text="Button" onclick="btnTest_Click"  CssClass="button_common" OnClientClick="return buttonControl('btnTest','提交中...',submitValidate());" />
    //如果没有按钮验证条件,可以写为OnClientClick="return buttonControl('btnTest','提交中...');"

    //后台
            protected void Page_Load(object sender, EventArgs e)
            {
            }

            protected 
    void btnTest_Click(object sender, EventArgs e)
            {
                System.Threading.Thread.Sleep(
    5000);
                ClientScript.RegisterStartupScript(GetType(), 
    "btnTest""alert('提交成功!!!');"true);
            }

    此方法可以作为公用方法,供多种按钮调用。

    在JS方法里,不可以设置 obj.disabled = true; 否则,就不执行后台代码了。

  • 相关阅读:
    安卓手机批量导入通讯录 Vcard文件和excel
    关于vue项目中文件上传,复现,模版下载常见用法(el-upload)
    用scrollTop实现固定定位
    自己对闭包的理解(保证能看懂)
    el-progress组件使用:自动计算percentage,format自定义显示文字
    css背景图片位置:background的position
    2018款Mac mini通过外置移动硬盘安装windows10系统
    TypeError: Constructor parameter should be str
    aiohttp使用方法
    json解析出错:json.decoder.JSONDecodeError: Invalid escape:
  • 原文地址:https://www.cnblogs.com/niuniu1985/p/1781567.html
Copyright © 2011-2022 走看看