Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

populate select tag

Status
Not open for further replies.
ttuser4

ttuser4

MIS
Jun 19, 2008
147
CA
Hi, I am learning how to use AJAX; I have the following code for populating select tags:

<html>
<head>
<title>My Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">

function getXMLHTTP() {
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 getSpan(Frame) {

var strURL="findSpan.php?Frame="+Frame;
var req = getXMLHTTP();

if (req) {

req.onreadySpanchange = function() {
if (req.readySpan == 4) {
if (req.status == 200) {
document.getElementById('Spandiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getModel(Frame,Span) {
var strURL="findModel.php?Frame="+Frame+"&Span="+Span;
var req = getXMLHTTP();

if (req) {

req.onreadySpanchange = function() {
if (req.readySpan == 4) {
if (req.status == 200) {
document.getElementById('Modeldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}

}
</script>
</head>
<body>
<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Frame</td>
<td width="150"><select name="Frame" onChange="getSpan(this.value)">
<option value="">Select Frame</option>
<option value="-1">FS</option>
<option value="0">LT</option>
</select></td>
</tr>
<tr style="">
<td>Span</td>
<td ><div id="Spandiv"><select name="Span" >
<option>Select Span</option>
</select></div></td>
</tr>
<tr style="">
<td>Model</td>
<td ><div id="Modeldiv"><select name="Model">
<option>Select Model</option>
</select></div></td>
</tr>
</table>
</form>
</body>
</html>

populate Span tag

<? $Frame=intval($_GET['Frame']);
$link = mysql_connect('localhost', 'root', '');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('db1');
$query="SELECT span FROM bays where fs=$Frame group by span order by span";
$result=mysql_query($query);

?>
<select name="Span" onchange="getModel(<?=$Frame?>,this.value)">
<option>Select Span</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['span']?>><?=$row['span']?></option>
<? } ?>
</select>

populate Model tag

<? $Frame=intval($_GET['Frame']);
$Span=intval($_GET['Span']);
$link = mysql_connect('localhost', 'root', '');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('db1');
$query="SELECT qbay.type as type, qbay.load as myload, qbay.bprice/(qbay.length*qbay.span) as myprice, qbay.length as width FROM qbay where qbay.span=$Span and qbay.fs=$Frame order by qbay.load, qbay.type";
$result=mysql_query($query);

?>
<select name="Model">
<option>Select Model</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['type']?>><?=$row['type']?></option>
<? } ?>
</select>

I cannot get it working - tags Span and Model are empty. I guess the problem is with passing parameters/values but don't know what exactly. Any idea what wrong in this code please?
 
Sort by date Sort by votes
As far as I know, 'onreadySpanchange' is not a valid property - it seems to be one you've just made up with no rhyme nor reason. Try using 'onReadyStateChange' instead.

You seem to have done the same with '.readySpan' which should really be '.readyState'. Again, you seem to think you can make up arbitrary property names and expect it to work.

Perhaps reading one of the many tutorials or books about AJAX to get a list of real property values would be beneficial?

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
thank you!
those properties got mixed up when editing some sample code and using "rename all" function...

this is working code:

<html>
<head>
<title>My Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">

function getXMLHTTP() {
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 getSpan(Frame) {

var strURL="findSpan.php?Frame="+Frame;
var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById('Spandiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getModel(Frame,Span) {
var strURL="findModel.php?Frame="+Frame+"&Span="+Span;
var req = getXMLHTTP();

if (req) {

req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
document.getElementById('Modeldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}

}
</script>
</head>
<body>
<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150">Frame</td>
<td width="150">
<?
$link = mysql_connect('localhost', 'root', 'jp');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('db1');
$query="Select `bays`.`FS` AS `cat_id`,if((`bays`.`FS` = -(1)),'Free standing','Lean to') AS `category` from `bays` group by `bays`.`FS` order by `bays`.`FS`";
$result=mysql_query($query);

?>
<select name="Frame" onChange="getSpan(this.value)">
<option>Select Frame</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['cat_id']?>><?=$row['category']?></option>
<? } ?>
</select></td>
</tr>
<tr style="">
<td>Span</td>
<td ><div id="Spandiv"><select name="Span" >
<option>Select Span</option>
</select></div></td>
</tr>
<tr style="">
<td>Model</td>
<td ><div id="Modeldiv"><select name="Model">
<option>Select Model</option>
</select></div></td>
</tr>
</table>
</form>
</body>
</html>
 
Upvote 0 Downvote
Maybe there's no data, maybe there's no element with that name ...

I take you don't have any Javascript errors. Appart from that, I'd put a couple of alert statements to check what's coming from the http call.

Cheers,
Dian
 
Upvote 0 Downvote
it works now (see above); I changed some commands/key words by mistake when editing variable names (and you are right, there was no javascript error message/any error message).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

shark1956
  • Locked
  • Question
use buttons to call up web page into a div tag
Replies
1
Views
73
feherke
feherke
nielse63
  • Locked
  • Question
Assigning AJAX output to div tag
Replies
2
Views
46
BillyRayPreachersSon
BillyRayPreachersSon
dexeloper
  • Locked
  • Question
select drop-down position on input
Replies
1
Views
43
feherke
feherke
saminetemad
  • Locked
  • Question
which RefValues is selected in NumericUpDownExtender
Replies
1
Views
54
feherke
feherke
Yaik
  • Locked
  • Question
Dynamic Selection
Replies
1
Views
105
BillyRayPreachersSon
BillyRayPreachersSon

Part and Inventory Search

Sponsor

Back
Top