Solved

dealing with cgi/form "double-clicks"

Posted on 1998-08-10
17
298 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
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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 112
Best environment for cross platform web development? 5 52
removing a class in javascript 4 47
Link failure 16 32
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
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…

808 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