Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

submit form with delay while entering data into input field

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

like image 206
Tillebeck Avatar asked Jan 05 '10 15:01

Tillebeck


People also ask

How to delay form submit JavaScript?

Here is the way that works for me: const form = $("#formId"); form. submit(() => { //some other functions you need to proceed before submit setTimeout(() => {}, 1200); return true; }); Now it will wait 1200 ms before submitting the form.

How do you dynamically submit a form?

Answer: Use the jQuery submit() Method You can use the submit() method to submit an HTML form (i.e. ) using jQuery. The jQuery code in the following example will submit the form on click of the button (i.e. the element) which has the type attribute set to button (i.e. type=”button” ).

How do you delay a form action in HTML?

submit() to delay for about 5 to 10 seconds so that the answer can be read by the user before the form actually submits the user information. $(". profile-form"). delay(5000).

Does submit button enter form?

Yes, structurally the submit button needs to be inside a form element for the document to be valid X/HTML. But visually you can position the submit button anywhere you want with appropriate CSS (float, absolute/relative positioning, etc).


2 Answers

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);
});
like image 122
jitter Avatar answered Oct 23 '22 15:10

jitter


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;
            }
    });
like image 41
jjclarkson Avatar answered Oct 23 '22 14:10

jjclarkson