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. Link to comment https://forums.phpfreaks.com/topic/92899-solved-changing-text-colors-with-javascript/ 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> Link to comment https://forums.phpfreaks.com/topic/92899-solved-changing-text-colors-with-javascript/#findComment-475911 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"; Link to comment https://forums.phpfreaks.com/topic/92899-solved-changing-text-colors-with-javascript/#findComment-477242 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? Link to comment https://forums.phpfreaks.com/topic/92899-solved-changing-text-colors-with-javascript/#findComment-478047 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' Link to comment https://forums.phpfreaks.com/topic/92899-solved-changing-text-colors-with-javascript/#findComment-478271 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. Link to comment https://forums.phpfreaks.com/topic/92899-solved-changing-text-colors-with-javascript/#findComment-478746 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.