show text area dependent on select choice

adamhw · November 16th, 2010, 03:16 PM

Hi there

I've got a drop down box and a text area - if the user selects the second option in the drop down, I need to show a text area.

When the page loads I see the textarea though I shouldn't and I don't know why it's displaying by default.

It does work if I select the second option but I don't want the textarea displaying when the page loads - only when the option is selected

this is my code:

<select name="txtSeller" id="txtSeller" class="textboxdrop" style="width:187px;" onchange="if (this.selectedIndex==2){this.form['txtBusinessType'].style.visibility='visible';this.form['txtBusinessType'].style.display='block'}else {this.form['txtBusinessType'].style.display='none';this.form['txtBusinessType'].style.visibility='hidden'};">

<%

strSQL = "SELECT id, sellertype FROM tbl_seller WHERE IsLive = 0 ORDER BY sellertype"

set rsSeller = con.execute(strSQL)

if Request("temp") = empty then
%>
<option value="" selected>-- Select Option --</option>
<%
end if

do while not rsSeller.EOF
%>
<option value="<%=rsSeller("sellertype")%>"><%=rsSeller("s ellertype")%></option>
<%

rsSeller.movenext

loop

%>
</select>
<textarea name="txtBusinessType" class="textboxmulti" id="txtBusinessType" />Please provide business name and details </textarea>

hoping someone can throw some light on the subject.

thanks

Adam

Imar · November 16th, 2010, 03:42 PM

Hi Adam,

You can hide the text area using CSS with display: none; to begin with, just as you do in your script:

<textarea name="txtBusinessType" class="textboxmulti" id="txtBusinessType" style="display: none;" />

Hope this helps,

Imar

Old Pedant · November 16th, 2010, 03:43 PM

Make up your mind whether you want to use visibility or display. If you hide something by changing its visibility, then it *still* occupies the same space on the screen. If you hide it by changing its display, then even the space it would occupy is gone.

Code:

<select name="txtSeller"class="textboxdrop"  style="width:187px;" 
  onchange="this.form.txtBusinessType.style.display = (this.selectedIndex==2) 
                ? 'inline' : 'none';">
...
<textarea name="txtBusinessType" class="textboxmulti" style="display: none;" />
Please provide business name and details  </textarea>

*OR*

Code:

<select name="txtSeller"class="textboxdrop"  style="width:187px;" 
  onchange="this.form.txtBusinessType.style.visibility = (this.selectedIndex==2) 
                ? 'visible' : 'hidden';">
...
<textarea name="txtBusinessType" class="textboxmulti" style="visibilty: hidden;" />
Please provide business name and details  </textarea>

In either case, you must set the initial style of the <textarea> to hide it at load time.

Old Pedant · November 16th, 2010, 03:44 PM

Oh, and there is NO REASON to give ID's to most form fields. Checkboxes and radio buttons *might* be exceptions, if you are using a <label for="xxx"> with them.

Old Pedant · November 16th, 2010, 03:45 PM

And Imar is faster, but he missed the fact that you are trying to change *both* visibility and display. <grin/>

Imar · November 16th, 2010, 03:48 PM

Quote:

but he missed the fact that you are trying to change *both* visibility and display.

I certainly did. Glad to see at least someone is paying attention.... ;-)

Imar

Old Pedant · November 16th, 2010, 04:20 PM

By the by, forgot to mention that I used display="none" and display="inline", instead of display="block".

A <textarea> is an inline element and you *could* mess over your display (depending on what surrounds it) by using "block" with it and thus changing its natural effect on page layout.

adamhw · November 16th, 2010, 05:38 PM

Perfect, thanks Guys