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
– Oliver, Commented Mar 14, 2017 at 7:30
It checks that the input is not empty, so the JavaScript can pass it to PHP for processing. — DevManX
– DevManX, Commented Mar 14, 2017 at 7:32
Take this instead: if (spaced.length > 0) { move your code here... }, no else needed — Oliver
– Oliver, Commented Mar 14, 2017 at 7: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
– DevManX, Commented Mar 14, 2017 at 7:38
I have added an answer, which should help you, to get what you want. — Oliver
– Oliver, Commented Mar 14, 2017 at 7:39

Community · Accepted Answer · 2017-05-23 11:53:50Z

2

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

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Mar 14, 2017 at 7:48

Andy

30.2k9 gold badges44 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DevManX Over a year ago

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 Over a year ago

Andy, thank you again, finally it worked well with me, I just needed to move the setTimeout function right before the Post function.

Oliver · Accepted Answer · 2017-03-14 10:41:24Z

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, 2017 at 10:41

answered Mar 14, 2017 at 7:37

Oliver

8736 silver badges17 bronze badges

3 Comments

DevManX Over a year ago

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.

Oliver Over a year ago

sorry, I thougth you got it. I will change my answer to face the timing problem...

DevManX Over a year ago

Thank you Oliver, I appreciate.

Collectives™ on Stack Overflow

jQuery post passing wrong input values to PHP

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related