Highlight Form Elements - JavaScript Made Easy

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Highlight Form Elements		[View Sample]

This JavaScript hightlights the field of the form where mouse cursor is located.


Insert into <HEAD>
<script type="text/javascript"> var highlightcolor="FFFFD8" var ns6 = document.getElementById && !document.all var previous='' var eventobj //Regular expression to highlight only form elements var intended=/INPUT\|TEXTAREA\|SELECT\|OPTION/ //Function to check whether element clicked is form element function checkel(which) { if ( which.style && intended.test(which.tagName) ) { if (ns6 && eventobj.nodeType == 3) eventobj = eventobj.parentNode.parentNode return true } else return false } //Function to highlight form element function highlight(e) { eventobj = ns6 ? e.target : event.srcElement if (previous != '') { if (checkel(previous)) previous.style.backgroundColor='' previous = eventobj if (checkel(eventobj)) eventobj.style.backgroundColor=highlightcolor } else { if (checkel(eventobj)) eventobj.style.backgroundColor=highlightcolor previous = eventobj } } </script>

Insert into <BODY>
<form action="#" onclick="highlight(event)"> <table border="0" cellspacing="2" cellpadding="2" align="center"> <tr> <td width="15%">Text 1: </td> <td> <input type="text" size="40" maxlength="40"> </td> </tr> <tr> <td class="maintext">Text 2: </td> <td> <input type="text" size="40" maxlength="40"> </td> </tr> <tr> <td align="left" valign="top">Text 3:</td> <td> <textarea cols="40" rows="7"></textarea> </td> </tr> <tr> <td>List:</td> <td> <select name="select" size="1"> <option>Example List Item 1</option> <option>Example List Item 2</option> <option>Example List Item 3</option> <option>Example List Item 4</option> </select> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" name="Submit" value="Submit"> </td> </tr> </table> </form>

Other Options