Discussion: Obtaining the value from an html text input in real time

JavaScript JavaScript Obtaining the value from an html text input in real time

Activities (2)
Avatar
Douglas Northwell:4. April 20:03

Hello, everyone. I'm trying to obtain the value in an html text input in real time and store it in a PHP variable. I'm doing all of this within the same php file (home.php). The script doesn't return any errors. However, when I try to access the value through the global POST array, I get an error that says the index 'query' is undefined.

Any help would be greatly appreciated.

<script src="https://­ajax.googleapis­.com/ajax/lib­s/jquery/3.3.1/jqu­ery.min.js"></scrip­t>
<script>
function getQuery(){
$('#query').chan­ge(function(){
$.ajax({
type: "POST",
url: "home.php",
data: {query:$(this)­.val()}
});
});
}
}
</script>

<input name='searchBar' type='text' onChange='get­Query();' size='100' id='query'></input>

<?php
$x = $_POST['query'];
echo $x;
?>

 
Reply 4. April 20:03
Avatar
David Jancik
ICT.social team
Avatar
David Jancik:5. April 8:09

Hi Douglas,
first of all, you're binding the event to the input twice. Once as $('#query').change and for the second time via the HTML onChange attribute. Remove the attribute since you already set it via JavaScript.

Your code should look something like this:

<script>
$(function() {
    $('#query').change(function() {
        $.ajax({
            type: "POST",
            url: "home.php",
           data: {query: $(this).val() }
        });
    });
});
</script>

<input name='searchBar' type='text' size='100' id='query'></input>

<?php
    $x = $_POST['query'];
    echo $x;
?>

Notice I've also used the DOM ready event $(function() { .... }); to execute all the JavaScript to ensure that the input element is loaded when the script is executed.

If I understood correctly, you have all this in a single PHP file. Therefore, the PHP block is executed every time you load the page and that's why you got the error notice as there is nothing in the POST yet. Place the PHP block in a different PHP file. You also don't print any results in JavaScript, so you won't see the PHP variable even you print it using echo(). I'd add something like:

<script>
$(function() {
    $('#query').change(function() {
        $.ajax({
            type: "POST",
            url: "home.php",
            data: {query: $(this).val() },
            dataType: "text"
        })
        .success(function(data) {
            console.log(data);
        });
    });
});
</script>

Which will print everything that the PHP script printed into the browser's console which is accessible via the F12 key or the Ctrl + Shift + J combination.

So what you need is to process your request in a separated PHP file which would then print some output that would be then returned to that AJAX callback where you can process it and print it into the page where you want it.

Edited 7. April 7:14
 
Up Reply 5. April 8:09
Avatar
Douglas Northwell:7. April 1:32

Thanks! Much appreciated.

 
Up Reply 7. April 1:32
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

3 messages from 3 displayed.