What's the best method to prevent a user from double clicking a submit button?

Hi,

I was wondering how it is possible to prevent someone from double clicking a submit button on slow running pages?

My server sometimes runs slow, and when I click the submit button , I just see the page sitting there doing nothing. The only indication anything is happening is the  page activity icon telling  me that it is waiting for the server to respond.  I would get impatient and click the submit button again which at times would cause and error, or worst, keep sending requests to the server until it times out.

I think it's possible to automatically grey out the submit button after it is clicked so that a user cannot keep jamming on the submit button? Is this the best method? If so, how does one accomplish it? If this is not the recommended method, how than do I solve this issue?

Thanks for any feedback and guidance!

Regards.
CFbubuAsked:
Who is Participating?
 
RoonaanCommented:
Hi,

A dummy page with some more interaction would use the following sample code:

<html>
  <head>
    <title>Dummy prevent duplicate submit page</title>
    <script type="text/javascript">
      function validateForm(frm) {
        if (frm.isSubmitted) {
          alert("Thank you for your request; Please wait until the page reloads.");
          return false;
        } else {
          frm.isSubmitted = true;
          for (var i = 0, c = frm.elements.length; i < c; i++) {
            if (frm.elements[i].type === 'submit') {
              frm.elements[i].disabled = true;
              frm.elements[i].value = 'Thank you for your request; Please wait ...';
            }
	  }
          return true;
        }
      }
    </script>
  </head>
  <body>
    <form method="#" onsubmit="return validateForm(this)">
        <input type="text" name="myfield" />
        <br />
	<input type="submit" value="Submit" />
    </form>
  </body>
</html>

Open in new window


The method="#" needs to point to your processing page.

Regards,

-r-
0
 
npinfotechCommented:
0
 
srikanthmadishettiCommented:
Disable the submit button on  onclick event and also if possible provide some information below submit button like Don't click submit button more than one time and don't press back button etc.".

If the action to be performed takes more time , try to display some waiting messages like "please wait" till the task is done.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
RoonaanCommented:
Although both mentioned solutions do indeed provide good ways to disable form controls, please note that disabling the buttons only disables one of various ways to actually submit a form. (Press <return> in a random input field for example, or pressing <tab> to reach the submit button, then press <return>, which all don't count as clicks).

To truly disable a duplicate submit, you will need to hook into the form's onsubmit handler.

<form method=".." action=".." onsubmit="return validateForm(this)">

Open in new window


The validateForm method is then responsible for preventing the second submit by returning 'true' when the form is allowed to submit or 'false' otherwise.

function validateForm(frm) {
   if (frm.isSubmitted) {
      return false;
   } else {
      frm.isSubmitted = true;
      // optionally toggle buttons, show a message, etc
      return true;
   }
}

Open in new window


In the area of the '// optionally' comment, you can add logic to disable the submit button, add a 'please wait while your request is being processed' message. Import thing is to make sure that the 'return true' is executed at the end.

Kind regards

-r-
0
 
CFbubuAuthor Commented:
Hi Guys,

Thanks for all your fantastic feedbacks :)

I kinda am interested in the solution your posted Roonaan, but I am hoping you could be alittle more clear with it.  Could you include in your code logic how to disable the submit button? ALso, could you write how to activate and use the solution on a dummy webpage? I am not too familiar with using javascripting, and would greatly appreciate your help here.

However, if anyonelse knows what Roonaan is suggesting in his solution, I also would be very thankful for your inputs.

Regards.
0
 
SamuelShawCommented:
Here are a couple of solutions for you.

1. Server-side control


When generating the code for the page,
1) Insert a hidden input for the form using a unique ID for its value. The ID can be incremental or random.
2) Insert the unique ID into a database table for forms "in process".
3) When the user submits the form, check to see that the ID is in the "in process" table. If it is, delete the ID from the table and process the form; if it isn't, ignore the form request.

2. Client-side control


Have a page-scope boolean variable initially set to true, e.g., bSubmitOk. When the user submits the form, check the value of bSubmitOk via an onSubmit event handler. If bSubmitOk is true, set bSubmitOk to false, disable the submit button, and submit the form; if bSubmitOk is false, do nothing and return false.

This is something like what Roonaan was suggesting.
Of course, you can combine the two for a more friendly user experience.
0
 
CFbubuAuthor Commented:
Hi Guys,

Thanks for the awesome suggestions. Roonaan, your detailed explanation is very much appreciated.

I am sorry to have taken so long to respond as I had to travel for a very urgent matter.

I am glad to have guys like you around!

Regards.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.