Why doesn't my form post when I disable the su

Like every other web developer on the planet, I have an issue with users double clicking the submit button on my forms. My understanding is that the conventional way to handle this issue, is to disable the button immediately after the first click, however when I do this, it doesn't post.

I did do some research on this, god knows there's enough information, but other questions like Disable button on form submission, disabling the button appears to work. The original poster of Disable button after submit appears to have had the same problem as me, but there is no mention on how/if he resolved it.

Here's some code on how to repeat it (tested in IE8 Beta2, but had same problem in IE7)

My aspx code

<%@ 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>

My cs code

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");
    }
}

Notice that when you click the button, a postback occurs, and the time is updated. But when you check the check box, the next time you click the button, the button is disabled (as expected), but never does the postback.

WHAT THE HECK AM I MISSING HERE???

Thanks in advance.

标签： asp.net javascript client-scripting double-submit-prevention

10条回答

傲

2楼-- · 2019-02-06 22:04

fallen888 is right, your approach doesn't work cross-browser. I use this little snippet to prevent double-click.

0人赞添加讨论(0) 举报

Summer. ? 凉城

3楼-- · 2019-02-06 22:09

FOR JQUERY USERS

You will get into all sorts of problems trying to add javascript directly to the onClick event on ASP.NET buttons when using jQuery event listeners.

I found the best way to disable buttons and get the postback to work was to do something like this:

    $(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;
    });

Where ValidateForm is your custom validation function which returns true or false if your form validates client side.

And buttonID is the id of your button such as '#button1'

0人赞添加讨论(0) 举报

Bombasti

4楼-- · 2019-02-06 22:14

This is the correct and simple way to do this:

It works in all browsers (unlike the accepted solution above).

Create a helper method in your application (say in a Utlity Namespace):

    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

Now from the code behind of each of your web pages you can simply call:

    Utility.PreventMultipleClicks(button1, page)

where button1 is the the button you want to prevent multiple clicks.

What this does is simply sets the on click handler to: this.disabled=true

and then appends the buttons own post back handler, so we get:

onclick="this.disabled=true";__doPostBack('ID$ID','');"

This does not break the default behaviour of the page and works in all browsers as expected.

Enjoy!

0人赞添加讨论(0) 举报

冷血范

5楼-- · 2019-02-06 22:18

Make sure that your javascript function returns true (or a value that would evaluate to boolean true), otherwise the form won't get submitted.

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
}

0人赞添加讨论(0) 举报

仙女界的扛把子

6楼-- · 2019-02-06 22:22

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

0人赞添加讨论(0) 举报

一纸荒年 Trace。

7楼-- · 2019-02-06 22:27

I think you're just missing this tag:

UseSubmitBehavior="false"

Try it like this:

<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"/>

Explanation

0人赞添加讨论(0) 举报

1 2 下一页

Why doesn't my form post when I disable the su

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间