?
Solved

changing font color of a text box

Posted on 2003-03-15
11
Medium Priority
?
168 Views
Last Modified: 2013-12-03
How do you change the font color of a text box depending on what the text box contains. eg. if it contains "yes" i would like the font to be green but if the text is "no" i want it red. I obviously want this change to occur with out a the page having to be reloaded. Thanks
0
Comment
Question by:jm_jackson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 3
11 Comments
 
LVL 1

Expert Comment

by:MatrixDud
ID: 8143332
the best way to do that would be using CSS. Simple use:

style="color: green" in your input tag.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8143345
Do you want this when a user clicks the button? Or when they change the text of the texbox? Anyhow here's a function:

function colour() {
if(document.form.textbox.value=='yes')
{document.form.textbox.style.color='green'}
if(document.form.textbox.value=='no')
{document.form.textbox.style.color='red'}
}
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8143361
Sorry MatrixDud, didn't see your last post.

jm_jackson,
Or you could implement it right into the onChange of your textbox:

<input type='text' name='textbox' onChange="if(this.value=='yes'){this.style.color='green'}if(this.value=='no'){this.style.color='red'}">

or in a button:

<input type='button' onClick="if(document.form.textbox.value=='yes'){document.form.textbox.color='green'}if(document.form.textbox.value=='no'){document.form.textbox.style.color='red'}">

You may also want to use toLowerCase(), since the user might type in 'Yes' or 'YES' instead of'yes':

if(document.form.textbox.value.toLowerCase=='yes')
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:MatrixDud
ID: 8143379
oops...I didn't read the whole question: this will work

<input name="textBox" type="text" onChange="if( this.value == 'yes') this.style.color = 'green'; else if( this.value == 'no') this.style.color = 'red';">
0
 
LVL 1

Expert Comment

by:MatrixDud
ID: 8143380
oops...sorry lil_puffball
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8143447
:D
MatrixDud,
Funny how we keep missing each other! :)
0
 

Author Comment

by:jm_jackson
ID: 8143517
hi, thanks for the help guys. I'm still havin a bit of trouble. I know it should be simple! I'm using a drop down select box and want the text in the text box to change colour when a different selection is made in the drop down select box. Got any ideas?
0
 

Author Comment

by:jm_jackson
ID: 8143542
hi, thanks for the help guys. I'm still havin a bit of trouble. I know it should be simple! I'm using a drop down select box and want the text in the text box to change colour when a different selection is made in the drop down select box. Got any ideas?
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 150 total points
ID: 8143553
Try this:

<select onChange="colour(this.option[this.selectedIndex.text)">
<option>Yes
<option>No
</select>

you can change it to value if you want if you'd rather do it by assigning each option a different value.
And for the function:

function colour(choice) {
if(choice=='yes')
{document.form.textbox.style.color='green'}
else if(choice=='no')
{document.form.textbox.style.color='red'}
}
0
 

Author Comment

by:jm_jackson
ID: 8143754
Thanks. I've managed to sort it now.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 8143800
Your welcome. Is there any reason for the B?
0

Featured Post

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question