Hello,
I'm trying to combine two javascript functions to occur on the same onfocus form field event. My code is below. I have one script which highlights the current form field div, and another script, coded in the div itself, which is supposed to make some text visible when the form field is also clicked on. If I remove one function, the other will work. But if both functions are in the code, only the highlight function works. Any idea how I can combine the two?
Many thanks!
Josh
------------------------------
I'm trying to combine two javascript functions to occur on the same onfocus form field event. My code is below. I have one script which highlights the current form field div, and another script, coded in the div itself, which is supposed to make some text visible when the form field is also clicked on. If I remove one function, the other will work. But if both functions are in the code, only the highlight function works. Any idea how I can combine the two?
Many thanks!
Josh
------------------------------
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-language" content="en" />
<title>User Registration</title>
<style>
html, body {
color: #000;
background-color: #fff;
font-size:15px;
}
form div.active {
background-color: #98FB98;
border: 0px solid #8a8;
}
#user_registration
{
border:1px solid #6495ED;
margin:auto auto;
margin-top:100px;
width:500px;
background-color: #ECF1EF;
}
</style>
<script type="text/javascript"><!--
function hasClassName(el,c){
c=c.replace(/\-/g,'\\-');
return (new RegExp('(^|\\s)'+c+'(\\s|$)')).test(el.className);
}
function addClassName(el,c){
if(hasClassName(el,c)) return;
var curClass=el.className||'';
el.className=curClass+((curClass.length>0)?' ':'')+c;
}
function removeClassName(el,c){
var re=new RegExp('\\s*'+c.replace(/\-/g,'\\-')+'\\s*');
el.className=el.className.replace(re,' ').replace(/^\s*|\s*$/g,'');
}
function highlightElm(el,light){
if(!el) return;
if(light) addClassName(el,'active');
else removeClassName(el,'active');
}
window.onload = function(){
document.getElementById('field1').onfocus=function (){
highlightElm(this.parentNode,true);
}
document.getElementById('field1').onblur=function( ){
highlightElm(this.parentNode,false);
}
}
// -->
</script>
</head>
<body>
<form method="post" action="" id="user_registration" name="user_registration">
<div id="username">
Username
<p></p>
<input type="text" id="field1" name="field1" onblur="document.getElementById('usernote').style.display = 'none'" onfocus="document.getElementById('usernote').style.display = 'block';" size="20" tabindex="1">
<div id="usernote" style="display:none;">
Your username can only contain letters (A-Z) or numbers (0-9)
</div>
</div>
</form>
</body>
</html>
Comment