Prevent multiple submits with Javascript and Prototype

I try to prevent multiple submits in HTML forms using Javascript through Prototype API. Here is the snippet I use to solve this problem :

function preventMultipleSubmits() {
    this.select('input[type="submit"]').invoke('disable');
    return true;
}

document.observe('dom:loaded', function() {
    var forms = $A(document.getElementsByTagName('form'));
    forms.each(function(form) {
        form.observe('submit', preventMultipleSubmits)
    });
});

The problem with that snippet is that submitting a form doesn't call the server side anymore. I know that IE browsers doesn't support CCS selectors very well, but the problem concerns Firefox too, and I'd like to focus on FF first.

The environnement and tools :

  • Firefox 13.0
  • Prototype 1.6.1

Answers


this.select('input[type="submit"]').invoke('disable');

This appears to just add the disabled attribute to the submit button. You can still get it to submit with enter for one-field forms.

You might try something like this:

<script type="text/javascript">
function preventMultipleSubmits(event) {
    if (this.hasClassName('allow-one-time-submit')) {
        this.removeClassName('allow-one-time-submit');
        // don't stop the event
    } else {
        alert('You already submitted');
        event.stop();
    }
}

document.observe('dom:loaded', function() {
    var forms = $A(document.getElementsByTagName('form'));
    forms.each(function(form) {
        // add Class Name to each and every form on load
        form.addClassName('allow-one-time-submit');
        form.observe('submit', preventMultipleSubmits)
    });

});
</script>


<form action="http://www.example.com/path/to/action" class="allow-one-time-submit">
    <input type="text">
    <input type="submit" value="Submit">
</form>

Need Your Help

Meteor / React / React-Bootstrap Building Failure

reactjs meteor npm react-bootstrap

I want to use Meteor with React and react-bootstrap. I've found many 'marks' of how to install but I think they are all outdated.

IllegalArgumentException or NullPointerException for a null parameter?

java exception null nullpointerexception illegalargumentexception

I have a simple setter method for a property and null is not appropriate for this particular property. I have always been torn in this situation: should I throw an IllegalArgumentException, or a