You’re listening for the wrong event.

The keyup event is sent to an element when the user releases a key on the keyboard.

But your input is being processed from the numeric keypad you did with buttons.

You can bind it to the actual button clicks by adding a class to your numeric buttons:

<button class="num" ...>0</button>

And then adding the event handler:

$('button.num').click(function() {
  if($('#code').val().length >= 4)
    $('#form').submit();
});

I always struggle with this. I wish I could use more than one id=”” per element. But I know I can’t. As I struggle with JavaScript and Ajax, but I try. I use JavaScript to capture the #code id for the user sign in number, and Ajax to count inputted characters. How can I trigger the Ajax to execute Upon the forth character being inputted. Thanks in advance for any help.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <div style="float:left;width:60%;background:lime1">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div  class="btn-group-vertical ml-4  mt-4 " role="group" aria-label="Basic example">
                    <div class="btn-group">
                        <form id="form" action="barista_punch_menu.php" action="post">
                            <input type="text" autofocus style="font-size:40px" class="text-center form-control-lg mb-2" id="code" id="sID"  value="" name="barista_id" placeholder="Enter Barista Id:" maxlength="4" >
                    </div>
                    <div class="btn-group">
                        <button type="button" class="num btn btn-outline-secondary py-3 " onclick="document.getElementById('code').value=document.getElementById('code').value + '1';">1</button>
                        <button type="button" class="num btn btn-outline-secondary py-3 " onclick="document.getElementById('code').value=document.getElementById('code').value + '2';">2</button>
                        <button type="button" class="num btn btn-outline-secondary py-3 " onclick="document.getElementById('code').value=document.getElementById('code').value + '3';">3</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="num btn btn-outline-secondary py-3 " onclick="document.getElementById('code').value=document.getElementById('code').value + '4';">4</button>
                        <button type="button" class="num btn btn-outline-secondary py-3 " onclick="document.getElementById('code').value=document.getElementById('code').value + '5';">5</button>
                        <button type="button" class="num btn btn-outline-secondary py-3 " onclick="document.getElementById('code').value=document.getElementById('code').value + '6';">6</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="num btn btn-outline-secondary py-3 " onclick="document.getElementById('code').value=document.getElementById('code').value + '7';">7</button>
                        <button type="button" class="num btn btn-outline-secondary py-3 " onclick="document.getElementById('code').value=document.getElementById('code').value + '8';">8</button>
                        <button type="button" class="num btn btn-outline-secondary py-3 " onclick="document.getElementById('code').value=document.getElementById('code').value + '9';">9</button>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="num btn btn-outline-secondary py-3 2" onclick="document.getElementById('code').value=document.getElementById('code').value.slice(0, -1);">Del</button>
                        <button type="button" class="num btn btn-outline-secondary py-3 3" onclick="document.getElementById('code').value=document.getElementById('code').value + '0';"> 0 </button>
                        <button type="submit" class="num btn btn-primary py-3 4" onclick="">Go</button>
                    </div>
                </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
$('button.num').click(function() {
  if($('#code').val().length >= 4)
    $('#form').submit();
});
    </script>