This is my display page

 <label for="City">City</label>
            <div id="city">
            <select id="city"  name="city" onChange="display(this.value)">
            <option value="" selected="selected">-- Select city --</option>
            <?php include("getcitylist.php");?>
            </select>
            </div>

this is my ajax page

    // JavaScript Document
var XMLHttpRequestObject=false;
function display(state_id)
{
if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
} 
XMLHttpRequestObject.onreadystatechange=function()
{
if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
{
document.getElementById("city").innerHTML=XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.open("GET","getcitylist.php?state_id="+state_id,true);
XMLHttpRequestObject.send();
}

This is my connection page

<?php
include("config.php");


$state_id=$_REQUEST['state_id'];


$query='SELECT tbl_city.*
FROM tbl_city
WHERE tbl_city.state_id ='';
echo $query;


?>

 <select id="city"  name="city" onChange="display(this.value)">
 <option value="" selected="selected">-- Select city --</option>
<?php

$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result))
{
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['city_name']; ?></option>
<?php
}
?>

In the select query what should i display.In table city and table states I want to display city name taking state_id as common from both tables

Dani AI

Generated

Quick checklist and a safer approach for (and thanks to for spotting the empty WHERE):

The immediate bugs: the SELECT has an empty WHERE value (so no stateid is used), the page uses the same id for the DIV and the SELECT (invalid HTML and will confuse getElementById), and the code relies on deprecated mysql* calls and unsanitized input (SQL injection/XSS risk). A robust pattern is: accept an integer state_id, query the DB with a prepared statement, return structured data (JSON), and let client-side code rebuild the options.

Example server-side response (PDO, JSON):

<?php
// getcitylist.php
if (empty($_GET['state_id'])) { http_response_code(400); echo json_encode([]); exit; }
$state = (int) $_GET['state_id'];
$pdo = new PDO('mysql:host=HOST;dbname=DB', 'USER', 'PASS', [PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION]);
$stmt = $pdo->prepare('SELECT id, city_name FROM tbl_city WHERE state_id = ? ORDER BY city_name');
$stmt->execute([$state]);
header('Content-Type: application/json; charset=utf-8');
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

Example client-side (use a unique select id like "citySelect"):

function loadCities(stateId) {
  const sel = document.getElementById('citySelect');
  fetch('getcitylist.php?state_id=' + encodeURIComponent(stateId))
    .then(r => r.json())
    .then(list => {
      sel.innerHTML = '<option value="">-- Select city --</option>';
      list.forEach(c => {
        const o = document.createElement('option');
        o.value = c.id; o.textContent = c.city_name;
        sel.appendChild(o);
      });
    })
    .catch(console.error);
}

Additional tips:

  • Keep container and control ids distinct (e.g., cityContainer / citySelect).
  • If returning HTML instead of JSON, server output should be only <option> elements and must escape values.
  • Prefer PDO or mysqli over mysql_*; always cast or validate state_id server-side.
  • If validation against states table is required, JOIN or check existence before returning cities.

This flow fixes the empty WHERE, avoids DOM/id collisions, and prevents injection/XSS while producing a clean, maintainable implementation.

Member Avatar for Member #120589
WHERE tbl_city.state_id ='';

Are you sure that's right?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.