Disable Form Button, Back Browser Button...

[twalters84]

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

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>

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...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

[Costin Trifan]

first thing first:
why would you do something like that (disabling the button) for a SEARCH button?? I've never seen that before...that kind of behavior is mostly used for contact forms or forms that when submitted insert data into a database...

anyway, you can prevent that by enabling the button in the page load event:

window.onload = function()
{
   document.getElementById('your-button-id').disabled = false;
};

[twalters84]

Hey there,

Thanks for your prompt response.

If the disable code was not there, the form would be submitted to the server multiple times. So I am doing it in that case there to keep the server load down.

I am more concerned with add forms though. If those forms get submitted more than once, the website can get spammed very easily.

Sincerely,
Travis Walters