[barbie_girl]

hi,
i wanted to create a two drop down list , second drop down list will filter the data on the selection of first drop down list ,the data fetched is from database. when the two drop downlist values are selected the selected data should be shown in textbox. how this would be possible...help will be appreciated
thanx in advance

[Atli]

Hey.

This is done using Javascript; by having Javascript monitor the "change" event of the select and update the second select either by refreshing the page and having PHP update it, or by updating it using data already provided in the script or from an AJAX request.

You may want to start by reading these tutorials:
- Dynamic Dropdown Menus
- Populating A Dropdown/Combo Box From MySQL.

[barbie_girl]

Atli, on 13 April 2012 - 03:08 AM, said:

Hey.

This is done using Javascript; by having Javascript monitor the "change" event of the select and update the second select either by refreshing the page and having PHP update it, or by updating it using data already provided in the script or from an AJAX request.

You may want to start by reading these tutorials:
- Dynamic Dropdown Menus
- Populating A Dropdown/Combo Box From MySQL.

hi,
thanks for reply.. i have got the answer my code run. i know using javascript or ajax it is possible..i have done using ajax,php and mysql. but the problem is that i dont know how to get the selected values of drop down list into the textbox. if possible any example.

[RudiVisser]

barbie_girl, on 13 April 2012 - 10:45 AM, said:

hi,
thanks for reply.. i have got the answer my code run. i know using javascript or ajax it is possible..i have done using ajax,php and mysql. but the problem is that i dont know how to get the selected values of drop down list into the textbox. if possible any example.

Just to reiterate, this is not a PHP issue, it's a Javascript one.

You could simply do this:

var selBox = document.getElementById('selectbox');
var selValue = selBox.options[selBox.selectedIndex].value;
document.getElementById('thetextbox').value = selValue;

This could also work (not sure about IE support but it should be fine):

document.getElementById('thetextbox').value = document.getElementById('selectbox').value;

Just stick that in the change handler for your select box.

This post has been edited by RudiVisser: 13 April 2012 - 03:50 AM

[Duckington]

If you were doing it dynamically with AJAX, you would so something like:

// Code here where you loaded up the select elements on change

document.getElementById('myTxt').innerHTML = someVariable; // Where someVariable is the values you want to put in the text box

<div id="myTxt"></div>

That will find the html element with the "id" of "myTxt" and put the contents of "someVariable" into it.

[Atli]

I'm moving this thread over to the Javascript forum. Like RudiVisser says, this is not a PHP issue.

[barbie_girl]

hi, this is my ajax page where should i edit

function GetXmlHttpObject(handler) 
{ 
   var objXMLHttp=null 
   if (window.XMLHttpRequest) 
   { 
       objXMLHttp=new XMLHttpRequest() 
   } 
   else if (window.ActiveXObject) 
   { 
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") 
   } 
   return objXMLHttp 
} 

function stateChanged() 
{ 
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") 
   { 
           document.getElementById("txtResult").innerHTML= xmlHttp.responseText; 
   } 
   else { 
           //alert(xmlHttp.status); 
   } 
} 

// Will populate data based on input 
function htmlData(url, qStr,tag) 
{ 
     
    if (url.length==0){ 
      document.getElementById(tag).innerHTML="C:\wamp\www\office\LearningFusionCharts\MyFirstChart\dropdown\mine.php"; 
      return; 
    } 
    xmlHttp=GetXmlHttpObject() 
    if (xmlHttp==null){ 
       alert ("Browser does not support HTTP Request"); 
       return; 
    } 
     
    url=url+"?"+qStr; 
    url=url+"&sid="+Math.random(); 
    //xmlHttp.onreadystatechange=stateChanged; 
    xmlHttp.onreadystatechange=function(){ 
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
            document.getElementById(tag).innerHTML=xmlHttp.responseText; 
        } 
    } 
	//xmlhttp.open("GET","?qstr="+str2,true);
    xmlHttp.open("GET",url,true) ; 
    xmlHttp.send(); 
	
} 

and php page

<?php
  $con = mysql_connect("localhost","","");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("info", $con);
  /***********************website****************************/
  $query = "SELECT DISTINCT website FROM urls1";
  $result = mysql_query($query);
  
  $str1 ="<select element=\"website\" onchange=\"htmlData('user.php', 'website='+this.value, 'elementresult')\">";
  		echo "<BR>";

  while($rs = mysql_fetch_assoc($result)){
    $str1 .= '<option value="'.$rs['website'].'">'.$rs['website'].'</option>';
  }
  $str1 .= '</select>';
  
  /***********************element****************************/
  $query = "SELECT element FROM urls1";
  $result = mysql_query($query);
  $str2 ="<select element=\"element\" onchange=\"htmlData('user.php', 'element='+this.value, 'websiteresult')\">";		echo "<BR>";
           
		   while($rs = mysql_fetch_assoc($result)){
    $str2 .= '<option value="'.$rs['element'].'"></option>';		

  }
  echo "<BR>";
?>

<html>

<head>
<title>websites</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <script src="ajax_req.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr><td>
<form method="post" >
<div id="websiteresult"><?php echo $str1;?></div><br/><br/>
</td></tr>
<tr><td>
<div id="elementresult"><?php echo $str2;?></div><br/><br/>
 <br/>
</td></tr>
<tr><td>
<input type="submit" />
</td></tr>
</form>
</table>
</body>
</html>