Is there an on click event with ASP combo boxes Please read

**VBDever** · Mar 2nd, 2001, 12:29 PM

Is there a click event or some event that can start an action after a user selects an item in a combo box.

I have an ASP that when it loads, the 1st combo box is populated with a list of equipment numbers.

The second combo box is populated with component items for the 1st equipment number in the recordset.

When some one selects a new equipment number I need the combo box to be repopulated and represent the components that are associate with that equipment number. I guess this will require a redirect. how do I do it? Please help!!!!

**Cander** · Mar 2nd, 2001, 12:48 PM

You have to do is client side using VBScript(IE only) or javascript. You would add the attribute onclick to the combobox and it calls a function you wrote in client side VBScript of Javascript.

for example

<input type="text" onclick="myfunction()">

**VBDever** · Mar 2nd, 2001, 01:29 PM

Yes, you are correct however, I am doing this to populate another combo box on the same asp, I establish the value of the first, in order to establish the value of the second. Will I need to do a redirect in order to repopulate the second combo box based on the first?

**Cander** · Mar 2nd, 2001, 01:50 PM

No. What you should do is set the forms action to the same page as it is on. you could then have the page submit on the click and use request.form to see if the clicked box has a value. If so use the value to populate the other combo.

Did that make any sense???

**Jeh** · Mar 2nd, 2001, 01:54 PM

Hi,

Best way imo would be to use javascript, populate a few arrays with the details for the second drop down from your database, then when the first drop down is selected use javascript to repopulate the second drop down with the corresponding array items.

Sorry no code attached, might have some floating about somewhere, shall dig about and see if I can find it, but got a new hd since doing that as old one died earlier in the week(depends if I backed it up anywhere first

)

**VBDever** · Mar 2nd, 2001, 02:26 PM

I understand what you are saying. Do you have a code example that might put me in the right place.

Here is my code

Function GetOwnerEquipment
Dim rsOwnerEquip
dim EquipID
Set rsOwnerEquip = oFE.GetComponentBoundEquipment()%>
Owner Equipment ID's <BR>

<SELECT NAME="ListBoxOE" SIZE=1 onchange="getequipmentcomponents(EquipID)" >
<% Do While Not rsOwnerEquip.EOF %>
<OPTION VALUE="<%= rsOwnerEquip("EquipmentID") %>"> <%= rsOwnerEquip("OwnersEquipmentID") %></option>

<% rsOwnerEquip.MoveNext
Loop
rsownerequip.movefirst
EquipID = rsOwnerEquip("EquipmentID")
rsOwnerEquip.Close
'call Function GetEquipmentComponents(EquipmentID)
%>
</SELECT>
<BR><BR>
<%
End Function

Function GetEquipmentComponents(iOwnerEquipID)
Dim rsComponentsByEquipID
Set rsComponentsByEquipID = oFE.GetComponentsByEquipID(iOwnerEquipID)%>
Components <BR>
<SELECT NAME="ListBoxDTR" SIZE=1>
<% Do While Not rsComponentsByEquipID.EOF %>
<OPTION VALUE="<%= rsComponentsByEquipID("ComponentID") %>"> <%= rsComponentsByEquipID("ComponentName") %></option>
<% rsComponentsByEquipID.MoveNext
Loop
rsComponentsByEquipID.Close
End function%>

Both of these will be sumitted. The actual functions are not with in the form tags. I am using the call function name with in the form tags to include them in the post. Let me know what to do to make the first function dynamicly populate the second.

**monte96** · Mar 3rd, 2001, 02:46 AM

This is long but this is how you create dynamic client side script that contains the data. This method will allow you to change the values of the 2nd (or in this case 2nd and 3rd) combos or listboxes (they are similar although you don't have to check for the selected property with a combo since you can just compare against the selectedIndex option object's value) without refreshing the page and using another round trip to the server

Code:

<head>
<meta name="VI60_defaultClientScript" content="Javascript">
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<link REL="STYLESHEET" TYPE="text/css" HREF="PimaStyle.css">
<title>
	Employee Time Reports
