Display mysql table after selection from dropdown list

faie · May 12, 2015

Hi all,

I am new to PHP and a bit slow in understanding ajax, javascript. I want to ask on how to display the table after I select the 3rd dropdown.

I don't know how to start.

//this is ajax-dd3.php file
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title></title>
<META NAME="DESCRIPTION" CONTENT="">
<META NAME="KEYWORDS" CONTENT="">
<script type="text/javascript">
function ajaxFunction(choice)
{

var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      httpxml=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
function stateChanged() 
    {
    if(httpxml.readyState==4)
      {
//alert(httpxml.responseText);
var myObject = JSON.parse(httpxml.responseText);

for(j=document.myForm.state.options.length-1;j>=0;j--)
{
document.myForm.state.remove(j);
}

var state1=myObject.value.state1;

var optn = document.createElement("OPTION");
optn.text = 'Select State';
optn.value = '';
document.myForm.state.options.add(optn);
for (i=0;i<myObject.state.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myObject.state[i];
optn.value = myObject.state[i];
document.myForm.state.options.add(optn);

if(optn.value==state1){
var k= i+1;
document.myForm.state.options[k].selected=true;
}
} 

//////////////////////////
for(j=document.myForm.city.options.length-1;j>=0;j--)
{
document.myForm.city.remove(j);
}
var city1=myObject.value.city1;
//alert(city1);
for (i=0;i<myObject.city.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myObject.city[i];
optn.value = myObject.city[i];
document.myForm.city.options.add(optn);
if(optn.value==city1){
document.myForm.city.options[i].selected=true;
}

} 


///////////////////////////
document.getElementById("txtHint").style.background='#00f040';
document.getElementById("txtHint").innerHTML='done';
//setTimeout("document.getElementById('txtHint').style.display='none'",3000)
    }
    }

var url="ajax-dd3ck.php";
var country=myForm.country.value;
if(choice != 's1'){
var state=myForm.state.value;
var city=myForm.city.value;
}else{
var state='';
var city='';
}
url=url+"?country="+country;
url=url+"&state="+state;
url=url+"&city="+city;
url=url+"&id="+Math.random();
myForm.st.value=state;
//alert(url);
 document.getElementById("txtHint2").innerHTML=url;
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
 document.getElementById("txtHint").innerHTML="Please Wait....";
document.getElementById("txtHint").style.background='#f1f1f1';
}
</script>


</head>

<body >
</head>

<body>
<div id="txtHint" style="width : 100px;background-color: #cccc33;">Message area</div>
<br><br>
<form name="myForm" action='ajax-dd3-details.php' method='post'">
<input type=hidden name=st value=0>
<table width=500>
<tr><td >
Select Country<br><select name=country id='s1' onchange=ajaxFunction('s1');>
<option value=''>Select One</option>
<?Php
//require "../include/z_db1.php";
require "config.php";// connection to database 
$sql="select distinct country from student5 ";
foreach ($dbo->query($sql) as $row) {
echo "<option value=$row[country]>$row[country]</option>";
}
?>
</select>

</td><td ><select name=state  onchange=ajaxFunction('s2');>
<option value=''>Select One</option></select></td>
<td ><select name=city  onchange=ajaxFunction('s3');>
<option value=''>Select One</option></select></td>
</tr></tr>
<tr><td colspan=3><input type=submit value='Submit'></td></tr>
</form>
</table>
<br><br>
<div id="txtHint2"></div>

</body>
</html>

//this is ajax-dd3ck.php file
<?Php
require "config.php"; // connection details

error_reporting(0);// With this no error reporting will be there
//////////
/////////////////////////////////////////////////////////////////////////////
$country=$_GET['country'];// 
//$country='IND'; // To check you can use this
$state1=$_GET['state'];
$city1=$_GET['city'];
///////////// Validate the inputs ////////////
// Checking country variable ///
if((strlen($country)) > 0 and (!ctype_alpha($country))){ 
echo "Data Error";
exit;
}
// Checking state variable (with space ) ///

if ((strlen($state1)) > 0 and ctype_alpha(str_replace(' ', '', $state1)) === false) {
echo "Data Error";
exit;
}

/////////// end of input validation //////

if(strlen($country) > 0){
$q_country="select distinct(state) from student5 where country = '$country'";
}else{
$q_country="select distinct(state) from student5";
}
//echo $q_country;
$sth = $dbo->prepare($q_country);
$sth->execute();
$state = $sth->fetchAll(PDO::FETCH_COLUMN);

$q_state="select distinct(city) from student5 where ";
if(strlen($country) > 0){
$q_state= $q_state . " country = '$country' ";
}
if(strlen($state1) > 0){$q_state= $q_state . " and  state='$state1'";}
$sth = $dbo->prepare($q_state);
$sth->execute();
$city = $sth->fetchAll(PDO::FETCH_COLUMN);

$main = array('state'=>$state,'city'=>$city,'value'=>array("state1"=>"$state1","city1"=>"$city1"));
echo json_encode($main); 

////////////End of script /////////////////////////////////////////////////////////////////////////////////
?>

//this is ajax-dd3-details.php file
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title></title>
<META NAME="DESCRIPTION" CONTENT="">
<META NAME="KEYWORDS" CONTENT="">
</head>

<body>
<?Php
echo "Country : $_POST[country]<br>
State : $_POST[state]<br>
City : $_POST[city]<br>
<br><br><br>
Return to <a href=ajax-dd3.php>Drop down list</a>
";
?>

</body>
</html>

fastsol · May 13, 2015

You would be wise to look into the jquery library, it would make this far easier for you. Also research the onchange function of jquery to detect when the select option has changed.

Sign In

Display mysql table after selection from dropdown list

Recommended Posts

faie

Link to comment

Share on other sites

fastsol

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information