Insert values out of DB into Javascript

Hi,

I have a problem. I have some javascript to allow someone to select a value out of a combo box and depending on the value the other combo box will be populated with values that match it.

In my database table i have 2 fields - ModelID and ModelTypeID

Here is my javascript code with hand coded values.

<script language="Javascript">
<!--

function PopulateTeams() {

var ModelList = document.frmMain.cboModel;

// Clear out the list of teams
ClearOptions(document.frmMain.cboModelType);

if (ModelList[ModelList.selectedIndex].value == "1") {
AddToOptionList(document.frmMain.cboModelType, "1", "Model1");
AddToOptionList(document.frmMain.cboModelType, "2", "Model2");
AddToOptionList(document.frmMain.cboModelType, "3", "Model3");
}

if (ModelList[ModelList.selectedIndex].value == "1") {
AddToOptionList(document.frmMain.cboModelType, "1", "Model1ModelType1");
AddToOptionList(document.frmMain.cboModelType, "2", "Model1ModelType2");
}


if (ModelList[ModelList.selectedIndex].value == "2") {
AddToOptionList(document.frmMain.cboModelType, "3", "Model2ModelType3");
AddToOptionList(document.frmMain.cboModelType, "4", "Model2ModelType4");
}


if (ModelList[ModelList.selectedIndex].value == "3") {
AddToOptionList(document.frmMain.cboModelType, "5", "Model3ModelType5");
AddToOptionList(document.frmMain.cboModelType, "6", "Model3ModelType6");
}
}


function ClearOptions(OptionList) {

// Always clear an option list from the last entry to the first
for (x = OptionList.length; x >= 0; x = x - 1) {
OptionList[x] = null;
}
}


function AddToOptionList(OptionList, OptionValue, OptionText) {
// Add option to the bottom of the list
OptionList[OptionList.length] = new Option(OptionText, OptionValue);
}



//-->
</script>

Here are my combos

<Select name="cboModel" onChange="PopulateTeams();">
<option>Choose a Model</option>
<option value="1">Model1</option>
<option value="2">Model2</option>
<option value="3">Model3</option>
</select>
</font></td>
</tr>
<tr>
<td width="25%" class="middle" bgcolor="#C0C0C0"><b>Type: </b></td>
<td width="75%" class="middle" bgcolor="#C0C0C0">
<select name="cboModelType">
<option>Choose a Model Type</option>
<option> </option>
</select>

Does anyone know how put the database fields in rather that hand coding it all? or a better way?

Thanks

The easiest way - refresh the page (once you submit the info from the first select), and then show the second combo box.

Otherwise, you may have to populate ALL conceivable information into javascript arrays when the page is loaded, and then use pure client-side javascript to populate the second combo box depending upon what was selected.

There are a couple of other tricky ways around this using hidden frames or a java applet to do a remote server call, but they are way too much trouble in my opinion.

ASP.NET does a much better job in cases like this, since the page doesn't appear to refresh... but for classic ASP, I generally go the server-side route, and just refresh the page, since it's much easier (I'm lazy).

Cheers whammy,

How would you refresh the page upon the onchange event? I have refreshed the page before having a 'select' button, but that option stayed on the page aswell after the refresh!

Thanks :)

use the document.forms.formname.submit()

And leave the action of the form as blank.

Then you will need some handler, i.e.

if len(request.form("Select")) > 0 then

Code to populate second RS for second selct box here.

end if




Sorted!!