Gray out

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post June 23rd, 2008, 1:32 am

How do you make a text box grayed out when somthing happens? :hmm:
I have a box that says where do you live and it has lots of choises and I think I have coved them all but just in case I added a Other one and please say where but I want that grayed out unless they click on other!
^__^
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 23rd, 2008, 1:32 am

  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Joined: May 29, 2007
  • Posts: 481
  • Status: Offline

Post June 23rd, 2008, 2:13 am

I assume you're talking about a form on a web page. Well, you need to use JavaScript:
Code: [ Select ]
<form>

Where do you live?
<select id="choice" size="0" onchange="check();">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="Other">Other</option>
</select>
<input type="text" id="other_name" disabled="disabled" />

</form>

<script type="text/javascript">
function check() {
if (document.getElementById('choice').value == 'Other')
    document.getElementById('other_name').disabled = false;
else
    document.getElementById('other_name').disabled = true;
}
</script>
  1. <form>
  2. Where do you live?
  3. <select id="choice" size="0" onchange="check();">
  4. <option value="A">A</option>
  5. <option value="B">B</option>
  6. <option value="C">C</option>
  7. <option value="Other">Other</option>
  8. </select>
  9. <input type="text" id="other_name" disabled="disabled" />
  10. </form>
  11. <script type="text/javascript">
  12. function check() {
  13. if (document.getElementById('choice').value == 'Other')
  14.     document.getElementById('other_name').disabled = false;
  15. else
  16.     document.getElementById('other_name').disabled = true;
  17. }
  18. </script>
No Strings Attached: A JavaScript graphics demo.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post June 23rd, 2008, 12:34 pm

Thanks for posting that code, casablanca. I'm trying to learn JavaScript and DOM, so it's nice to see fairly simple examples like this- they're easier to wrap my head around.

One question... why did you use
Code: [ Select ]
<input type="text" id="other_name" disabled="disabled" />

instead of
Code: [ Select ]
<input type="text" id="other_name" class="disabled" />

Wouldn't using a class make it so that you can control the appearance of the input box and make it gray using the CSS?
phoenix web design
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Joined: Sep 22, 2003
  • Posts: 6129
  • Loc: Seattle, WA
  • Status: Offline

Post June 23rd, 2008, 12:36 pm

The styling applied in the class wouldn't truly disable the input field, only give the appearance of being disabled.
The Beer Monocle. Classy.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post June 23rd, 2008, 12:40 pm

Oh, that makes sense.. so then how do you make it gray? Do you need to add some more JavaScript to change the class, too? Or would it be better to just change the color in that same JavaScript function?
phoenix web design
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post June 23rd, 2008, 12:50 pm

When you disable the field it automatically becomes gray.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post June 23rd, 2008, 1:22 pm

Oh, duh... lol
phoenix web design
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Joined: Sep 22, 2003
  • Posts: 6129
  • Loc: Seattle, WA
  • Status: Offline

Post June 23rd, 2008, 1:23 pm

Senior moment? :wink:
The Beer Monocle. Classy.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post June 23rd, 2008, 1:34 pm

Hey, we old guys just need to ask a few more stupid questions to keep up with you youngsters :wink:
phoenix web design

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 229 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.