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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old November 16th, 2010, 03:16 PM
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 show text area dependent on select choice

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
Reply With Quote
  #2 (permalink)  
Old November 16th, 2010, 03:42 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
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 November 16th, 2010, 03:43 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
Reply With Quote
  #4 (permalink)  
Old November 16th, 2010, 03:44 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
Reply With Quote
  #5 (permalink)  
Old November 16th, 2010, 03:45 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

And Imar is faster, but he missed the fact that you are trying to change *both* visibility and display. <grin/>
Reply With Quote
  #6 (permalink)  
Old November 16th, 2010, 03:48 PM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
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
  #7 (permalink)  
Old November 16th, 2010, 04:20 PM
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
Reply With Quote
  #8 (permalink)  
Old November 16th, 2010, 05:38 PM
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

Perfect, thanks Guys
Reply With Quote
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
PHP+Curl, Sending Post request to update text inside a text area Dotnetnuke .ASPX webspace969 ASP.NET 4 General Discussion 1 October 10th, 2010 03:15 PM
dependent select menu hastikeyvan Classic ASP Professional 3 November 10th, 2006 01:46 PM
dependent select menu hastikeyvan Dreamweaver (all versions) 1 February 27th, 2006 04:34 AM
show/hide text field from select (drop down) Gotaka4 Javascript 6 December 7th, 2005 05:44 AM
Find Record Combo Box Wizard Won't Show 3rd Choice HenryE Access 0 February 2nd, 2004 11:52 PM



All times are GMT -4. The time now is 09:12 AM.


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