locked
Button needs to be disable for 5 seconds to avoid double click RRS feed

  • Question

  • User1914091530 posted

    Hi,

    I need to disable button for 5 seconds, and continue control passed to the click event of the button

    Below given is aspx page

    <head runat="server">
        <title></title>
        <script language="javascript" type="text/javascript">
    
            function SalaryProcessDateVal() {
                
                //alert('Date kformat should be dd/MM/yyyy.1');
                //return false;
    
    
            }
    
            function DisableEnable() {
                document.getElementById("btn").disabled = true;
                setTimeout(function () { document.getElementById("btn").disabled = false; }, 5000);
            }
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
            <asp:Button ID="btn" runat="server"  Text="Confirm and Forward To Checker"  Width="210px" OnClick="btn_Click" />
        
        </div>
        </form>
    </body>
    </html>
    

    Below given is c# code

    protected void Page_Load(object sender, EventArgs e)
    {
           btn.Attributes.Add("onclick", "DisableEnable();return SalaryProcessDateVal();");
    }
    
    protected void btn_Click(object sender, EventArgs e)
    {
    //control should be reached here
    }

    Please help...

    Regards,

    Shijo

    Thursday, March 14, 2019 10:28 AM

Answers

  • User839733648 posted

    Hi shijostephen,

    I've tested your code and suggested that you could add a hidden field to make the button trigger.

    It is strange that if you do not add a field, the passing btn value will lose.

    So my testing workaround is to add a hidden field and pass the needed value.

    Here is my testing code.

        <form id="form1" runat="server">
            <div>
                <asp:Button ID="btn" runat="server" Text="Confirm and Forward To Checker" Width="210px" OnClick="btn_Click" />
            </div>
            <script type="text/javascript">
                function SalaryProcessDateVal() {
                    alert('Date kformat should be dd/MM/yyyy.1');
                    return false;
                }
                function DisableEnable() {
                    document.getElementById("btn").disabled = true;
                    setTimeout(function () {
                        document.getElementById("btn").disabled = false;
    
                        var input = document.createElement("input");
                        input.type = "hidden";
                        input.name = "btn";
                        input.value = "Confirm and Forward To Checker";
                        document.getElementById("form1").appendChild(input);
                        document.getElementById("form1").submit();
                    }, 2000);
                }
            </script>
        </form>
            protected void Page_Load(object sender, EventArgs e)
            {
                btn.Attributes.Add("onclick", "DisableEnable();return SalaryProcessDateVal();");
            }
    
            protected void btn_Click(object sender, EventArgs e)
            {           
                Response.Write("111111111111111111");
            }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 15, 2019 9:05 AM

All replies

  • User-2054057000 posted

    Your button is a server side code so once you click it then the page will do the postback. The postback will happen very quickly so you cannot set the button to disable for 5 second. 

    This type of feature is seen on website that do partial postback with AJAX. You can achieve ajax using jQuery AJAX method quite easily.

    This is the example of disabling button for 5 seconds when you do partial postback with ajax.

    $("#btn").click(function (e) {
        $(this).prop('disabled', true); //disable the button
     
        setTimeout(function () { 
            $(this).prop('disabled', false); // enable the button after 5 seconds
         }, 5000);
     
        $.ajax({ 
        //.. perform ajax 
        }); 
    });

    Hope it helps you.tongue-out

    Thursday, March 14, 2019 4:04 PM
  • User839733648 posted

    Hi shijostephen,

    I've tested your code and suggested that you could add a hidden field to make the button trigger.

    It is strange that if you do not add a field, the passing btn value will lose.

    So my testing workaround is to add a hidden field and pass the needed value.

    Here is my testing code.

        <form id="form1" runat="server">
            <div>
                <asp:Button ID="btn" runat="server" Text="Confirm and Forward To Checker" Width="210px" OnClick="btn_Click" />
            </div>
            <script type="text/javascript">
                function SalaryProcessDateVal() {
                    alert('Date kformat should be dd/MM/yyyy.1');
                    return false;
                }
                function DisableEnable() {
                    document.getElementById("btn").disabled = true;
                    setTimeout(function () {
                        document.getElementById("btn").disabled = false;
    
                        var input = document.createElement("input");
                        input.type = "hidden";
                        input.name = "btn";
                        input.value = "Confirm and Forward To Checker";
                        document.getElementById("form1").appendChild(input);
                        document.getElementById("form1").submit();
                    }, 2000);
                }
            </script>
        </form>
            protected void Page_Load(object sender, EventArgs e)
            {
                btn.Attributes.Add("onclick", "DisableEnable();return SalaryProcessDateVal();");
            }
    
            protected void btn_Click(object sender, EventArgs e)
            {           
                Response.Write("111111111111111111");
            }

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 15, 2019 9:05 AM