How to avoid duplicate submission for single input forms?

Question

I have a single input form:

<form id="my_form">
  <input id="my_input" type="text" />
</form>

In most browsers, when a user types text in this single input and hits 'enter' the form is submitted. That's great but I want to go one step further and make it so that if the user types something and focus is lost, the form is submitted.

I've currently tapped into jQuery's change event like so:

$("my_input").change(function() {
  $("my_form").submit();
});

This works for the case when I change the input value and focus out but if I change the input value and hit 'enter' then the form is submitted twice (once for 'enter' and once for change).

I was starting to go down the path of lower level listening to keys and managing a submit state but figured I'd throw it out to the community to see if anyone knows of a cleaner way.

Rob W · Accepted Answer · 2011-10-18 13:35:01Z

2

Instead of messing with error-prone checks, you can also attach a submit event to the form. If the value is equal to the old value, don't submit the form by using ev.preventDefault().

var oldvalue = "";
$("#my_form").submit(function(ev){
    var newvalue = $("#my_input", this).val();
    if(newvalue == oldvalue) ev.preventDefault(); //Same value, cancel submission
    else oldvalue = newvalue;
})

answered Oct 18, 2011 at 13:35

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mtrovo Over a year ago

Very clean solution, I would suggest to control with some flags but yours is far way better

Keith.Abramo · Accepted Answer · 2011-10-18 13:36:13Z

0

Have you tried the blur event http://api.jquery.com/blur/

This will fire when the input loses focus.

answered Oct 18, 2011 at 13:36

Keith.Abramo

6,9652 gold badges34 silver badges46 bronze badges

Comments

John Strickler · Accepted Answer · 2011-10-18 13:48:09Z

0

Just an improvement to Rob W's solution.

$('#my_form').submit((function () {
   //Enclose variables as to not pollute the global namespace
   var oldValue,
       input = $('#my_input');  //cache your input

   //Same concept as Rob W's solution
   return function (e) {
       var newValue = input.val();

       if(newValue === oldValue) {
          e.preventDefault();
       }

       oldValue = newValue;
   };
})());

answered Oct 18, 2011 at 13:48

John Strickler

25.4k5 gold badges55 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to avoid duplicate submission for single input forms?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related