jQuery post passing wrong input values to PHP

Question

Everything works fine, except one thing. When I write something in the inputbox, first it passes and being echoed correctly for one moment, then the last few characters/digits disappear. For example if I am writing: Hello The PHP echo Hello, then, after a moment the word becomes H or Hell The number of disappeared characters depends on the speed of typing the word, as much as I write quickly as much as characters disappear. When I write very slowly, letter by letter, the word being echoed correctly and nothing changes. Here is the code for reference:

HTML:

<input name="paramA" id="paramA" type="text" class="form-control" maxlength="5" required/>

jQuery:

$("#paramA").on("keyup", function () {
    var paramB = $('#paramB').val();
    var paramA = $('#paramA').val();
    var spaced = $.trim($(this).val());
    if ( !$(this).val() || $(this).val() !== spaced) {
        $("#result").html("");
    } else {
        $.post( 'http://localhost/folder/code.php',    
                {'paramB':paramB,'paramA':paramA}, 
                function(data) {
                    $("#result").html(data);
                }
        );
    }
}); 

PHP:

echo $_POST["paramA"];

Any help will be appreciated.

Answer 1

The problem is, that the ajax calls don't always take the same amount of time.
So if you are typing fast, the calls for "Hell" and "Hello" are started at almost the same time.

So if for some reason the "Hell" call takes longer, PHP will return the "Hello" echo, and then you receive "Hell". (Overwriting "Hello" in your output.)

A solution to this would be to cancel the pending ajax request before starting a new one .

Or to use a timeout in your keyup function to only start the ajax call when nothing was typed for 500 milliseconds or something.
(You should still cancel any pending ajax calls, just to be sure)

Like this:

var timeout = null;
$("#paramA").on("keyup", function () {
    clearTimeout(timeout); // clear currently waiting timeout
    timeout = setTimeout(function(){ // wait 500 ms before ajax call
        var paramB = $('#paramB').val();
        var paramA = $('#paramA').val();
        var spaced = $.trim($(this).val());
        if ( !$(this).val() || $(this).val() !== spaced) {
            $("#result").html("");
        } else {
            $.post( 'http://localhost/folder/code.php',    
                    {'paramB':paramB,'paramA':paramA}, 
                    function(data) {
                        $("#result").html(data);
                    }
            );
        }
    }, 500);
}); 

Answer 2

This should do it for you.

var to = null;
$("#paramA").on("keyup", function () {        
    var paramB = $('#paramB').val();
    var paramA = $.trim($(this).val());
    if ( paramA.length > 0) { // adjust 0 to a minimum number of characters before post to php
        if (to !== null) {
           clearTimeout(to);
        }
        to = setTimeout(function() {
            $.post( 'http://localhost/folder/code.php',    
                {'paramB':paramB,'paramA':paramA}, 
                function(data) {
                    $("#result").html(data);
                }
            );
        }, 500); // adjust the time in ms, how long you want to wait until the post will be send
    }
});