how to retrieve table when the third drop down is selected

Question

i am having 3 sets of drop down list. i am trying to display the mysql table when i selected the last dropdown list. all example are shows for only one dropdown only. Help are really appreciated!! Thanks in advance. :)

This is my ajax code:

<script type="text/javascript">
function ajaxFunction()
{

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.PTT.options.length-1;j>=0;j--)
{
    document.myForm.PTT.remove(j);
}

var PTT1=myObject.value.PTT1; // ptt1 remove change to PTT only.

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


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

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

        if(optn.value==EXT1){
        document.myForm.EXT.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="checking2.php";
    var REGION=myForm.REGION.value;

    if(choice != 's1'){
        var PTT=myForm.PTT.value;
        var EXT=myForm.EXT.value;
            }else{
                var PTT='';
                var EXT='';
                }

    url=url+"?REGION="+REGION;
    url=url+"&PTT="+PTT;
    url=url+"&EXT="+EXT;
//url=url+"&id="+Math.random();
    myForm.st.value=PTT;
//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>

//this is the html code

<div id="txtHint" style="width : 100px;background-color: #cccc33;">Message area</div>
    <br><br>
    <form name="myForm" action='details.php' method='post'">
    <input type=hidden name=st value=0>
    <table width=500>
    //use this function to collect the value of region from table.
    <tr><td >
    Select Region:<br><select name=REGION id='s1' onchange=ajaxFunction('s1');>
    <option value=''>Select One</option>

    <?Php

        require "config2.php";// connection to database 
        $sql="select distinct REGION from all_exchangelist ";
        foreach ($dbo->query($sql) as $row) {
        echo "<option value=$row[REGION]>$row[REGION]</option>";
            }
    ?>
</select>

</td><td ><select name=PTT  onchange=ajaxFunction('s2')>
<option value=''>Select One</option></select></td>
<td ><select name=EXT  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>

This is for validating the html and ajax code:

<?Php
include "config2.php"; // connection details

error_reporting(0);// With this no error reporting will be there
//////////
/////////////////////////////////////////////////////////////////////////////
$REGION=$_GET['REGION'];// 
$PTT1=$_GET['PTT'];
$EXT1=$_GET['EXT'];

///////////// Validate the inputs ////////////
if((strlen($REGION)) > 0 and (!ctype_alpha($REGION))){ 
echo "Data Error";
exit;
}
// Checking ptt variable (with space ) ///

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

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

if(strlen($REGION) > 0){
$q_REGION="select distinct(PTT) from all_exchangelist where REGION = '$REGION'";
}else{
$q_REGION="select distinct(PTT) from all_exchangelist";
}
//echo $q_region;
$sth = $dbo->prepare($q_REGION);
$sth->execute();
$PTT = $sth->fetchAll(PDO::FETCH_COLUMN);

$q_PTT="select distinct(EXT) from all_exchangelist where ";
if(strlen($REGION) > 0){
$q_PTT= $q_PTT . " REGION = '$REGION' ";
}
if(strlen($PTT1) > 0){$q_PTT= $q_PTT . " and  PTT='$PTT1'";}
$sth = $dbo->prepare($q_PTT);
$sth->execute();
$EXT = $sth->fetchAll(PDO::FETCH_COLUMN);

$main = array('PTT'=>$PTT,'EXT'=>$EXT,'value'=>array("PTT1"=>"$PTT1","EXT1"=>"$EXT1"));
echo json_encode($main); 
?>

lets start with my content swaper: https://github.com/FREE-FROM-CMS/content_swaper From there you need to go to target the seccond div tag when it gets a value set to it, then from that you need to do the same thing with more to dig down deeper. I also noticed you need to call your variables properly: — a coder, May 13 '15 at 18:00
@php_purest ermm. i don't really understand php ajax. i am really new in this php. if you dont mind, can you show me an example? you mean i need to change to this ? foreach ($dbo->query($sql)as $row) { echo ""; } — , May 13 '15 at 18:21
OMG @php_purest i just realized that i put the wrong code for checking validating. i just corrected it. pardon my mistake. — , May 13 '15 at 18:50
no yet. i dont know where i need to call to retrieve the table data after i selected the 3rd drop down list. How am i suppose to do? do i need to change the function statechange() there? @php_purest — , May 14 '15 at 00:11
You need to change where it's getting the value from to the 2nd input. — a coder, May 14 '15 at 02:53
@php_purest sorry i'm a bit slow. i got tutorial from plus2net. i dont really understand on ajax. please bear with me. so i need to change the second input to same as the first one? — , May 14 '15 at 03:06
wrap each input field in its own div tag, then when you change the data of the first one it targets the second one... Have you looked at: https://www.youtube.com/watch?v=ELRNFtFxIs8 It could help you learn the javascript you need to know some. I haven't watched it yet. — a coder, May 14 '15 at 03:20
@php_purest i cannot watch that because of connection problem. have you see my coding down here? — , May 14 '15 at 05:17

score 0 · Accepted Answer · edited May 14 '15 at 15:57

@php_purest if i change the coding become like this? how to retrieve the table? btw, my connection is slow, so i cannot watch the youtube.

<?php

require "config2.php"; // Your Database details 
?>

<!doctype html public "-//w3c//dtd html 3.2//en">

<html>

<head>
<title></title>
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<SCRIPT language=JavaScript>
function reload(form)
{
var value=form.REGION.options[form.REGION.options.selectedIndex].value; 
self.location='threelist.php?REGION=' + value ;
}
function reload3(form)
{
var value=form.REGION.options[form.REGION.options.selectedIndex].value; 
var value2=form.PTT.options[form.PTT.options.selectedIndex].value; 

self.location='threelist.php?REGION=' + value + '&PTT=' + value2 ;
}

</script>
</head>

<body>
<?Php


///////// Getting the data from Mysql table for first list box//////////
$query2="SELECT DISTINCT REGION FROM all_exchangelist"; 
///////////// End of query for first list box////////////

/////// for second drop down list we will check if category is selected else we will display all the subcategory///// 
$REGION=$_GET['REGION']; // This line is added to take care if your global variable is off
if(isset($PTT) and strlen($PTT) > 0)
{
    $query="SELECT DISTINCT PTT FROM all_exchangelist where PTT=$REGION"; 
}else{$query="SELECT DISTINCT PTT FROM all_exchangelist"; } 
////////// end of query for second subcategory drop down list box ///////////////////////////


/////// for Third drop down list we will check if sub category is selected else we will display all the subcategory3///// 
$PTT=$_GET['PTT']; // This line is added to take care if your global variable is off
if(isset($EXT) and strlen($EXT) > 0){
$query3="SELECT DISTINCT EXT FROM all_exchangelist where EXT=$PTT"; 
}else{$query3="SELECT DISTINCT EXT FROM all_exchangelist"; } 
////////// end of query for third subcategory drop down list box ///////////////////////////


echo "<form method=post name=f1 action='threelistcheck.php'>";
//////////        Starting of first drop downlist /////////
echo "<select name='REGION' onchange=\"reload(this.form)\">
      <option value=''>Select one</option>";

        foreach ($dbo->query($query2) as $noticia2) 
        {
        if($noticia2['REGION']==@$REGION)
        {   
            echo "<option selected value='$noticia2[REGION]'>$noticia2[REGION]</option>"."<BR>";
        }
        else
        {   
            echo  "<option value='$noticia2[REGION]'>$noticia2[REGION]</option>";
        }
        }
        echo "</select>";
//////////////////  This will end the first drop down list ///////////

//////////        Starting of second drop downlist /////////
    echo "<select name='PTT' onchange=\"reload3(this.form)\">
          <option value=''>Select one</option>";

            foreach ($dbo->query($query) as $noticia) 
            {
                if($noticia['PTT']==@$PTT)
                {
                echo "<option selected value='$noticia[PTT]'>$noticia[PTT]</option>"."<BR>";
                }
                else
                    {
                        echo  "<option value='$noticia[PTT]'>$noticia[PTT]</option>";}
                    }
                echo "</select>";
//////////////////  This will end the second drop down list ///////////


//////////        Starting of third drop downlist /////////
    echo "<select name='EXT' ><option value=''>Select one</option>";
        foreach ($dbo->query($query3) as $noticia) 
        {
            echo  "<option value='$noticia[EXT]'>$noticia[EXT]</option>";
        }
        echo "</select>";
//////////////////  This will end the third drop down list ///////////


    echo "<input type=submit value='Submit the form data'></form>";
    ?>
<br><br>
<a href=threelist.php>Reset and Try again</a>

</body>
</html>

Oh. but may i know after i got all the $_POST['REGION'], how can i search for it in the table? @php_purest — , May 15 '15 at 07:34
Look into http://stackoverflow.com/questions/767026/how-can-i-properly-use-a-pdo-object-for-a-select-query — a coder, May 15 '15 at 16:29
@php_purest. Thank you so much for helping. I got the answer already :) — , May 18 '15 at 00:56

how to retrieve table when the third drop down is selected

1 Answers1