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.