How to handle variable inside javascript

Question

I am trying to amateurishly create an autocomplete input field with jquery. My first step is to get some results displayed below the input field by calling a php script on keyup with the load function of jquery.

I dont know how silly this attempt is, but i think i am almost there. However, I am stuck during passing the keyup variable to the script. Actually I can passa a variable but i need to use the keyup variable to pass.

For clarity on the question please see the code;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
function getres(){
    var x = document.getElementById("cit");
    $('#resdiv').load('results.php?cit=x.value');
}
</script>

HTML

 <input type="" name="" id="cit" onkeyup="getres()">
<div id='resdiv'></div>

PHP file being called results.php

<?php

if(isset($_GET['cit'])){echo $_GET['cit']."<br>";}
include('connnew.php');
$getprops=$clientdb->query("SELECT * FROM cities ORDER BY DATE LIMIT 6");

while($info=$getprops->fetch_assoc()){
    //$results[]=$info['city'];
    echo $info['city']."<br>";
}

?>

I m able to get the results in the div below with id resdiv. But the problem is, how do I ensure the value of Var X in the JavaScript function is appended to the load parameter results.php?cit= ?

I get 'x.value' being passed rather than the actual value of x. I think once I do that, eventually I can match the variable to the results array and show matching auto-complete kind of results.

You have enclosed document ready inside your function. That's not right. — Mohit Bhardwaj
– Mohit Bhardwaj, Commented Jul 15, 2016 at 15:02
Ok @mohit, thanks for the info. WIl remove that. Though it still works that way. — user3526204
– user3526204, Commented Jul 15, 2016 at 15:04
@RokoC.Buljan I thought so :) Doesn't it only bind the enclosed function to the event when document is ready, and because the document is most probably already ready, the code inside this handler should not get called again? — Mohit Bhardwaj
– Mohit Bhardwaj, Commented Jul 15, 2016 at 15:08
@MohitBhardwaj it's ugly code for sure. But yes, at call, DOM will be ready and there's nothing wrong :) — Roko C. Buljan
– Roko C. Buljan, Commented Jul 15, 2016 at 15:11

Mohit Bhardwaj · Accepted Answer · 2016-07-15 15:10:24Z

2

You need to put x.value outside your quotes as that's a variable. You can make your code much shorter than it currently is. You should not have any issues with following way:

$("#cit").on("keyup", function(){
    var x = document.getElementById("cit").value;
    $('#resdiv').load('results.php?cit='+x.value);
});//

<input type="" name="" id="cit">
<div id='resdiv'></div>

edited Jul 15, 2016 at 15:10

answered Jul 15, 2016 at 15:07

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

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

1 Comment

spirit Over a year ago

but you post is nicer, though =) +1 to you.

spirit · Accepted Answer · 2016-07-15 15:07:23Z

2

regarding to your code, you have an error here:

$('#resdiv').load('results.php?cit=x.value');

change this to:

$('#resdiv').load('results.php?cit=' + x.value);

answered Jul 15, 2016 at 15:07

spirit

3,4152 gold badges16 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to handle variable inside javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related