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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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).