Jump to content

change font color when there is text in input field


exhaler

Recommended Posts

hi,

i was wondering how i can change the font color after a user has typed in something in an input field

i did this

$(document).ready(function() {
$("#firstbranch").click(function(){
     $('#free').animate({
     	fontSize: "24px"
   });
 });

<td style="width: 98px" valign="top" align="left">
				<font color="#B9A49B" face="Arial" style="font-size: 8pt">
					first branch location
				</font>
			</td>

			<td valign="middle" align="left" style="width: 210px">
				<input type="text" name="firstbranch" size="35" style="font-size: 8pt; font-family: Arial; color: #56443D; background-color:#DCD6C7">
			</td>

			<td valign="middle" align="left">
				<font color="#B9A49B" face="Arial" style="font-size: 8pt">
		        	<b>(for free)</b>
		        </font>
			</td>

 

but nothing happend, i just want to change the color or font of "for free" when the user enters something in the input field

thx

Place this JavaScript within the <head> of your HTML..

 

<script type="text/javascript">
function updateText(obj) {
    if (obj.value != '') {
        document.getElementById('updateText').style.color = '#00FF00';
    } else {
        document.getElementById('updateText').style.color = '__normal color here__';
    }
    return;
}
</script>

 

And part of your code with the changes made..

 

            <td valign="middle" align="left" style="width: 210px">
               <input type="text" name="firstbranch" size="35" style="font-size: 8pt; font-family: Arial; color: #56443D; background-color:#DCD6C7" onkeyup="updateText(this);">
            </td>
            
            <td valign="middle" align="left">
               <span id="updateText"><b>(for free)</b></span>
            </td>

 

It's a very basic function but you can build on it if or when you need to.

 

EDIT: Added "else" condition..

 

Adam

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.