Textarea appear based on dropdown selection?

[brendanwor]

Say I have a dropdown menu. When one particular item is selected, I'd like a textarea input to appear below the dropdown menu, but only when that particular item is selected - and if another dropdown item is then selected, I'd like it to disappear. How would I go about doing this? Thanks in advance!

[Stickybomb]

you need to use ajax.

 

depending on how you wish to use it, it will be different. you can right it completely in js or use a server language like php/asp to precess the response.

 

for this you could probably et away with just js depends on how much changes and what not. you need too files though one containing the ajax call function, witch is attached to the dropdown menu like so

 

<select name="menu" id="menu" onchange="ajax(this.value);">
<option>choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

 

then you need a seperate file in what ever language you prefer to determine what is showed in the specified container based on the value

 

so first you need a container like so

 

<div id="response">
<!--Nothing here to begin with-->
</div

 

ok then in your ajax function you use the id for this div and update it witht he response from your request process file

 

so your ajax file would look like this

 

var xmlHttp

function show(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 
//this is the path to the process file
var url="process.php"
url=url+"?value="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 

//the id for the containing div goes here
document.getElementById("response").innerHTML=xmlHttp.responseText 
} 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}

 

no for the processing and result i prefer to use php so your file would look like this

 

<?php
switch($_GET['value']) {
case '1':
echo '<textarea name="comment" id="comment" cols="45" rows="5"></textarea>';
break;
case '2':
echo '<input name="radio" type="radio" value="" />';
break;
case '3':
echo '<input type="submit" name="help" id="help" value="Submit" />';
break;
case '4':
echo '<input type="text" name="name" id="name" />';
break;
?>

 

this is all kinda basic and not test but should work and you should be able to make some customizations pretty easily