Prevent double-click on HTML form

How many users are still double-clicking when they visit a website? It is not really a problem with links, but it could be with buttons.
Let’s take, for example, a ‘contact us’ form and a submit button which will send the content of the form by email to the website administrator. What happens if a user double-click on the submit button? The form will be submitted twice and in consequence two emails will be sent instead of one.

There are multiple ways to fix this problem. The solution I will explain below is to disable the submit button once it has been pressed. In that way, even if the user double-clicks on it, the form will be submitted only once! 🙂

To disable the submit button once it has been pressed, you simply need to add the following JavaScript code in the onclick attribute of your button tag:

this.disabled=true;this.form.submit();

For example:

<input name="submitButton" id="submitButton" type="submit" value="Submit" onclick="this.disabled=true;this.form.submit();" />

The code above will work fine if you don’t have an onsubmit attribute in your form tag. But, if you have one, you will notice that the function this.form.submit() will not execute the content of the onsubmit attribute. In that case, you need to force the call as shown below:

this.disabled=true;if(this.form.onsubmit()){this.form.submit();}else{this.disabled=false;}

However, it is recommended to move whatever you have in the onsubmit attribute in the button onclick, such as:

this.disabled=true;if(validateForm()){this.form.submit();}else{this.disabled=false;}

NOTE:
If in your code, you are using the following to check if the form has been submitted:

if (isset($_POST['submitButton'])) { echo "Form submitted!"; }

It will need to be replaced by the following:

if ($_SERVER['REQUEST_METHOD'] == "POST") { echo "Form submitted!"; }

disable button, double-click, Html, JavaScript, onclick, onsubmit

This entry was posted on 29 Jun 2011, 22:04 and is filed under Html. You can follow any responses to this entry through RSS 2.0. You can skip to the end and leave a response. Pinging is currently not allowed.

// if there was a form post if ($_SERVER['REQUEST_METHOD'] === 'POST') { if (isset($_POST['submit1'])) { //button 1 was activated } elseif (isset($_POST['submit2'])) { //button 2 was activated } }

#1 by Franky C on 21 Jun 2012 - 16:35

With regard to your Note :- If you have two buttons and have been using the concept – if (isset($_POST[‘submitButton’])) or if (isset($_POST[‘cancelButton’])) to determine which button has been pressed then your suggested replacement is not going to work – Any other ideas on this issue?

Quote

#2 by smoreau on 22 Jun 2012 - 20:29

I found the following answer on the sitepoint forum:

The only way to detect the second submit buttons is if the browser actually sends the name, and that requires the user to either click it with the mouse, or tab to that specific button to give it focus, and then hit enter on that button.
The detection logic for a form with two buttons would be:
// if there was a form post 
if ($_SERVER['REQUEST_METHOD'] === 'POST') { 
    if (isset($_POST['submit1'])) { 
        //button 1 was activated 
    } elseif (isset($_POST['submit2'])) { 
        //button 2 was activated 
    }
}

Hope it helps.

#3 by Franky C on 27 Jun 2012 - 17:28

Thanks smoreau but I think you missed the point. If, as per your initial posting, you disable the button once pressed then the related $_POST variable is not created or passed to the next routine. Your initial NOTE allowed a user to check if the POST method had been used to call the routine but, in my case of having two buttons, it did not allow me to check for $_POST values to determine which button had been pressed.

I have resolved this issue :-

(1) I have a formValidation script so I include statements for both button at the end of the script just above the return true statement :-
form.acceptbutton.disabled = true;
form.rejectbutton.disabled = true;

(2) within my form I add a hidden variable :-

(3) On each button statement I add an onclick element to set a value to my hidden variable :-

(4) In the next routine I can then check the value of the hidden variable to determine which button was selected :-

if(isset($_POST[‘selectedbutton’]) && $_POST[‘selectedbutton’] == “accept”)
{
put action code here;
}
elseif(isset($_POST[‘selectedbutton’]) && $_POST[‘selectedbutton’] == “reject”)
{
put action code here;
}

Double Click issue eliminated and your are still able to determine which button was pressed.

#4 by smoreau on 27 Jun 2012 - 19:18

Very true! Thanks for this.
I am sure it will help others in the same situation. 🙂

LogikDevelopment