Stop submit button being pressed twice

I am trying to stop a submit button being pressed more than once. I have tried the following code but it stops the form being submitted at all :frowning: What I could do with is an “afterclick” event :slight_smile:

(function() {
  var send = document.getElementById("send");
  send.addEventListener("click", function() {
    send.disabled = true;
  });
})();

How about setting the disabled attribute of the HTML element instead?

1 Like

Are you referring to the parent element, Paul? In this case the div

<div class="field">
  <input name="send" id="send" type="submit" value="Send">
</div>

Pardon, I mistakenly thought that the disabled property might do something different from the disabled attribute. They both achieve the same thing.

Instead of disabling the send button from the click event, disable it from the submit event instead.

1 Like

Der, that’ll be my “afterclick” event then! Thanks.

I should say that it’s usually a more reliable design decision to be capable of withstanding doubleclicks, because many things can interfere with JavaScript running on someones browser.

A typical solution for example is to scan the database for submissions that occur from the same source within 5 seconds of each other, and remove the latter one.

1 Like

Good point. I was looking at this more as an enhancement.

1 Like

Perhaps an event listener to the on submit call to set the button attribute to disabled? Paul’s solution is more robust and can cause less side effects however.

Sorry didnt see that was suggested, I blame lack of coffee for improper response reading.

3 Likes