Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2012-08-16
7
Medium Priority
?
757 Views
Last Modified: 2012-08-21
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.
0
Comment
Question by:CFbubu
7 Comments
 
LVL 8

Expert Comment

by:npinfotech
ID: 38299477
0
 
LVL 13

Expert Comment

by:srikanthmadishetti
ID: 38299570
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 38299764
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:CFbubu
ID: 38301122
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
 
LVL 2

Assisted Solution

by:SamuelShaw
SamuelShaw earned 400 total points
ID: 38301412
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
 
LVL 49

Accepted Solution

by:
Roonaan earned 1600 total points
ID: 38304631
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
 

Author Closing Comment

by:CFbubu
ID: 38315282
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question