text area visibility:hidden

adamhw · June 25th, 2010, 05:55 AM

Hi there

I'm trying to make a textarea appear depending on what the user selects from a drop down box - this is my code:

<select name="txtAccidentType" id="txtAccidentType" class="forminput" onchange="if (this.selectedIndex==2){this.form['txtReason'].style.visibility='visible'}else {this.form['txtReason'].style.visibility='hidden'};">
<option value="Doctor" selected="selected">Doctor</option>
<option value="Surgeon">Surgeon</option>
<option value="Consultant">Consultant</option>
<option value="Dentist">Dentist</option>
<option value="2">Organization</option>
<option value="Other">Other</option>
</select>
<br />
<br />
<textarea name="txtReason" id="txtReason" style="visibility:hidden; display:none;" class="textboxmulti"></textarea>

So if they select the option with value 2 then I was hoping that the textarea 'txtReason' would appear but it doesnt' seem to.

There is no error message for debugging too so would appreciate it greatly if someone could help.

thanks

Adam

Imar · June 25th, 2010, 06:19 AM

Hi Adam,

Take a look at this:

display:none

You're not only hiding the box with the visibility property, but also with display. Try removing that, or set it to 'block' in your JavaScript code.

Cheers,

Imar

adamhw · June 25th, 2010, 07:14 AM

thanks Imar

I have it working:

<select name="txtAccidentType" id="txtAccidentType" class="forminput" onchange="if (this.selectedIndex==5){this.form['txtReason'].style.visibility='visible'}else {this.form['txtReason'].style.block='hidden'};">
<option value="Doctor" selected="selected">Doctor</option>
<option value="Surgeon">Surgeon</option>
<option value="Consultant">Consultant</option>
<option value="Dentist">Dentist</option>
<option value="Organization">Organization</option>
<option value="Other">Other</option>
</select>
<br />
<br /></td>
</tr>
<tr>
<td valign="top"><strong>More Details:</strong></td>
<td><textarea name="txtReason" id="txtReason" style="visibility:hidden;" class="textboxmulti"></textarea></td>
</tr>

So how would I code it if I wanted txtReason to display:none until it was needed? at the moment there is a space in the form the depth of txtReason.

thanks again

Imar · June 25th, 2010, 07:16 AM

Replace visibility:hidden with display: none:

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

and then show it by setting it to block:

this.form['txtReason'].style.display = 'block';

Additionally, you may want to look at jQuery which makes these kind of things extremely easy.

Cheers,

Imar

adamhw · June 25th, 2010, 08:15 AM

thanks again Imar

It's working now - I did think about using JQuery but couldn't find the tutorial on their site -

Imar · June 25th, 2010, 08:26 AM

Did you check out the tutorial section? http://docs.jquery.com/Tutorials There's tons of documentation and tutorials available for jQuery....

Imar

chroniclemaster1 · June 26th, 2010, 05:47 PM

Quote:

Originally Posted by adamhw

So how would I code it if I wanted txtReason to display:none until it was needed? at the moment there is a space in the form the depth of txtReason.

thanks again

Quote:

Originally Posted by Imar

Replace visibility:hidden with display: none:

and then show it by setting it to block:

this.form['txtReason'].style.display = 'block';

Additionally, you may want to look at jQuery which makes these kind of things extremely easy.

It may sound basic, but when the browser lays out your page it fits each element onto the page. However, that's the difference between the visibility and display properties. If you control an element with visibility the element is laid out on the page, but you are controlling whether it appears. If you control an element with display:none then element not laid out on the page at all. That's why using visibility creates the gap because all other elements on the page respect the element, you just can't see it, whereas display makes it appear to be removed from the page.

While you don't need jQuery to implement something this light, you can do some pretty awesome things with it, like masquerading the entire page with two different sets of XHTML, one default, one called in by jQuery using AJAX to create a full fledged RIA.