drop down list send values through AJAX call
Question
I'm new to AJAX and trying to learn basic calls through AJAX and jQuery. I have a simple drop list of countries, where I want to select a particular country and send the value of it to server, where it would process which country was selected and give particular output. For now, it could just echo simple output in php file. There is some kind of problem with this code. I would appreciate if anyone could help me with it. thanks
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function load()
{
$.ajax({
type:"GET",
url: "test.php",
data: { country: $("#country").val()}
}).done(function(msg){
$("#right #myDiv").html(msg);
});
}
</script>
</head>
<body>
<div id="main">
<div id="left">
Select Country: <select id="country" name="country">
<option value="germany">Germany</option>
<option value="england">England</option>
</select>
<input type="button" value="Run Query" onClick="load()"></input>
</div>
<div id="right">
<div id="myDiv"></div>
</div>
</div>
test.php
<?php
$name=$_GET['country'];
if($name=="England")
{
echo "Works";
}
else
{
echo "doesnt Work";
}
?>
?>
3 answers
solution1
1 ACCPTED 2013-11-13 19:01:21
The only issue I see is that in your PHP you have
if($name=="England")
But in your html you have
<option value="england">England</option>
It is sending over "england". "england" != "England" .
Also, I would just do
$("#country").val()
instead of
$("#country option:selected").val()
solution2
0 2013-11-13 19:03:49
There is 2 errors in your code :
data: { country: $("#country option:selected").val()}
should be $("#country").val()
and
if($name=="England")
shoudl be "england"
So Here is the right code :
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function load()
{
$.ajax({
type:"GET",
url: "test.php",
data: { country: $("#country").val() }
}).done(function(msg){
$("#right #myDiv").html(msg);
});
}
</script>
</head>
<body>
<div id="main">
<div id="left">
Select Country: <select id="country" name="country">
<option value="germany">Germany</option>
<option value="england">England</option>
</select>
<input type="button" value="Run Query" onClick="load()"></input>
</div>
And for the test.php :
<?php
$name=$_GET['country'];
if($name=="england")
{
echo "Works";
}
else
{
echo "doesnt Work";
}
?>
EDIT : It's pretty straight forward for me, but : be sure you call your page via your web server. The url in your browser should be :
http://localhost/whatever/page.html
and not (if from your hard drive) :
file://c:/whatever/page.html
solution3
0 2013-11-13 19:04:39
如果您也想从php文件中获取工作消息，请用england替换England ，因为php区分大小写。
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.