View Full Version : Form Highlight Help


tarq
06-13-2003, 05:57 PM
Something has gone seriously wrong with this code. Its supposed to light up orange when you click inside the text box. Can anyone point out where I've gone wrong?

<head>


<font face="tahoma" size="3">

</head>
<script language="JavaScript1.2">

//Highlight form element- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

var highlightcolor="orange"

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>
<h3 align="left">edit info</h3>

<form action="http://pub19.bravenet.com/emailfwd/senddata.php"
method="post" enctype="multipart/form-data">

<input type="hidden"
name="subject" value="Edit Member Info"><input
type="hidden" name="thankyou"
value="edit_thanks.html"><p
align="left"><a name="join"><input type="text" size="35"
name="joinedwithname" value="The name you joined with?" onfocus="activatefield(this);" onblur="deactivatefield(this)"><br>
<input type="text" size="35" name="email" value="E-mail?" onfocus="activatefield(this);" onblur="deactivatefield(this)"> <br>
<input type="text" size="35" name="URL" value="URL?" onfocus="activatefield(this);" onblur="deactivatefield(this)"> <br>
<input type="text" size="35" name="country" value="Country?" onfocus="activatefield(this);" onblur="deactivatefield(this)"> </a><br>
<textarea name="Changes" rows="2" cols="35" onfocus="activatefield(this);" onblur="deactivatefield(this)">What should be changed?</textarea><br>
<br>
<input type="submit" name="Edit info" value="Edit info" onfocus="activatefield(this);" onblur="deactivatefield(this)"> <input
type="reset" value="Clear" onfocus="activatefield(this);" onblur="deactivatefield(this)"></p>
</form>

Thanks for any replies.

Anzrew
06-13-2003, 10:08 PM
I think i have found out why it didnt work, but i got it to work so here it is, there is a little gap in it but im sure you can fix it.

Your forgot to add this in after the texbox and text areas. (Step 2)
<FORM onKeyUp="highlight(event)" onClick="highlight(event)"></FORM>

<head>


<font face="tahoma" size="3">

<script language="JavaScript1.2">

//Highlight form element- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

var highlightcolor="orange"

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>
</head>
<h3 align="left">Edit info</h3>

<form action="http://pub19.bravenet.com/emailfwd/senddata.php"method="post" enctype="multipart/form-data">
<input type="hidden"name="subject" value="Edit Member Info">
<input type="hidden" name="thankyou" value="edit_thanks.html">
<p align="left">
<a name="join">
<input type="text" size="35" name="joinedwithname" value="The name you joined with?" onfocus="activatefield(this);" onblur="deactivatefield(this)" FORM onKeyUp="highlight(event)" onClick="highlight(event)"></FORM><br>
<input type="text" size="35" name="email" value="E-mail?" onfocus="activatefield(this);" onblur="deactivatefield(this)" FORM onKeyUp="highlight(event)" onClick="highlight(event)"></FORM><br>
<input type="text" size="35" name="URL" value="URL?" onfocus="activatefield(this);" onblur="deactivatefield(this)"FORM onKeyUp="highlight(event)" onClick="highlight(event)"></FORM><br>
<input type="text" size="35" name="country" value="Country?" onfocus="activatefield(this);" onblur="deactivatefield(this)" FORM onKeyUp="highlight(event)" onClick="highlight(event)"></FORM></a><br>
<textarea name="Changes" rows="2" cols="35" onfocus="activatefield(this);" onblur="deactivatefield(this)"FORM onKeyUp="highlight(event)" onClick="highlight(event)">What should be changed?</textarea></FORM><br>
<br>
<input type="submit" name="Edit info" value="Edit info" onfocus="activatefield(this);" onblur="deactivatefield(this)"> <input type="reset" value="Clear" onfocus="activatefield(this);" onblur="deactivatefield(this)"></p>
</form>