Jquery Submit a Form on keyup with character count

Question

I have a form with loads of INPUT fields in a grid SIZE / COLOUR. I want the form to submit each time a number is entered into an INPUT FIELD - as it dynamically calculates prices.

At the moment this works:

$('.myval').bind('keyup', function() { 
    if($(this).val().length >= 2) {
        $('#cart').submit(); 
    }
});

But as you can see it needs on 2 characters before firing the form.

I need it to be able to fire on 1,2 or 3 characters (so like Qty 4 , qty 56, qty 657). So I guess it needs 'Wait' for a few milliseconds to 'see' if another key is pressed and then wait again to see if a third key is pressed.

Can anyone help with this?

What you need is a throttle. I'd suggest using keydown and a 250ms throttle. It will feel faster to the user than it would if you were instead using keyup. — Kevin B, Oct 31 '13 at 17:38
The idea is you start a timeout that gets stopped and restarted on each keydown, and when the timeout finally expires (meaning the user stopped typing for n ms,) you perform the action. — Kevin B, Oct 31 '13 at 17:41
Thanks for the comments. Iunderstand what I need - just how to code it is a bit baffling — Calamaster, Oct 31 '13 at 21:06

SarathSprakash · Accepted Answer · 2013-10-31T19:01:13.343

2

Sample DEMO

I guess this is what you need

You can increase or decrease the waiting time

var t;
$('.myval').keyup(function () {
    clearTimeout(t);
    if ($(this).val().length < 2) {
        t = setTimeout(function () {
            $('#cart').submit();
        }, 1000);
    } else {
        $('#cart').submit();
    }

});

Hope this helps ,Thank you

edited Oct 31 '13 at 19:01

answered Oct 31 '13 at 18:55

SarathSprakash

4,614
2
19
35

Excellent - made Length <3 timeout to 400 and added a click to 'clear current input' value - all sorted. Thank you very much! – Calamaster Oct 31 '13 at 21:05

score 1 · Answer 2 · edited May 23 '17 at 11:52

To start, you can use jQuery's shorthand method to bind your keyup event.

$('.myval').keyup(function () {

});

You can use the delay() function found in this answer.

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

To sum it all up, use the keyup event and delay() method to get your desired results.

$('.myval').keyup(function () {
    delay(function () {
        if($(this).val().length >= 2) {
            $('#cart').submit(); 
        }
    });  
})

DISCLAIMER: I haven't tested this. Some tweaking may be required. Batteries not included.

score 1 · Answer 3 · answered Oct 31 '13 at 17:45

1

You need jquery.typing-0.2.0.min.js for this type of functionality. Download it here:

http://lab.narf.pl/jquery-typing/

Enjoy!!! :)

answered Oct 31 '13 at 17:45

Ali

5,021
4
26
45

Adam M. · Answer 4 · 2013-10-31T18:23:52.947

1

I think that you simple need to change your condition to "$(this).val().length < 3"

  $('.myval').bind('keyup', function() { 
    if($(this).val().length < 3) {
        $('#cart').submit(); 
      }
  });

edited Oct 31 '13 at 18:23

answered Oct 31 '13 at 17:46

Adam M.

1,071
1
7
23

I don't think this will work as it would submit after just 1 character and that is not what I want. Thanks anyway. – Calamaster Oct 31 '13 at 18:15

score 0 · Answer 5 · answered Oct 31 '13 at 18:41

This will allow even using the backspace key to delete typed input, but is not suitable if one wants to cancel one input and instead use another input (would need more logic). Tested on Firefox 25.0 / Linux:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        var lenTemp1 = 0;
        var delay_ms = 1000;

        function testSubmit(inputElemId) {
            var actualLen = $("#" + inputElemId).val().length;
            if (actualLen && (actualLen == lenTemp1))
                $('#cart').submit();
            else {
                lenTemp1 = actualLen;
                window.setTimeout("testSubmit('" + inputElemId + "')", delay_ms);
            }
        }

        function initialKeyup() {
            lenTemp1 = $(this).val().length;
            $('.myval1').unbind('keyup', initialKeyup);
            window.setTimeout("testSubmit('myval1')", delay_ms);
        }

        $(document).ready(function() {
            $('.myval1').bind('keyup', initialKeyup);
        });
    </script>
</head>
<body>
    <form id="cart" method="GET" action="#" onsubmit="alert('debug info: submitted')">
        <input id="myval1" class="myval1" type="text" />
    </form>
</body>
</html>

Jquery Submit a Form on keyup with character count

5 Answers5

Sample DEMO