Stopping double clicking with Perl CGI

[Paul Makepeace]

Here's a solution that hides the button (thus it still shows up in
forms), and re-enables it after a couple of seconds.

(Change return false to return true to allow the actual submission.)

<form action="">
<input type="submit" name="action" id="onetime"
onclick="javascript:return disable();" value="Click me!" />
<div id="submitting" style="display: none">Submitting...</div>
</form>

<script type="text/javascript">
function reEnable(el_off, el_on) {
  el_on.style.display = "none";
  el_off.style.display = "block";
  el_off.value = "And I'm back!";
}

function disable() {
  var button = document.getElementById('onetime');
  var submitting = document.getElementById('submitting');
  button.value = "And I'm spent";
  button.style.display = "none";
  submitting.style.display = "block"
  setTimeout(function() {reEnable(button, submitting)}, 2000); // 2s
  return false;
}
</script>

Not pretty, but you get the idea.

I deliberately didn't use a library because it's not necessary, and
anyone asking this level of question might want to learn some basic
ecmascript :-)

P

On Thu, May 22, 2008 at 10:42 AM, Smylers <Smylers at stripey.com> wrote:
> Chris Jack writes:
>
>> What is the best way of stopping a user double clicking a button in a
>> web page created using Perl CGI?
>>
>> It seems to me that the logical way to do it would be to disable the
>> button when it is pressed, but I haven't found an example of how to do
>> that on the web yet.
>
> That can be done straightforwardly with JavaScript, however:
>
> * It relies on JavaScript being enabled.
>
> * If, after submitting the form and going to the next page, the user
>  decides to go back to the form (using the browser's 'Back' button) to
>  change something and re-submit, the submit button will_still_ be
>  disabled, which rather hampers attempts to re-submit the form -- at
>  least it will in many modern browsers (Firefox 2+, Opera) which cache
>  the rendered page rather than the source HTML (Firefox 1.5-).
>
> * Disabling the button at time of form submission means the button is
>  no longer in the form data-set sent to the server.  This is
>  problematic if your form has multiple buttons and you want to know
>  which one the user chose.
>
> Smylers
>