?
Solved

dealing with cgi/form "double-clicks"

Posted on 1998-08-10
17
Medium Priority
?
304 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 6
  • 2
17 Comments
 
LVL 8

Accepted Solution

by:
jbirk earned 400 total points
ID: 1858938
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
ID: 1858939
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
ID: 1858940
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 28

Expert Comment

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

Expert Comment

by:jbirk
ID: 1858942
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
ID: 1858943
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
ID: 1858944
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
ID: 1858945
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
 
LVL 8

Expert Comment

by:jbirk
ID: 1858946
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
ID: 1858947
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
ID: 1858948
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
ID: 1858949
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
ID: 1858950
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
ID: 1858951
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
ID: 1858952
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
ID: 1858953
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
ID: 1858954
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

Application Discovery Service in AWS

In the era of the cloud, customers migrating away from their existing on-premise infrastructure. This requires lots of planning, strategies, and effort to identify their existing resources and determine how best to migrate.  Datacenter migrations happen in four phases -

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
This video teaches users how to migrate an existing Wordpress website to a new domain.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

801 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