scriptaculous-like component to avoid double-submit

Question

I'm looking for a script to prevent the user from hitting the submit button twice specially for long time background processing forms. I'd like to implement something not just functional but visually appealing too. Can anybody share some tips of how to accomplish this using, for instance, scriptaculous ?

Thanks

Answer 1

Using prototype you can try something like this:

var DoubleSubmit = {
prevent: function(){
    var forms = document.body.select('form');
    forms.invoke('observe', 'submit', DoubleSubmit.observeSubmit);
},
observeSubmit: function(event){
    var submitButtton = event.element().select('input[type="submit"]')[0];
    submitButtton.disable();
    return true;
}};document.observe('dom:loaded',DoubleSubmit.prevent);

Answer 2

It's not scriptaculous, but I always did it like this:

HTML:

<form onsubmit="return checkDoubleSubmit(this) && yourSubmitroutine();">
  <input ...>
   ...
  <input type="hidden" value="0" id="dscheck">
</form

Javascript:

function checkDoubleSubmit(form) {
    var v = 0;
    var e = form.getElementById("dscheck");
    if (e != null) {
        v = e.value;
        v = v * 1;  // Coerce to number
        e.value = "1";
    }
    return v == 0;
}