submit form with delay while entering data into input field

Question

I have a simple form that I need to submit automatically when text is entered.

I can use the onChange or onKeyUp without the best result.

HTML is:

  <form action="" id="fusionSearchForm" method="post">
    <input type="text" class="std_input" id="fusion_searchText" />
  </form>

And jQuery

jQuery("#fusionSearchForm").keyup(function() {
  this.submit();
});

This submits every time a character is entered. I much rather would have it so - there was a delay before submit so you can finish your typing - that focus stays on the input field ready to type after submit (if reload)

Any way to delay a form.submit() so the user can finish typing before form is submitted?

(UPDATE to code to a more "jQuery" kind of way to submit)

Br. Anders

You can't know if the user finished typing. What if someone types very slowly? — Darin Dimitrov
– Darin Dimitrov, Commented Jan 5, 2010 at 15:13

jitter · Accepted Answer · 2010-01-05 15:41:21Z

17

This should work. Submits the form when nothing was typed for 500ms

var timerid;
jQuery("#fusionSearchForm").keyup(function() {
  var form = this;
  clearTimeout(timerid);
  timerid = setTimeout(function() { form.submit(); }, 500);
});

answered Jan 5, 2010 at 15:41

jitter

54.8k11 gold badges114 silver badges130 bronze badges

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

4 Comments

Tillebeck Over a year ago

Thanks! I tried with the same code but with no luck. But then I added a var timerid = '' to after the var form and that did the trick. Thanks.

Tillebeck Over a year ago

Nope. Did not work. the clearTimeout does not work I guess since the form will submit af ter 500msek even if I keep typing

Tillebeck Over a year ago

Well... you had it all in your answer after all. I missed the var timerid at the very top outside the onkeyup. Thanks.

Remus Over a year ago

As @jjclarckson and @Darin point out, you never know if someone's actually done typing. But, this could be rather useful for an AJAX form, which you could submit multiple times as the user is typing. I tried to adapt this answer for an AJAX form, but ran into some issues with the MicrosoftAjax.js library. See stackoverflow.com/questions/4717183/… for the lessons learned and how to apply this answer to an AJAX form.

Community · Accepted Answer · 2017-05-23 12:32:02Z

5

This is a bad idea. You don't want to circumvent the controls people expect on form inputs. If you don't want a submit button then at least wait to submit until you capture an "enter".

Other than a user mind reading device how could you ever know when a user is done typing, unless you were looking for them to type "return" or "enter"? Users won't know they're supposed to pause a moment to let the form submit at the timeout, or that they need to hurry up to get their search entered before the timeout of 500MS.

See: this question

Of if you want to start returning results immediately upon any submission you could do some kind of ajax autocomplete.

autocomplete http://img9.imageshack.us/img9/5526/autocompletegoogle.png

Here's a jQuery example of submitting on an enter:

  $("input").keypress(function(e) {
            switch (e.keyCode) {
                    case 13:
                            $("#formid").submit();
                            return false;
                    default:
                            return true;
            }
    });

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jan 5, 2010 at 15:28

jjclarkson

5,9647 gold badges42 silver badges63 bronze badges

3 Comments

Tillebeck Over a year ago

True, but it is a requirement from the designer. But if I can just set a delay of e.g. 500msec then I quess only few will be mad.

Tillebeck Over a year ago

I like the autocomplete. It gives the real web2.0 feeling. I would also like that it was the actual list that was updated. I guess it would be easy using CSS but I have a lot of records so some kind of server call would be needed. Haven't looked into that yet

Lilleman Over a year ago

Thanks for giving tips on better usability, building a better internet for us all. :)

Collectives™ on Stack Overflow

submit form with delay while entering data into input field

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related