Retrieve value from AJAX to PHP

Retrieve value from AJAX to PHP

Hi


Basically I want to select value from dropdown and after selecting value from dropdown, enter value in the text.
Based upon the selected value and text I want to retrieve value from database.

1.) index.php
`Inline Code Example Here`

<?php
    $sql = "SELECT * FROM city ORDER BY city_name";
    $query = mysql_query($sql);
    ?>
                <label>City:
                <select name="city" onChange="showCity(this);">
                  <option value="">Please Select</option>
                  <?php while ($rs = mysql_fetch_array($query )) { ?>
                  <option value="<?php echo $rs["city_id"]; ?>"><?php echo $rs["city_name"]; ?></option>
                  <?php } ?>
                </select>

    <?php
    $city_id = ($_REQUEST["city_id"] <> "") ? trim( addslashes($_REQUEST["city_id"])) : "";
    echo "city_id=$city_id";
    if ($city_id <> "" ) { 
    $sql = "SELECT * FROM location WHERE city_id = ".$city_id ." ORDER BY area";
    $count = mysql_num_rows( mysql_query($sql) );
    if ($count > 0 ) {
    $query = mysql_query($sql);
    ?>
    <label>Area: 
    <select name="area" onchange="showArea(this);">
    <option value="">Please Select</option>
    <?php while ($rs = mysql_fetch_array($query)) { ?>
    <option value="<?php echo $rs["area_id"]; ?>"><?php echo $rs["area"]; ?></option>
    <?php } ?>
    </select>
    </label>
    <?php 
    }
    }
    ?>

                </label>
    <form action='x.php' method='GET' >
    <center>
    <h1>Fetch</h1>
    <input type='text' size='90' name='sum' id="sum"></br></br>
    <input type='submit' name='submit' value='Submit' ></br></br></br>
    </center>
    </form>
    
    
    <script src="jquery-1.9.0.min.js"></script>
    <script>
    function showCity(sel) {
    var city_id = sel.options[sel.selectedIndex].value;  
    $("#output1").html( "" );
    $("#output2").html( "" );
    if (city_id.length > 0 ) { 
   
    $.ajax({
    type: "POST",
    url: "x.php",
    data: "city_id="+city_id,
    cache: false,
    beforeSend: function () { 
    $('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
    },
    success: function(html) {    
    $("#output1").html( html );
    }
    });
    } 
    }
    
    function showArea(sel) {
    var area_id = sel.options[sel.selectedIndex].value;  
    if (area_id.length > 0 ) { 
    $.ajax({
    type: "POST",
    url: "y.php",
    data: "area_id="+area_id,
    cache: false,
   
    });
    } 
    }
    </script>

`Inline Code Example Here`
2.) x.php

    <?php
    $city_id = ($_REQUEST["city_id"] <> "") ? trim( addslashes($_REQUEST["city_id"])) : "";
    echo "city_id=$city_id";
    if ($city_id <> "" ) { 
    $sql = "SELECT * FROM location WHERE city_id = ".$city_id ." ORDER BY area";
    $count = mysql_num_rows( mysql_query($sql) );
    if ($count > 0 ) {
    $query = mysql_query($sql);
    ?>
    

    ` `
3.)  y.php



    <?php
    $area_id = ($_REQUEST["area_id"] <> "") ? trim( addslashes($_REQUEST["area_id"])) : "";
    echo "area=$area_id";
    
    $sum = $_GET ['sum']; 
     
    $construct ="SELECT * FROM shop WHERE  area_id='$area_id';
   ?> 
    

    
Here I am unable to run the query, since $area_id is not working for this query.
But I am able to echo $area_id .....but i.e., on index.php