How to prevent a user holding the enter key on a form from slamming my site with requests?

Question

I have the following jquery code in use to submit a form if the enter key is pressed:

$('body').on('keypress', 'input', function(event) {
    if (event.which === 13) {
        event.preventDefault();
        $(this).closest('form').submit();
    }
});

Also, I have my login page set up to .focus() on the username field on page load.

So if a user just holds on the 'enter' key, it will submit, fail, return, focus, submit, repeat.

I could put the keypress event to only trigger when in the password field, but I'd rather find a way to detect a long keypress or something to prevent this scenario.

Isn't this the default behavior for `input` elements in forms? Also, why don't you just prevent the form from submitting if the value of the input element is `''`? — Blender, Oct 03 '12 at 21:32
[This thread](http://stackoverflow.com/q/926816/645270) has some answers (scroll down a bit) — keyser, Oct 03 '12 at 21:35

score 2 · Answer 1 · answered Oct 03 '12 at 21:33

2

Throttle the event so it can only happen once per second.

var timer;
$('body').on('keypress', 'input', function(event) {
    var self = this;
    if (event.which === 13) {
        event.preventDefault();
        clearTimeout(timer);
        timer = setTimeout(function(){
            $(self).closest('form').submit();                
        },1000)
    }
});

answered Oct 03 '12 at 21:33

Kevin B

94,570
16
163
180

does this timeout persist across requests? it is not ajax so every 'enter' press POST's, processes, and returns, and resets – chrickso Oct 04 '12 at 10:57
it does not persist if you don't have a submit event doing an ajax request. – Kevin B Oct 04 '12 at 14:18

MatRt · Answer 2 · 2012-10-05T00:21:10.427

Like Blender says, for the majority of browser, it is a default behaviour, for an input in the form, to submit the form, when you press enter key (it is like clicking on an input with a submit type).

Your fist code seems a little bit useless because it is preventing the default behaviour (submitting the form), but finally submit the form.

The timeout solution is not bad but too complex in my point of view for a such problem.

Your page is a login page, that meens that you want to allow login try when login and password are filled. Moreover, you don't want to allow multiple submit of the same page in a short delay.

You could write a piece of code like:

// Listening on submit event of the form
$("#FORM_ID").submit(function(submitEvent) {

    // Check if the login and password are not empty
    if (($.trim($("#LOGIN_INPUT_ID").val())).length == 0 ||
        ($.trim($("#PASSWORD_INPUT_ID").val())).length == 0)
    {
        // login or password is empty -> cancel the submit
        submitEvent.preventDefault();

        // TODO : warn user with a message
        // like "Please, fill login and password first !"

        return false;
    }

    // Avoid multiple submit at the same time
    // (for stupid guy clicking 10 times in 1 s)
    if ($(this).hasData('alreadySubmitted'))
    {
        // The form is currently already submit -> cancel the submit
        submitEvent.preventDefault();
        return false;
    }

    // Set the form "submitted"
    $(this).data('alreadySubmitted', true);

   // Let the submit do his job...
   return true;
});

thanks. 'enter' only submits a form if your form contains an , which mine does not. I have some jquery for a.submit to $(this).closest('form').submit();. Without my code above, enter does nothing. — chrickso, Oct 04 '12 at 10:59
also, your code above doesn't work. you have 1 too many ) on each val() in if statement. SO won't let me edit unless it's 6 chars — chrickso, Oct 04 '12 at 11:29
Oups, sorry for the ")", its corrected now. Maybe you should write an input type submit in your form for 2 reasons: 1) my code that listen on submit event will works well. 2) if JS is not enabled, you can still login. With your code, you can't, its not unobstrusive. — MatRt, Oct 05 '12 at 00:27

How to prevent a user holding the enter key on a form from slamming my site with requests?

2 Answers2