</title>
<%
	arrTemp = rsProjects.GetRows
	'Reset recordset
	rsProjects.MoveFirst
	
	Response.Write "<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>" & vbCrLf
	Response.Write "<!--" & vbCrLf
	Response.Write "var arrProject = new Array();" & vbCrLf
	Response.Write "var arrEng = new Array();" & vbCrLf
	
	For intRow = 0 To Ubound(arrTemp, 2)
		Response.Write "arrProject[" & intRow & "] = new Array(" & UBound(arrTemp, 1) & ");" & vbCrLf
		For intCol = 0 To UBound(arrTemp, 1)
			Response.Write "arrProject[" & intRow & "][" & intCol & "] = " & Chr(34) & arrTemp(intCol, intRow) & Chr(34) & ";" & vbCrLf
		Next
	Next
	erase arrTemp

	arrTemp = rsEngagements.GetRows
	rsEngagements.MoveFirst

	For intRow = 0 To Ubound(arrTemp, 2)
		Response.Write "arrEng[" & intRow & "] = new Array(" & UBound(arrTemp, 1) & ");" & vbCrLf
		For intCol = 0 To UBound(arrTemp, 1)
			Response.Write "arrEng[" & intRow & "][" & intCol & "] = " & Chr(34) & arrTemp(intCol, intRow) & Chr(34) & ";" & vbCrLf
		Next
	Next
%>
//Changes the engagement/project listboxes
function lstClients_onchange()
{
	var strURL;
	var colOptions = frmSelect.lstClients.options;
	var colTarget = frmSelect.lstEngagements.options;
	var colMid = frmSelect.lstEngagements.options;
	var intArr;
	var intList;
	var objOption;
		
	//Clear Engagement List
	for (intList=colTarget.length - 1; intList > -1; intList--)
		colTarget.remove(intList);
		
	if (colOptions[0].value=='ALL' && colOptions[0].selected)
	{
		//If ALL is seleted, then populate all Engagements
		objOption = document.createElement("OPTION");
		colTarget.add(objOption);
		objOption.innerText = 'All';
		objOption.value = 'ALL';
		for (intArr=0; intArr < arrEng.length; intArr++)
		{
			objOption = document.createElement("OPTION");
			colTarget.add(objOption);
			objOption.innerText=arrEng[intArr][1];
			objOption.value=arrEng[intArr][0];
		}
	}
	else
	{
		objOption = document.createElement("OPTION");
		colTarget.add(objOption);
		objOption.innerText='All';
		objOption.value='ALL';

		for (intArr=0; intArr < arrEng.length; intArr++)
		{
			//window.alert(intArr);
			for (intList=0; intList < colOptions.length; intList++)
			{

				if ((arrEng[intArr][2]==colOptions[intList].value) && (colOptions[intList].selected))
				{
					objOption = document.createElement("OPTION");
					colTarget.add(objOption);
					objOption.innerText=arrEng[intArr][1];
					objOption.value=arrEng[intArr][0];
				}
			}
		}
	}
	
	if (colTarget.length > 0)
		colTarget[0].selected = true;
	
	//Populate Projects
	colTarget = frmSelect.lstProjects.options;
	//Clear Project List
	for (intList=colTarget.length - 1; intList > -1; intList--)
		colTarget.remove(intList);
	
	if ((colOptions[0].value=='ALL' && colOptions[0].selected) && (colMid[0].value=='ALL' && colMid[0].selected))
	{
		//If ALL is seleted, then populate all projects
		objOption = document.createElement("OPTION");
		colTarget.add(objOption);
		objOption.innerText = 'All';
		objOption.value = 'ALL';
		for (intArr = 0; intArr < arrProject.length; intArr++)
		{
			objOption = document.createElement("OPTION");
			colTarget.add(objOption);
			objOption.innerText=arrProject[intArr][1];
			objOption.value=arrProject[intArr][0];
		}
	}
	else if ((colOptions[0].value=='ALL' && !(colOptions[0].selected)) && (colMid[0].value=='ALL' && colMid[0].selected))
	{
		//Need to check for the client only
		objOption = document.createElement("OPTION");
		colTarget.add(objOption);
		objOption.innerText='All';
		objOption.value='ALL';
		for (intArr=0; intArr < arrProject.length; intArr++)
		{
			for (intList=0; intList < colOptions.length; intList++)
			{
				if (arrProject[intArr][3]==colOptions[intList].value && colOptions[intList].selected)
				{
					objOption = document.createElement("OPTION");
					colTarget.add(objOption);
					objOption.innerText=arrProject[intArr][1];
					objOption.value=arrProject[intArr][0];
				}
			}
		}
	}
	else
	{	
		objOption = document.createElement("OPTION");
		colTarget.add(objOption);
		objOption.innerText='All';
		objOption.value='ALL';
		for (intArr=0; intArr < arrProject.length; intArr++)
		{
			for (intList=0; intList < colMid.length; intList++)
			{
				if (arrProject[intArr][2]==colMid(intList).value && colMid(intList).selected)
				{
					objOption = document.createElement("OPTION");
					colTarget.add(objOption);
					objOption.innerText=arrProject[intArr][1];
					objOption.value=arrProject[intArr][0];
				}
			}
		}
	}
	
	if (colTarget.length > 0)
		colTarget(0).selected = true;

	colTarget	= null;
	colOptions	= null;
	colMid		= null;
	objOption	= null;
}

