Display text depending on selection in dropdown

[jkafer]

I have a form that has drop down boxes on them.
On one field, when the user makes a selection, depending on the selection,I need to display a cautionary note somewhere on the page. I would prefer next to this field.

I have this working if I use a <textarea> form field, but I cannot control color or size of the text and it throws my form off. I have very limited space available for this form.

function dispShapeNote()
{
txtShape = document.F1.fldShape.value;
if (txtShape=='X')
{
document.F1.fldShapeN.value = ' ';
}
else
if (txtShape=='R')
{
document.F1.fldShapeN.value = 'Must be less than 0.472(12.00) diameter';
alert('Must be less than 0.472(12.00) diameter')
}
else
{
document.F1.fldShapeN.value = 'Shape must be less than 1.181(30.00) long';
alert('Shape must be less than 1.181(30.00) long')
}
return;
}


<form name=F1 method=post action="some.asp" target="mainFrame" >
<table width="373" height="96">
<tr><td width="70" align=right><font size=-1>Shape</td><td width="161">
<SELECT name='fldShape' onChange='dispShapeNote();'>
<option value="X" selected>----- Select Shape --------</option>
<option value="R">Round</option>
<option value="STS">Std. Shape (1,2,3,4,5)</option>
<option value="SRC">Std. Shape/RC (Hex, Oct)</option>
<option value="SPS">Special Shape (Cl. 3,4,5)</option>
</select>
</td>
<td width="173" ><textarea name="fldShapeN" cols="20" rows="3" wrap="virtual" readonly="readonly" ></textarea></font></td>
</tr></table>
</form>

I have the alerts in as an example, but that's not quite what I want.
I know there has to be a simple way to get this to work.

 

[LTeeple]

You can control the color and size of the text in the text area!

CSS code:

.readonly_textarea{
  background-color: #FFFFFF;
  border:1px solid #7F9DB9;
  padding:2px 5px 2px 5px;
  font-family: Myriad, Arial, Verdana, Helvetica, Sans-serif;
  font-size: 13px;
  color: #000000;
}

HTML code:

<textarea name="fldShapeN" cols="20" rows="3" wrap="virtual" readonly="readonly" class="readonly_textarea">

Just play with the css properties until you find a combination you like.


Cheers!
Laura

 

[jkafer]

Thanks!

That worked wonderfully!

Jeni