Jump to content

Disable Submit Button w/OnClientClick: Not Working


kwilliams

Recommended Posts

I have a web form that collects basic data from a user (name, address, etc.), and then submits that data to a SQL Server 2000 table. It works great, except that some of those users click on the submit button multiple times, which submits duplicate entries into the database.So I'd like to disable the Submit button upon the button being clicked and the form being valid. I Google'd "OnClientClick Property with validation" (see http://www.google.com/search?client=firefo...=Google+Search), and tried several of their different suggestion without success. Here's what happens with each attempt:ATTEMPT #1 Add "this.disabled=true;" to submit button's OnClientClick property directly to the asp.net web form:regform.aspx.vb (#1):

Partial Class regform	Inherits System.Web.UI.Page	Private ds As New DataSet()	Dim sqlConn As SqlConnection	Dim sqlCmd As SqlCommand	Dim strConnection As String	Private cmd As New SqlCommand() 'Here we declare the parameter which we have to use in our application	Sub SubmitBtn_Click(ByVal Sender As Object, ByVal E As EventArgs)		If Page.IsValid Then			Try				'Jobs go there that send data to database			Catch				lblErrorMsg.Text = "There was a problem while submitting this form. Please contact the Webmaster at xxx-xxxx.</a>."			End Try		End If	End SubEnd Class

regform.aspx (#1):

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" EnableSessionState="true" EnableViewState="true" CodeFile="regform.aspx.vb" Inherits="regform" title="Registration Form" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">	<%  If Not Page.IsPostBack Then%>		<h2>Registration Form</h2>		<br />		This form will allow for you to register online for class(es):		<br /><br />		<form id="formReg" name="formReg" action="" method="post" runat="server">			<!-- ***Several form fields go here that include required field and regular expression validators -->***			<asp:Button ID="btnSubmit" Text="Submit" OnClick="SubmitBtn_Click" runat="server" OnClientClick="this.disabled=true;" />		</form>	<% Else %>		<asp:label id="lblErrorMsg" runat="server" /><br />	<% End If %>	  </asp:Content>

#1 result:The submit button does get disabled once it's clicked, but the SubmitBtn_Click job doesn't fire at all.ATTEMPT #2 Add "java script:this.disabled=true;" to submit button's OnClientClick property via code file:regform.aspx.vb (#2):

Partial Class regform	Inherits System.Web.UI.Page	Private ds As New DataSet()	Dim sqlConn As SqlConnection	Dim sqlCmd As SqlCommand	Dim strConnection As String	Private cmd As New SqlCommand() 'Here we declare the parameter which we have to use in our application	Sub SubmitBtn_Click(ByVal Sender As Object, ByVal E As EventArgs)		If Page.IsValid Then			Try			'Disable button when form is submitted			'btnSubmit.Attributes.Add("OnClientClick", "this.disabled=true;")				'Jobs go there that send data to database			Catch				lblErrorMsg.Text = "There was a problem while submitting this form. Please contact the Webmaster at xxx-xxxx.</a>."			End Try		End If	End SubEnd Class

regform.aspx (#2):

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" EnableSessionState="true" EnableViewState="true" CodeFile="regform.aspx.vb" Inherits="regform" title="Registration Form" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">	<%  If Not Page.IsPostBack Then%>		<h2>Registration Form</h2>		<br />		This form will allow for you to register online for class(es):		<br /><br />		<form id="formReg" name="formReg" action="" method="post" runat="server">			<!-- ***Several form fields go here that include required field and regular expression validators -->***			<asp:Button ID="btnSubmit" Text="Submit" OnClick="SubmitBtn_Click" runat="server" />		</form>	<% Else %>		<asp:label id="lblErrorMsg" runat="server" /><br />	<% End If %>	  </asp:Content>

#2 result:The web form goes through fine with the validation, but the button never gets disabled, and the form can be submitted multiple times.The submit button does get disabled once it's clicked, but the SubmitBtn_Click job doesn't fire at all.Using suggestions from the Google search results, I've also tried adding the following properties to the Page_Load and SubmitBtn_Click jobs within the code-file without success:btnSubmit.Attributes.Add("OnClientClick", "this.style.display='none';")btnSubmit.Enabled = FalsebtnSubmit.Attributes.Add("onclick", "this.disabled=true;")Me.btnSubmit.Attributes.Add("onclick", Me.Page.ClientScript.GetPostBackEventReference(btnSubmit, [string].Empty) + ";this.value='Please wait...';this.disabled = true;")btnSubmit.Attributes.Item("onclick") = "this.disabled=true;"btnSubmit.Attributes.Item("onclick") = "java script:document.formReg.btnSubmit.disabled =1;"btnSubmit.Attributes.Add("onclick", ClientScript.GetPostBackEventReference(btnSubmit) & ";this.value='Please wait...';this.disabled = true;")If anyone could help me and/or point me in the right direction, I'd very much appreciate it. Thanks.

Link to comment
Share on other sites

I've used this javascript function to some success:

function onesubmit(element, delay){	var tagname = element.tagName.toLowerCase();		delay = (delay) ? delay : 1500;		if(tagname == "a")	{		var href = element.href;		var click = element.onclick;				setTimeout(function() { element.href = "java script:void(0);"; element.onclick = null; }, 0);		setTimeout(function() { element.href = href; element.onclick = click; }, delay);	}	else if(tagname == "input")	{		var click = element.onclick;				setTimeout(function() { element.disabled = true; element.onclick = null; }, 0);		setTimeout(function() { element.disabled = false; element.onclick = click; }, delay);	}}

Then, in the ASPX:

<asp:Button ID="myButton" runat="server" OnClick="myButton_Click" Text="Click Me!" />

And, in the code-behind:

myButton.Attributes.Add("onclick", "onesubmit(this, 5000);");

Link to comment
Share on other sites

...spoke too soon:I'm having an issue with this solution: I have required field and regular expression validators on my web form. If a user clicks the submit button when the form is invalid, the submit button is disabled and the user cannot correct their mistake. Could you give me an idea of how to solve this? I'm trying different solutions to this issue out without success so far. Thanks for any help.

Link to comment
Share on other sites

.NET uses javascript functions to handle all of the client-side validation for your validators. Typically, this happens as follows (check your rendered page for exact code)Here is the rendered form element:

<form name="Form1" method="post" action="MyExample.aspx" onsubmit="java script:return WebForm_OnSubmit();" id="Form1">

And here is the javascript that is called on submit:

function WebForm_OnSubmit() {if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;return true;}

One solution you can try is to overwrite that function slightly and place it AFTER your closing form tag:

</form><script type="text/javascript">function WebForm_OnSubmit(){	if(typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false)	{		// the form is invalid, return false so the submit() doesn't fire.		return false;	}	else	{		// the form is valid, disable the submit button and return true so the submit() fires.		// disable button here...		return true;	}}</script>

Link to comment
Share on other sites

Ok, got it. Here is the full solution (with help from another forum):Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs) If Not Page.IsPostBack Then 'Disable submit button when VALID form is submitted btnSubmit.OnClientClick = "java script: Page_ClientValidate(); if (Page_IsValid) { " + btnSubmit.ClientID + ".style.visibility = 'hidden';" + btnSubmit.ClientID + ".style.display = 'none';" + btnSubmitDisabled.ClientID + ".style.visibility = 'visible';return true}" End If End SubThis needs to be placed before the btnSubmit_Click event. Thanks:)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...