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?

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?

• javascript
• jquery
• forms
• jquery-events
• double-submit-problem

• try blocking the default event. – Christoph Commented Apr 25, 2012 at 18:13
• 1 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 Commented Apr 25, 2012 at 18:14
• 1 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 Commented Apr 25, 2012 at 18:15
• 1 @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 Commented Apr 25, 2012 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 Commented Apr 25, 2012 at 18:18

4 Answers 4

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.

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;
}

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.

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 e up with custom solution as well).