show input textbox when "other" is selected from xmlhttprequest

[Court K]

This is mostly taken from bits and pieces found on the internet and I need help adjusting it, because I don't understand how it works. I have a form that will display selects based on a select, and this works great. I now want the second select to show <Input Type="text" Name="txtOtherA sset"> only when "other...pl ease specify" is selected, and of course hide it when it's not. Thanks for your help.

My current working functions:

function showCustomer(str){
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null){
		alert ("Your browser does not support AJAX!");
		return;
	}
	
	var url="getclient.asp";
	url=url+"?q="+str;
	url=url+"&sid="+Math.random();

	xmlhttp.onreadystatechange=stateChanged;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}

function stateChanged(){
	if (xmlhttp.readyState==4){
		document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
	}
}

function GetXmlHttpObject(){
	if (window.XMLHttpRequest)	{
		// code for IE7+, Firefox, Chrome, Opera, Safari
		return new XMLHttpRequest();
	}
	if (window.ActiveXObject){
		// code for IE6, IE5
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
	return null;
}

function showAsset(str){
	xmlhttpAsset=GetXmlHttpObjectAsset();
	if (xmlhttpAsset==null){
		alert ("Your browser does not support AJAX!");
		return;
	}
	
	var urlAsset="getasset.asp";
	urlAsset=urlAsset+"?a="+str;
	urlAsset=urlAsset+"&sid="+Math.random();

	xmlhttpAsset.onreadystatechange=stateChangedAsset;
	xmlhttpAsset.open("GET",urlAsset,true);
	xmlhttpAsset.send(null);
}

function stateChangedAsset(){
	if (xmlhttpAsset.readyState==4){
		document.getElementById("txtAsset").innerHTML=xmlhttpAsset.responseText;
	}
}

function GetXmlHttpObjectAsset(){
	if (window.XMLHttpRequest)	{
		// code for IE7+, Firefox, Chrome, Opera, Safari
		return new XMLHttpRequest();
	}
	if (window.ActiveXObject){
		// code for IE6, IE5
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
	return null;
}

function populate(form){
	var f=form.ClientAsset;
	var selectedOption = f.options[f.selectedIndex].value;
	var strWrkOrdAsset = selectedOption.split(",");
	//form.txtAssetType.value=strWrkOrdAsset [1];
	document.getElementById("txtAssetType").innerHTML=strWrkOrdAsset [1];
}

My getAsset.asp

<SELECT Name="ClientAsset" onChange="populate(this.form)">
				<OPTION></OPTION>
				<OPTION>Other...please specify</OPTION>
				<% Do Until objRSAsset.EOF %>
					<OPTION Value="<% Response.Write objRSAsset("AssetID") & "," & objRSAsset("Type") %>"><% Response.Write objRSAsset("Asset") %></OPTION>
					<%
					objRSAsset.MoveNext
				Loop
				%>
			</SELECT>

My WorkOrder.asp

<TD>
				<SELECT ID="ClientCompany" Name="ClientCompany" onchange="showCustomer(this.value);showAsset(this.value)">
				<Option>Select Client Company</Option>
				<% Do While Not objRSCompany.EOF %>
					<Option Value="<% Response.Write objRSCompany("ClientCompanyID") %>"><% Response.Write objRSCompany("ClientCompanyName") %></Option>
					<%
					objRSCompany.MoveNext
				Loop
				%>
				</SELECT>
				<%
				objRSCompany.Close
				Set objRSCompany = Nothing
				%>
			</TD>
			<TD>Client User</TD>
			<TD>
				<DIV ID="txtHint">Please select Company first</DIV>
			</TD>
		</TR>
		<TR>
			<TD>Client Asset</TD>
			<TD>
				<DIV ID="txtAsset">Please select Company first</DIV>
			</TD>
			<TD>Asset Type</TD>
			<TD>
				<DIV ID="txtAssetType">&nbsp;</DIV>
			</TD>
		</TR>

[Court K]

I got this to work by running two seperate functions in the getAsset.asp onchange event, where the second function hides and unhides the text box based on what as selected.

[Bharat383]

<form name="form1">
	Select Subject ::	<select name="subject">
			<option value="php" onclick="hide_other()">PHP </option>
			<option value="asp"  onclick="hide_other()">ASP </option>
			<option value="html" onclick="hide_other()">HTML </option>	
			<option value="java"  onclick="hide_other()">JAVA</option>	
			<option value="other" onclick="view_other()">Other</option>							
	</select>
	<input type="text" name="other_suject" id="other_subject" style="display:none;"/>
</form>
<script type="text/javascript">
	function view_other()
	{	
		document.getElementById("other_subject").style.display="block";
	}	
	function hide_other()
	{
		document.getElementById("other_subject").style.display="none";	
	}
</script>

[acoder]

An onchange event on the select element makes a lot more sense here.