Disable Form Button, Back Browser Button...

Hey there,

My client was having an issue on his website where forms were being submitted more than once if the user clicked a submit button really fast.

The solution I found is as follows:

function disableSubmit(whichButton) 
{ 
    if (document.getElementById) 
    { 
        // this is the way the standards work 
        document.getElementById(whichButton).disabled = true; 
    } 
    else if (document.all) 
    { 
        // this is the way old msie versions work 
        document.all[whichButton].disabled = true; 
    } 
    else if (document.layers) 
    { 
        // this is the way nn4 works 
        document.layers[whichButton].disabled = true; 
    } 
}

Code (markup):

Here is an example of a simple form that uses this function:

<form name="myLoginForm" id="myLoginForm" method="post" 
action="../member-login.cfm?login=1" onsubmit="disableSubmit('myLoginBtn');">
        
Username: <input id="MY_USERNAME" name="MY_USERNAME" type="text" 
class="text-very-small" maxlength="50"/>&nbsp;&nbsp; 

Password: <input id="MY_PASSWORD" name="MY_PASSWORD" type="password" 
class="text-very-small" maxlength="50"/>&nbsp;&nbsp;

<input type="submit" value="Login" title="Login" id="myLoginBtn" 
name="myLoginBtn" class="myButtonStyle" />
        
</form>

Code (markup):

This fixes that issue for users that have javascript enabled, but it creates another issue. When the user clicks the back button on their browser, the submit button is disabled.

You can view this behavior by clicking the search button on the top menu of this page:

http://www.greenhappenshere.com/find-green-businesses.cfm

After you click search, click the back button on your browser and notice how the search button is already disabled.

So I need a solution to this problem or a better way of disabling form buttons so forms do not get submitted more than once.

Thanks in advance for any assistance you can provide me with.

Sincerely,
Travis Walters

 

Change your script as follows:

buttonDisabled = false;

function RefreshSubmit(whichButton) 
{ 
    if (document.getElementById) 
    { 
        // this is the way the standards work 
        document.getElementById(whichButton).disabled = buttonDisabled; 
    } 
    else if (document.all) 
    { 
        // this is the way old msie versions work 
        document.all[whichButton].disabled = buttonDisabled; 
    } 
    else if (document.layers) 
    { 
        // this is the way nn4 works 
        document.layers[whichButton].disabled = buttonDisabled; 
    } 
}

document.onfocus = function(){
	buttonDisabled = false;RefreshSubmit('myLoginBtn');		
}

Code (markup):

Also, change the onsubmit on your form as follows:

<form name="myLoginForm" id="myLoginForm" method="post" 
action="../member-login.cfm?login=1" onsubmit="buttonDisabled = true;RefreshSubmit('myLoginBtn');">
        
Username: <input id="MY_USERNAME" name="MY_USERNAME" type="text" 
class="text-very-small" maxlength="50"/>&nbsp;&nbsp; 

Password: <input id="MY_PASSWORD" name="MY_PASSWORD" type="password" 
class="text-very-small" maxlength="50"/>&nbsp;&nbsp;

<input type="submit" value="Login" title="Login" id="myLoginBtn" 
name="myLoginBtn" class="myButtonStyle" />
        
</form>

Code (markup):

This should work as expected now.

 

Hey there,

Thanks for the prompt response!

It looks like the document.onfocus function is what I needed to fix the problem.

Ill give you some props for that or whatever they are called on here.

Thanks again!

Sincerely,
Travis walters

 

Hey there,

I tweaked the code so it will be even better.

Here is the doubleclick.js file:

function disableForms()
{ 
	for (i=0; i<document.forms.length; i++)
	{
		for (j=0; j<document.forms[i].elements.length; j++)
		{
			document.forms[i].elements[j].disabled = true;
		}
	}
} 

document.onfocus = function()
{
	for (i=0; i<document.forms.length; i++)
	{
		for (j=0; j<document.forms[i].elements.length; j++)
		{
			document.forms[i].elements[j].disabled = false;
		}
	}
}

Code (markup):

Now all people need to do is add the disableForms() function to every form.

Sincerely,
Travis Walters