Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old June 25th, 2010, 05:55 AM
Authorized User
Points: 405, Level: 7
Points: 405, Level: 7 Points: 405, Level: 7 Points: 405, Level: 7
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Posts: 85
Thanks: 16
Thanked 0 Times in 0 Posts
Default text area visibility:hidden

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
Reply With Quote
  #2 (permalink)  
Old June 25th, 2010, 06:19 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #3 (permalink)  
Old June 25th, 2010, 07:14 AM
Authorized User
Points: 405, Level: 7
Points: 405, Level: 7 Points: 405, Level: 7 Points: 405, Level: 7
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Posts: 85
Thanks: 16
Thanked 0 Times in 0 Posts
Default text area visibility

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
Reply With Quote
  #4 (permalink)  
Old June 25th, 2010, 07:16 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #5 (permalink)  
Old June 25th, 2010, 08:15 AM
Authorized User
Points: 405, Level: 7
Points: 405, Level: 7 Points: 405, Level: 7 Points: 405, Level: 7
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2009
Posts: 85
Thanks: 16
Thanked 0 Times in 0 Posts
Default text area visibility

thanks again Imar

It's working now - I did think about using JQuery but couldn't find the tutorial on their site -
Reply With Quote
  #6 (permalink)  
Old June 25th, 2010, 08:26 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
The Following User Says Thank You to Imar For This Useful Post:
adamhw (June 25th, 2010)
  #7 (permalink)  
Old June 26th, 2010, 05:47 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

Quote:
Originally Posted by adamhw View Post
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 View Post
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.
__________________
-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
The Following User Says Thank You to chroniclemaster1 For This Useful Post:
adamhw (June 28th, 2010)
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Text area Wenggo VBScript 5 September 20th, 2008 07:21 PM
Submit text to main page from text area... user0b PHP How-To 2 June 30th, 2008 09:52 PM
Need help: Not able to Assign Value to a Text Area steveleong Classic ASP Professional 3 February 20th, 2008 09:15 PM
text area box shoakat Classic ASP Databases 2 September 11th, 2004 07:28 AM
text in limited area alittlebitter32 Dreamweaver (all versions) 4 July 8th, 2004 10:28 AM



All times are GMT -4. The time now is 08:30 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.