Send form after X seconds of not typing in specific field

Question

I am using a Speech-to-Text software to type in a field, since there is no screen or mouse or keyboard, I need to send this form after 3 seconds of no typing (actually talking) in this field but the field shouldn't be empty

I am using PHP but I guess the solution is JavaScript or jQuery, I dont know much in these two so I'd appreciate if you could explain how to use it too.

thank you guys i ended up using this $(function() { var time = 0; $("textarea").keypress(function() { time = 0; }); var int = self.setInterval(function() { var s = $("textarea").val(); if (time++ == 3) { if (s != "") document.forms["form"].submit(); time = 0; } }, 1000); }); — Color, Jul 24 '12 at 22:31
@user1549838 If someone's answer helped, please click the tick next to their question, which awards them rep. I suspect you should award [@ocanal](http://stackoverflow.com/a/11639677/156755) based on the code you've mentioned. Also, don't forget you can edit your question to add more info. Failing that, you can mark code in questions/comment by enclosing in backticks (```) — Basic, Jul 24 '12 at 22:37

Basic · Answer 1 · 2012-07-25T00:06:10.673

Fundamentally, you need to capture the keypress event and start a timer. If the timer runs out before another key is pressed, submit the form

Detecting key pressed with jQuery is done like this:

$('#ElementId').keypress(function() {
    /* Your code */
});

You can use the setTimeout() method to time 3 seconds (See here)

and finally, use jQuery's submit() as shown here to submit the form

You may also want to use focus() to move the focus to the text input once the page has loaded so that SR is "typing" in the right place,

Additionally, this article is a good intro to timing events in JS, including how to cancel them

In short, you want something like this (tested):

$(document).ready(function(){

    var Timeout; //For reference to timeout
    var DelayInMs=3000;
    $("#SRInput").focus(); //Give focus to input on document ready

    //When input is received, (re)set the timer
    $("#SRInput").keypress(function() {
        if(Timeout) {clearTimeout(Timeout);} //Clear existing timeout, if any
        Timeout = setTimeout(function(){$("#SRForm").submit();}, DelayInMs);
    });

});

<form id="SRForm" method = ... >
    <input type="text" name="SRInput" id="SRInput"/>
</form>

(These Timeout/DelayInMs vars are still in scope for the events thanks to closures) Incidentally, this has the added bonus that the timer isn't started until after the first keypress - so you can take as long as you like to start talking).

your answer doesn't explain how to reset the timer on new key press; also jQuery change() event is fired when input loses focus which is not what we want here. — Kuba Wyrostek, Jul 24 '12 at 21:34
@user1549838 You're welcome. Hopefully we'll see you around again — Basic, Jul 24 '12 at 22:42

score 4 · Accepted Answer · edited May 23 '17 at 11:55

$(function() {
    var time = 0;
    $("textarea").keyup(function() {
        time = 0;
    });

    var int = self.setInterval(function() {
        var s = $("textarea").val();
        if (time++ == 3) {
            if (s != "") alert(s);
            time = 0;
        }
    }, 1000);
});

DEMO

UPDATE:

As @Tim Down has said,

The keypress event is designed for handling the a character typed by the user 
rather than detecting keyboard activity and the delete and backspace keys 
do not generate characters. Some browsers blur this line somewhat but 
the general principle is that the keyup and keydown events are there to detect 
any key being pressed and telling you about which key it is while keypress is 
for detecting an actual character being typed.

So that would be better if you use keyup instead of keypress, then your timer clear works for any key.

You might want to tweak your timing slightly as this can go off anywhere between 2 and 3s. Other than that, a nice approach — Basic, Jul 24 '12 at 21:45
this actually worked by just adding document.forms["form"].submit(); thank you so much ocanal, thank you too Basic (i tried your code but it was too complex for me i couldnt run it) and Corennekm — Color, Jul 24 '12 at 22:28

Corinne Kubler · Answer 3 · 2012-07-24T21:44:54.053

0

I think you could use http://narf.pl/jquery-typing/jquery.typing-0.2.0.min.js

have a look at http://narf.pl/jquery-typing/

$(':text').typing({
    start: function (event, $elem) {
       // do nothing
    },
    stop: function (event, $elem) {
       // send your form
    },
    delay: 3000
});

Hope this can help

edited Jul 24 '12 at 21:44

answered Jul 24 '12 at 21:30

Corinne Kubler

2,072
5
22
34

Send form after X seconds of not typing in specific field

3 Answers3