Solved

dealing with cgi/form "double-clicks"

Posted on 1998-08-10
17
294 Views
Last Modified: 2013-12-25
I'm investigating the best way of handling a situation where a user double-clicks on a submit button (or URL).  With many CGI scripts on fast servers, this can spawn two distinct requests to the server and cause problems.  I'm interested in what available methods there are to keep this from happening, either a java/javascript applet that can be added to a form to intercept the second click) or some type of HTML command or other way of keeping this from happening.  In in each case, I'd need to know specifically which browsers/versions such a solution may be compatible or not compatible with.
0
Comment
Question by:wisdom042597
  • 9
  • 6
  • 2
17 Comments
 
LVL 8

Accepted Solution

by:
jbirk earned 100 total points
Comment Utility
You can do this with JavaScript.
Change your form tag to include this statement:
onSubmit="return check_clicked()"
Then add this somewhere in your document:
<SCRIPT language="JavaScript">
<!-- conceal
var clicks=0;
function check_clicked()
{clicks++;
 if (clicks>1)
  return false;
 else
  return true;
}
// reveal -->
</SCRIPT>

This will work in all javascript enabled browsers.  Note that the user will only be able to submit the form once unless they reload the page.  If you want to make it so that they can submit again within a certain amount of time, then I will provide a script which disables the submit button for whatever amount of time you wish (preventing the double click from doing anything)
-Josh
0
 
LVL 28

Expert Comment

by:sybe
Comment Utility
Josh's answer surely works from a client side of view. The thing is what happens when the after the submit the request times out, because for some reason the internet traffic is very busy (such things happen...).
The user has to reload the page and fill the form out again. I don't know if you want to risk that.

I don't think you can prevent this double clicking (except from the "hard way" that Josh shows), but I think it happens because the user gets impatient when he sends his form and nothing visibly happens.

My solution would be to look at the script that processes the form. Make it start with sending some response to the browser,  then process the form data which were send and then maybe some more response.

Anyway, it's a choice between having some responses double and not having some responses at all.


0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
Well if you used a timeout, you wouldn't have to reload, but you might still get the double submit if the cgi program takes a long time to process the request (longer than the timeout) and the user gets impatient.  So how about a combo of the two suggested methods.  I timeout on the client side for say 5 seconds or so, and then from the cgi program be sure to start outputing the header and things that you don't need any computations to figure out rght away.

-Josh
0
 
LVL 28

Expert Comment

by:sybe
Comment Utility
I agree with Josh, that's the way to go.
(you have bright ideas, Josh !)
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
Thanks sybe!  With a bunch of really good experts though, one of us is bound to come up with something good.  It's amazing how many really good javascript programmers there are on EE!

wisdom: will this work for you?
-Josh
0
 
LVL 1

Author Comment

by:wisdom042597
Comment Utility
I'm not sure how you'd add a timeout on the server side in a way where it wouldn't affect the operation of the server, but the javascript fits the bill.

Thanks to everyone for your suggestions!

0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
OK, here's the code to make the timout for 5 seconds.  You can change that to whatever you like, but remember that it's specified in milliseconds.
<SCRIPT language="JavaScript">
    <!-- conceal
    var clicked=false;
    function check_clicked()
    {
     if (clicked)
      return false;
     else
      {clicked=true;
       setTimeout("clicked=false",5000); //after 5000 milliseconds--5 seconds, set clicked back to false so that the form can be submitted again.
       return true;
      }
    }
    // reveal -->
    </SCRIPT>

And then use the same code in the form tag:
onSubmit="return check_clicked()"

Hope this will work for you,
Josh
0
 
LVL 1

Author Comment

by:wisdom042597
Comment Utility
How about this:

Is there a way so that the form cannot be submitted more than once unless the form fields have been changed?  Let's say I have some pull-down items in the form.  I only want the form to able to be submitted once unless the values in the form are modified.

The timeout functions don't work for my application because the form (which calls an Oracle database) can take a long or short period of time depending upon the query (up to a minute or more - this is a very complicated query).  What I want to avoid is impatient people bogging down the database unless the query is valid (or is a new query).

0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 8

Expert Comment

by:jbirk
Comment Utility
Yes, that is entirely possible.  It might be easier if I could see the source, or I can guide you through the process if you feel confortable enough with JavaScript.
-Josh
0
 
LVL 1

Author Comment

by:wisdom042597
Comment Utility
I haven't worked with javascript much - been too bogged down with c and other systems.  I assume the thing to do is have a var change in the checking routine when a field is updated.  The script source would be pretty basic - a bunch of pull-down menus (SELECT/OPTION) and maybe a fill-in form.

0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
ok, just add this line to the necesary fields:
onChange="clicked=false"
and use the original code I posted.
It should work for you for almost all fields.
Note: It goes in the select field, not the options of the select.
-Josh
0
 
LVL 1

Author Comment

by:wisdom042597
Comment Utility
Is it possible to have an example form demonstrating how the javascript is integrated?  I'm giving these instructions to one of my web guys who will be implementing it, and I want to make sure there's no ambiguity.

0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
Could you post an example of one of your forms?  That way I could change it, and it would be clearer for the web guys since it will look just like all the ones they will change.
-Josh
0
 
LVL 1

Author Comment

by:wisdom042597
Comment Utility
My form is basic - I'd just arbitrarily give you something like this:

<form method="post" action="xxx">
<select name="widget"><option value="1">a<option value="2">b</select>
<select name="widget2"><option value="1">a<option value="2">b</select>
<input type="submit" value=" Go ">
</form>

As an option, I'd love to pop up a dialogue box to display a message is a person tries to hit submit more than once...

0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
OK, here you go:

<SCRIPT language="JavaScript">
<!-- conceal
var clicked=false;
function check_clicked()
{
 if (clicked)
   return false;
 else
   {clicked=true; return true; }
}
// reveal -->
</SCRIPT>

<form method="post" action="xxx" onSubmit="return check_clicked();">
<select name="widget" onChange="clicked=false;"><option value="1">a<option value="2">b</select>
<select name="widget2" onChange="clicked=false;"><option value="1">a<option value="2">b</select>
<input type="submit" value=" Go ">
</form>


That should do it.  Test it first with one of your actual files to be sure it will work properly for you before making major changes.

-Josh
0
 
LVL 1

Author Comment

by:wisdom042597
Comment Utility
How about a dialogue box if a second submit is issued?

btw, thanks very much for your assistance - hopefully I'm not being a pain.
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
OK, this will do what you ask:
function check_clicked()
      {
       if (clicked)
         {alert("message here"); return false; }
       else
         {clicked=true; return true; }
      }

That's an easy one.
As far as being a pain, it's no problem.  Sometimes when seomone goes above and beyond normal help after a question is finished, people reward with extra points, but it's no big deal to me.  Do what you wish.

Hope it works for you!
Josh
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now