javascript - drop down list send values through AJAX call

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=".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"; 
      }
 ?>
 ?>

 <html>
 <head>
 <script src="http://code.jquery./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"; 
      }
 ?>
 ?>

Share Improve this question edited Nov 13, 2013 at 19:12 asked Nov 13, 2013 at 18:53 user2925595 151 gold badge1 silver badge6 bronze badges

Whats the problem? Also $("#country").val() will work fine. – tymeJV Commented Nov 13, 2013 at 18:57
1 "There is some kind of problem with this code." Saying "it doesn't work" isn't good enough. What should happen, what happens instead, and what debugging have you done and what has it told you? – Jason P Commented Nov 13, 2013 at 18:59
It wouldnt echo anything, that's the problem – user2925595 Commented Nov 13, 2013 at 19:03

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

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()

if you mean too get work message from php file replace England with england, because php is case sensitive.

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./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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - drop down list send values through AJAX call - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)