Disable Submit Button To Prevent Multiple Clicks

When I was googled to get a solution for disabling a submit button after submission or prevent the user from multple clicks of the submit button, I am not able to find out the nice one. All are complex and required lot of coding in dom objects. Then I decide to find a simple solution which enables the users to understand the logic and embed it easily in their code.

Aspx:

<%@ Page Language="C#" AutoEventWireup="true" 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" >

<head runat="server">

<title>Untitled Page</title>

<script type="text/javascript" language="javascript">

function CheckDetails(con)

{

//here I am checking whether page is validated. so you can use validation controls too...

if(Page_ClientValidate() == true)

{

//hide the original submit button

con.style.display = "none";

//set html button text to original button text

document.getElementById("btnhide").value = con.value;

//show the html button instead of original button

document.getElementById("btnhide").style.display = "";

return true;

}

else

{

return false;

}

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:TextBox ID="txtBox" runat="server"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*" ControlToValidate="txtBox"></asp:RequiredFieldValidator>

<br />

<!-- Here is the button which will replace original submit button while page is submitting -->

<input type="button" id="btnhide" class="button" style="display:none;" disabled="disabled" value="Save"/>

<asp:Button ID="dtnSubmit" runat="server" Text="Click Here" OnClientClick="return CheckDetails(this);" OnClick="dtnSubmit_Click" />

</div>

</form>

</body>

</html>



Code behind...

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void dtnSubmit_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(5000);

}

}


Code Explanation:

1.
Main logic is, replace the submit button while submitting with the HTML button which is disabled. After the page processed and rendering, the chages done in Javascript will be rolledback. Now origial button will be shown and HTML button will  hiddden.

2. In Javscript function, I have called the Page_ClientValidate() 
method which will do the validation for validation controls.

3. If validation is passed, then it will hide submit button and show the HTML button.. Untile the page is processed, we cannot able to access click the submit button....

Cheers All,
Vasanth   

By Vasanthakumar D   Popularity  (5887 Views)