Call php file using AJAX
Question
I'm attempting to use this guide to use AJAX to make changes to a form. It's not working and I'm having difficulties troubleshooting. My current code:
Base page
<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","demo_find_location.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="countries" onchange="showUser(this.value)">
<option value="">Select a country:</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">China</option>
<option value="4">Viet Nam</option>
</select>
</form>
<br>
<div id="txtHint"><b>Country info will be listed here.</b></div>
</body>
</html>
demo_find_location.php
<?php
$q = intval($_GET['q']);
echo $q;
?>
The onchange function is being triggered since the div with id="textHint" is being reset when the select option value = "" . It doesn't seem to be processing the php of my php file. Could it be a pathing issue or code incompatibility? I'm currently using the /var/www/html/sites/all/libraries directory to contain my php file.
3 answers
solution1
0 2018-06-29 21:51:09
Your code works fine, just Don't FORGET to load the jquery library in the header when using javascript/jquery codes
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
/// rest of your page
Also, here's a minified version of what you are currently trying to do that i hope it will help you understand jquery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
/// We trigger the function onchange
function showUser()
{
// We get the value of the country
var q = document.getElementById("countries").value;
if(!isNaN(q))//We check if the value is a valid number
{
$("#txtHint").load("demo_find_location.php?q="+q);//We load the result in txtHint
}
}
</script>
<form>
<select id="countries" onchange="showUser()">
<option value="">Select a country:</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">China</option>
<option value="4">Viet Nam</option>
</select>
</form>
<br>
<div id="txtHint"><b>Country info will be listed here.</b></div>
solution2
-1 2018-06-29 21:03:29
This.value is null? If the function is getting called by the onchange event and texting is getting reset it's because the passed string(str) = "".
solution3
-1 2018-06-29 21:21:21
<!DOCTYPE html>
<html>
<head>
<script>
var baseUrl="this is your website path";
//
// http://localhost/websitefolder/path or http://livepath
//
var eleTxtHint = document.getElementById("txtHint");
function showUser(str)
{
eleTxtHint.innerHTML="";
if (str!="")
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
} else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (this.readyState==4 && this.status==200) {
var response=JSON.parse(this.responseText);
if(response.status==true)
{
eleTxtHint.innerHTML=this.responseText;
}
else
{
alert('somethings went wrong');
}
}
else
{
alert('somethings went wrong');
}
};
xmlhttp.open("GET",baseUrl+"demo_find_location.php?q="+str,true);
xmlhttp.send();`enter code here`
}
}
</script>
</head>
<body>
<form>
<select name="countries" onchange="showUser(this.value)">
<option value="">Select a country:</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">China</option>
<option value="4">Viet Nam</option>
</select>
</form>
<br>
<div id="txtHint"><b>Country info will be listed here.</b></div>
</body>
</html>
demo_find_location.php
<?php
$q = isset($_GET['q'])?intval($_GET['q']):"";
echo json_encode(array('status'=>true,'data'=>$q));
exit();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.