unable to fetch value from second dynamic dependent drop down box - php

Question

I hope my whole day trouble will at least be over by now. I have 2 drop down box. After submitting I have only first's dropdown box value in the action page. My second drop down box is dependent on the value selected in first dropdown box.
This is the ajax code in head section
<script>
function getXMLHTTP() { //function to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getScreen(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('screendiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
and this is the body of the page
<form method="post" action="a.php" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Device Name</td>
<td width="150"><select name="device" onChange="getScreen('finddevice.php?device='+this.value)">
<option value="">Select device</option>
<option value="1">Iphone 3</option>
<option value="2">Iphone 4</option>
<option value="3">Ipad </option>
<option value="4">android </option>
</select></td>
</tr>
<tr style="">
<td>Screen</td>
<td ><div id="screendiv"><select name="screen">
<option>Select Screen</option>
</select></div></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
It call the finddevice.php page which has following codes
<? $device=$_REQUEST['device'];
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('future');
$query="select screen from screen where device_id=$device";
$result=mysql_query($query);
?>
<select name="screen">
<option>Select Screen</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['screen']?></option>
<?php $row['device_id'] ?>
<? } ?>
</select>
Its working perfectly and bringing the value from the table into the second dropdown box upon selection of the value from the first dropdownbox. But when I submit the data, I can only access the first dropdown box value in the a.php file using $_POST method. That means I can only get the value of $_POST['device'] but there is not value from $_POST['screen']. Please help me out.

Answer 1

In finddevice.php, line 14 (as above) you seem to have missed value of option in 2nd drop down
I mean <option value> should be something like <option value="1">
Try filling in id or something unique as value for options in 2nd drop down
Unless you fill in values of options, 2nd drop down will submit blank value to a.php
finddevice.php:
<?php
$device=$_REQUEST['device'];
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('future');
$query="select id, screen from screen where device_id=$device";
//if screen table contains id field ...
//replace id with primary key or any unique identifier for screen table
//if there aint any primary key in "screen" table, use a field that is unique
//or create a primary key
$result=mysql_query($query);
?>
<select name="screen">
<option>Select Screen</option>
<?php while($row=mysql_fetch_array($result)) { ?>
<!-- <option value><?=$row['screen']?></option> -->
<option value="<?php echo $row['id']; ?>"><?php echo $row['screen']; ?></option>
<?php } ?>
</select>