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, Jan 05 '10 at 15:13

score 17 · Accepted Answer · answered Jan 05 '10 at 15:41

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 05 '10 at 15:41

jitter

53,475
11
111
124

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 Jan 05 '10 at 15:47
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 Jan 05 '10 at 15:50
Well... you had it all in your answer after all. I missed the var timerid at the very top outside the onkeyup. Thanks. – Tillebeck Jan 05 '10 at 15:59
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 http://stackoverflow.com/questions/4717183/asp-net-mvc-ajax-submit-form-with-delay for the lessons learned and how to apply this answer to an AJAX form. – Remus Jan 19 '11 at 18:01

score 5 · Answer 2 · edited May 23 '17 at 12:32

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

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, Jan 05 '10 at 15:34
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 — Tillebeck, Jan 07 '10 at 11:30
Thanks for giving tips on better usability, building a better internet for us all. :) — Lilleman, Sep 15 '12 at 18:11

submit form with delay while entering data into input field

2 Answers2

Linked