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.

What do you want to archive with this line? -> if ( !$(this).val() || $(this).val()!== spaced) { — Oliver, Mar 14 '17 at 07:30
It checks that the input is not empty, so the JavaScript can pass it to PHP for processing. — DevManX, Mar 14 '17 at 07:32
Take this instead: if (spaced.length > 0) { move your code here... }, no else needed — Oliver, Mar 14 '17 at 07:33
Good suggestion, thank you. I tried to edit the question, but I couldn't. Andy edited it before me. Anyways I will try later to edit it. — DevManX, Mar 14 '17 at 07:38
I have added an answer, which should help you, to get what you want. — Oliver, Mar 14 '17 at 07:39

score 2 · Accepted Answer · edited May 23 '17 at 11:53

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);
});

Thank you Andy for your tome and the explanation of the problem. I think this is the ideal solution. However I have something wrong with my own code, I am keeping try to see what makes it doesn't work inside this part of the script. timeout = setTimeout(function(){ }, 500); — DevManX, Mar 14 '17 at 10:59
Andy, thank you again, finally it worked well with me, I just needed to move the setTimeout function right before the Post function. — DevManX, Mar 15 '17 at 07:07

Oliver · Answer 2 · 2017-03-14T10:41:24.803

0

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
    }
});

edited Mar 14 '17 at 10:41

answered Mar 14 '17 at 07:37

Oliver

893
6
17

You improved the code and mad checking the number of character before post easier. However the major problem didn't solve, the passed value is still different from the actual value in the inputbox. – DevManX Mar 14 '17 at 07:50
sorry, I thougth you got it. I will change my answer to face the timing problem... – Oliver Mar 14 '17 at 10:34
Thank you Oliver, I appreciate. – DevManX Mar 14 '17 at 10:53

jQuery post passing wrong input values to PHP

2 Answers2