Gray out

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

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>
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

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?
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6251
  • Loc: Seattle, WA

Post 3+ Months Ago

The styling applied in the class wouldn't truly disable the input field, only give the appearance of being disabled.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

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?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

When you disable the field it automatically becomes gray.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Oh, duh... lol
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6251
  • Loc: Seattle, WA

Post 3+ Months Ago

Senior moment? :wink:
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

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

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 40 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.