Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change the color of a label's text dynamically 1

Status
Not open for further replies.

TheInsider

Programmer
Jul 17, 2000
796
CA
Hi,
I'm new to client-side scripting with Javascript, so please forgive me for asking such a simple question. I have searched this forum but I can't seem to find the answer. What I have is a user registration form. Here users enter data such as their first name, last name, etc. and then click submit. I have the form structured with a table to make the layout look nice. The label text goes in the left column, the text box in the right. When the user clicks the submit button, I will check to see if the text boxes are filled in, and if the value of any fields are missing, I will change the color of the text in the corresponding label to red. I know that I can wrap the label text in <p></p> tags and set the onfocus=&quot;this.style.color = 'red'&quot; -- this works. However, how do I change the color in an event that doesn't belong to this tag -- i.e. the submit button's onclick event? Hopefully NN and EI compatible... which brings me to my final question: I am planning on using client-side script with DHTML to display on the screen when a user doen't fill in a required text field. I am using client-side script, as opposed to server-side script, to cut down on server load. Would it be better to validate this with ASP, and return a page with the highlighted text if necessary?
Thanks, Rob Marriott
rob@career-connections.net
 
Not sure if this is what you wanted. This will only work in IE, the code needs to be changed to make it cross brower.

<HTML>
<HEAD>
<META NAME=&quot;GENERATOR&quot; Content=&quot;Microsoft Visual Studio 6.0&quot;>
<TITLE></TITLE>
<script language=&quot;javascript&quot;>
<!--
function checkIt(layerName)
{
if(document.frmTest.text1.value == &quot;&quot;)
{
document.all(layerName).style.color = &quot;red&quot;;
alert('Items marked in red need to be filled in.');
}
}
//-->
</script>
</HEAD>
<BODY>

<Form name=&quot;frmTest&quot; Method=&quot;Post&quot;>
<div id=&quot;layer1&quot;>Name</div>
<INPUT type=&quot;text&quot; id=text1 name=text1>
<br>
<div id=&quot;layer2&quot;>Address</div>
<INPUT type=&quot;text&quot; id=text2 name=text2>
<br>
<INPUT type=&quot;button&quot; value=&quot;Submit&quot; id=button1 name=button1 onClick=&quot;checkIt('layer1');&quot;>
</Form>

</BODY>
</HTML>
 
Yes, That is exactly what I needed! Thanks. Is it the usage of the <div> tag and all() method that make it incompatible with Netscape? Rob Marriott
rob@career-connections.net
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top