blackcell Posted February 25, 2008 Share Posted February 25, 2008 Hello, I want to change the font color in one td when a particular character is found in a text input. Any help? Mainly I need to know how to do this to one particular group of text. Really I want to have the text description above my textbox for email input to be red. When the user enters at @ and .com it becomes green. Quote Link to comment Share on other sites More sharing options...
blackcell Posted February 25, 2008 Author Share Posted February 25, 2008 This is what I have: <html> <head> //In the head of my document <script language="JavaScript"> function CheckforEmail(){ alert("IN THE FUNCTION"); if(inputBox.indexOf("@") > -1 && inputBox.indexOf(".") > -1){ alert("FOUND"); document.email.color="#669933"; }else{ alert("NOTFOUND"); document.email.color="#FF0000"; } setTimeout('CheckforEmail()',2000); } </script> </head> <body bgcolor="#FFFFFF" style="font-family: arial; font-size: 14px;" onload="startTime()"> <table align='center' width='100%' border='0'> <tr bgcolor='#AAAAAA'> <td width='40%' align='center' ><font id='email' color='#FF0000'><b>Your Email<br></font><small>(Required)</small></b></td> <td width='20%' align='center' ><b>Division</b></td> <td width='20%' align='center' ><b>Department</b></td> <td width='10%' align='center' ><b>Score</b></td> <td width='10%' align='center' > </td> </tr> <tr bgcolor='#EEEEEE'> <td width='40%' align='center' ><input type='text' id='inputBox' name='applicantAlert_email' size='30' value='$applicantAlert_email'></td> <td width='20%' align='center' > <select name='applicantAlert_division'> <option value ='null'> </option> <option value ='$selectDiv1'>$selectDiv1</option> <option value ='$selectDiv2'>$selectDiv2</option> </select> </td> </tr> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
mainewoods Posted February 26, 2008 Share Posted February 26, 2008 you want to give the control you want to change an id, and then use code like this: document.getElementById('theID').style.color="#669933"; Quote Link to comment Share on other sites More sharing options...
blackcell Posted February 27, 2008 Author Share Posted February 27, 2008 So this goes in my function? Does this get the contents of the object with the id of theID? Quote Link to comment Share on other sites More sharing options...
mainewoods Posted February 27, 2008 Share Posted February 27, 2008 you use my code above instead of your code: document.email.color="#669933"; since you defined your email field like this: <input type='text' id='inputBox' name='applicantAlert_email' size='30' value='$applicantAlert_email'> you would use this code to change the color of that control: document.getElementById('inputBox').style.color="#669933"; notice I used your control's id, 'inputbox' Quote Link to comment Share on other sites More sharing options...
blackcell Posted February 28, 2008 Author Share Posted February 28, 2008 Im sorry, I am new to js and used to php server scripting, please don't get mad lol. I use: <html> <head> //In the head of my document <script language="JavaScript"> function CheckforEmail(){ alert("IN THE FUNCTION"); if(inputBox.indexOf("@") > -1 && inputBox.indexOf(".") > -1){ document.getElementById('inputBox').style.color="#669933"; }else{ document.getElementById('inputBox').style.color="red"; } setTimeout('CheckforEmail()',2000); } </script> </head> <body bgcolor="#FFFFFF" style="font-family: arial; font-size: 14px;" onload="CheckforEmail()"> <table align='center' width='100%' border='0'> <tr bgcolor='#AAAAAA'> <td width='40%' align='center' ><font id='email' color='#FF0000'><b>Your Email<br></font><small>(Required)</small></b></td> <td width='20%' align='center' ><b>Division</b></td> <td width='20%' align='center' ><b>Department</b></td> <td width='10%' align='center' ><b>Score</b></td> <td width='10%' align='center' > </td> </tr> <tr bgcolor='#EEEEEE'> <td width='40%' align='center' ><input type='text' id='inputBox' name='applicantAlert_email' size='30' value='$applicantAlert_email'></td> <td width='20%' align='center' > <select name='applicantAlert_division'> <option value ='null'> </option> <option value ='$selectDiv1'>$selectDiv1</option> <option value ='$selectDiv2'>$selectDiv2</option> </select> </td> </tr> </table> </body> </html> Do you have any suggestions on the whole OOP concantinating of document.id.style.print.so on stuff? It all seems confusing and I can't figure out what the dots seperate and how to structure this stuff. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.