Form submitted twice using submit() on keyup

Question

I had a jQuery / HTML code similar to this:

<form action="/SomeAction" method="post">
  <input id="my-textbox" type="text" placeholder="Write something and press enter to continue..." />
</form>

<script type="text/javascript">
 $(function() {
     $('#my-textbox').keyup(function(e) {
        var $textbox = $(this);
        if ($textbox.val().length > 0 && e.keyCode == 13) {
           $textbox.parent('form').submit();
        }
     });
 });
</script>

The purpose was to automatically submit the form when the user pressed the Enter key. I regularly use Firefox so everything was OK for me until I tested in Google Chrome and Internet Explorer.

When I pressed the Enter key in the later browsers, sometimes I would get the form submitted twice. This was easy to notice because I would get duplicate entries in my DB and I'd see two POSTs using Fiddler.

After some testing, I found out that my problem was the jQuery code, since the textbox would submit automatically on enter without it, and using this code would produce a second POST in some browsers.

My questions are:

Why don't browsers smartly prevent the second form post (like Firefox did in my testing)?

Should I expect this behavior in all major browsers in all platforms?

Is there a way to improve this code so I perform the submit using JavaScript, but don't get the form submitted twice?

You are having the form submitted on keyup. You are requesting the JavaScript submit the form each time there is a keyup event in the text field. You're getting exactly what you are asking for. — Evik James, Apr 25 '12 at 18:14
I'm not a jquery expert but I would hook your code to the submit event in the form (or hook a function on it blocking it's default behaviour) — Eineki, Apr 25 '12 at 18:15
@EvikJames Not true. He is only submitting the form if the field isn't empty and the key pressed is the enter key. Look closer. — iambriansreed, Apr 25 '12 at 18:15
How do I submit the form without using the keyboard? For example, click to get focus, speech recognition to enter text and... what? — Andrew Leach, Apr 25 '12 at 18:18
@EvikJames the form is only submitted when e.keyCode == 13 (enter) is pressed. — Meryovi, Apr 25 '12 at 18:18

Alex · Accepted Answer · 2017-03-28T12:11:31.597

Why don't browsers smartly prevent the second form post (like Firefox did in my testing)?

That is the default behavior. What if you didn't have your script and the default behavior was such that the form wouldn't POST on enter.

Should I expect this behavior in all major browsers in all platforms?

Yes

Is there a way to improve this code so I perform the submit using JavaScript, but don't get the form submitted twice?

Use a global mutex variable and set it once the form POSTs - checking it on subsequent POSTs to validate. Or, return false from the keyup handler and stop the event propagation.

score 5 · Answer 2 · answered Apr 25 '12 at 18:17

5

Some browsers will interpret an input button as a submit if there is only one button in the form. Just return false in your function to prevent the default behavior from submitting the form.

if ($textbox.val().length > 0 && e.keyCode == 13) {
    $textbox.parent('form').submit();
    return false;
}

answered Apr 25 '12 at 18:17

jbabey

45,965
12
71
94

He's doing this in keyup, so it's too late to prevent default. See @Sheikh's example. – scottheckel Apr 25 '12 at 18:39
not true. http://stackoverflow.com/questions/2037910/possible-to-prevent-enter-from-submitting-a-form-in-javascript-from-certain-inpu – jbabey Apr 25 '12 at 18:43
1

@Hexxagonal im only seeing one post-back in both Chrome18 and IE8 regardless, so i am not able to validate your test. – jbabey Apr 25 '12 at 19:27

score 2 · Answer 3 · answered Apr 25 '12 at 18:26

Your form is being submitted right after the enter has been pressed (on keydown and before keyup fires) so you can do

$(function() {
    $('#my-textbox').keydown(function(e){
        if(e.keyCode==13) e.preventDefault();
    }); 

    $('#my-textbox').keyup(function(e) {
        e.preventDefault();
        var $textbox = $(this);
        if($textbox.val().length > 0 && e.keyCode == 13) {
           $textbox.parent('form').submit();
        }
     });
 });

A simple test.

score 1 · Answer 4 · answered Apr 25 '12 at 18:14

1

Add boolean variable that would be set to true after first submit and use that variable in your if condition. This would prevent accidental double click.

You should also prevent double submit in the application backend (many web frameworks have built-in mechanism for doing this, it easy to come up with custom solution as well).

answered Apr 25 '12 at 18:14

Piotr Kochański

21,862
7
70
77

I tried, but I got two form posts anyway: one from my code and one from the browser's default event. – Meryovi Apr 25 '12 at 18:18

Form submitted twice using submit() on keyup

4 Answers4

Linked