function lstEngagements_onchange()
{
	var colOptions = frmSelect.lstClients.options;
	var colTarget = frmSelect.lstProjects.options;
	var colMid = frmSelect.lstEngagements.options;
	var intArr;
	var intList;
	var objOption;
	
	//Populate Projects
	colTarget = frmSelect.lstProjects.options;
	//Clear Project List
	for (intList=colTarget.length - 1; intList > -1; intList--)
		colTarget.remove(intList);
	
	if ((colOptions[0].value=='ALL' && colOptions[0].selected) && (colMid[0].value=='ALL' && colMid[0].selected))
	{
		//If ALL is seleted, then populate all projects
		objOption = document.createElement("OPTION");
		colTarget.add(objOption);
		objOption.innerText='All';
		objOption.value='ALL';
		for (intArr=0; intArr < arrProject.length; intArr++)
		{
			objOption = document.createElement("OPTION");
			colTarget.add(objOption);
			objOption.innerText=arrProject[intArr][1];
			objOption.value=arrProject[intArr][0];
		}
	}
	else if ((colOptions[0].value=='ALL' && !(colOptions[0].selected)) && (colMid[0].value=='ALL' && colMid[0].selected))
	{
		//Need to check for the client only
		objOption = document.createElement("OPTION");
		colTarget.add(objOption);
		objOption.innerText='All';
		objOption.value='ALL';
		for (intArr=0; intArr < arrProject.length; intArr++)
		{
			for (intList=0; intList < colOptions.length; intList++)
			{
				if (arrProject[intArr][3]==colOptions[intList].value && colOptions[intList].selected)
				{
					objOption = document.createElement("OPTION");
					colTarget.add(objOption);
					objOption.innerText=arrProject[intArr][1];
					objOption.value=arrProject[intArr][0];
				}
			}
		}
	}
	else
	{	
		objOption = document.createElement("OPTION");
		colTarget.add(objOption);
		objOption.innerText='All';
		objOption.value='ALL';
		for (intArr=0; intArr < arrProject.length; intArr++)
		{
			for (intList=0; intList < colMid.length; intList++)
			{
				if (colMid[intList].selected && arrProject[intArr][2]==colMid[intList].value)
				{
					objOption = document.createElement("OPTION");
					colTarget.add(objOption);
					objOption.innerText=arrProject[intArr][1];
					objOption.value=arrProject[intArr][0];
				}
			}
		}
	}
	
	if (colTarget.length > 0)
		colTarget(0).selected = true;

	colTarget	= null;
	colOptions	= null;
	colMid		= null;
	objOption	= null;	
}

function frmSelect_onsubmit()
{
	var collOptions = frmSelect.lstProjects.options;
	var intLoop;

//Select projects
	if (collOptions[0].selected)
	{
		collOptions[0].selected=false;
		for (intLoop=1; intLoop < collOptions.length; intLoop++)
			collOptions[intLoop].selected=true;
	}
	frmSelect.cmdGenRpt.value='Employee Report';

//Get date values
	frmSelect.txtFrom.value=tdFrom.innerText;
	frmSelect.txtTo.value=tdTo.innerText;
}

function SetDate()
{
	//Populate with 2 weeks ago
	document.all.txtFrom.value = '<%=Right("0" & Day(dteTemp), 2) & "-" & UCase(MonthName(Month(dteTemp), True)) & "-" & Year(dteTemp)%>';
	tdFrom.innerText = '<%=Right("0" & Day(dteTemp), 2) & "-" & UCase(MonthName(Month(dteTemp), True)) & "-" & Year(dteTemp)%>';
}

function window_onload()
{
	window.setTimeout("SetDate()", 2, 'javascript');
}
//-->
</script>

Thread: Is there an on click event with ASP combo boxes Please read

Thread Tools

Display

Posting Permissions