Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 179
  • Last Modified:

changing font color of a text box

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
jm_jackson
Asked:
jm_jackson
  • 5
  • 3
  • 3
1 Solution
 
MatrixDudCommented:
the best way to do that would be using CSS. Simple use:

style="color: green" in your input tag.
0
 
lil_puffballCommented:
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
 
lil_puffballCommented:
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!

 
MatrixDudCommented:
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
 
MatrixDudCommented:
oops...sorry lil_puffball
0
 
lil_puffballCommented:
:D
MatrixDud,
Funny how we keep missing each other! :)
0
 
jm_jacksonAuthor Commented:
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
 
jm_jacksonAuthor Commented:
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
 
lil_puffballCommented:
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
 
jm_jacksonAuthor Commented:
Thanks. I've managed to sort it now.
0
 
lil_puffballCommented:
Your welcome. Is there any reason for the B?
0

Featured Post

Independent Software Vendors: 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!

  • 5
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now