Javascript onselect to change bk color in div

Hello,

I have a form, I'd liek when the users cursor is in an input field the background color to change on the span I have enclosing the input field, any ideas how to do this?

Tahnk you
vrmetroAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title></title>
<script type="text/javascript">
function setColor(obj,color)
{
	obj.style.backgroundColor='#00ff00';
}
</script>
</head>
<body>
<form>
	<span style='padding:1px;'>Name: <input type="text" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');"/></span>
</form>
</body>
</html>

Open in new window

vrmetroAuthor Commented:
Close!

Attached is a SS, works partially, the bk color does not go away when you leave the input.  

Also included my code, there are breaks of white space between elements, the first span class "oneField" if that was specified to be a color there is still white space, so i could wrap in a div and that would get rid of the white space, but how to make the setColor work?  Any other thoughts?

Thanks so much!!!!
<span class="oneField" >
                <label for="MSISDN" class="preField">MSISDN:</label>
         		<input type="text" id="MSISDN" value="<?php echo $MSISDN; ?>" name="MSISDN" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');">
         	 <span class="reqMark">*</span>        	</span><br />

Open in new window

ss.jpg
black0psCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function setColor(obj,color)
{
        obj.style.backgroundColor=color;
}
</script>
</head>
<body>
<form>
        <span style='padding:1px;'>Name: <input type="text" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');"/></span>
</form>
</body>
</html>
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

hieloCommented:
>>the bk color does not go away
Oops. I forgot to change:

obj.style.backgroundColor='#00ff00';

to:
obj.style.backgroundColor=color;

I was initially doing this as inline code but then moved it to a function so you can reuse it.

>>Also included my code, there are breaks of white space between elements
I was unable to reproduce that.
vrmetroAuthor Commented:
I can't figure it out either.  Works ok in IE8, FF, but not IE7.  Even copied all the style sheets into a test HTML with just that code and couldnt reproduce the white space on this page.

Checked with IE Developer, it appears the display: inline-block; under label.preField class is causing the problem, but when included on my test page the same problem did not exist.

this is the page, the first field, MSISDN will show the problem, if u can figure out... ur a god among men..lol
 
http://92.65.62.41:9021/sign-up-wizard/device.php

Thanks!
hieloCommented:
try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><base href="http://92.65.62.41:9021/sign-up-wizard/device.php"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FindWhere Mobile Activation</title>
<noscript>
           <meta http-equiv="refresh" content="0; url=javascript_disabled.html" >
</noscript>
<link rel="stylesheet" href="../templates/FW153/css/jbcontent.css" type="text/css" />
<link rel="stylesheet" href="css/form.css" type="text/css" />
<link rel="stylesheet" href="css/wforms.css" type="text/css" />
<!-- <link rel="stylesheet" href="css/hints.css" type="text/css" /> -->
<script type="text/javascript" src="../templates/FW153/lib/js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pstrength-min.1.2.js"></script>
<script type="text/javascript" src="../templates/FW153/lib/js/mouseovers.js"></script>
 
<script type="text/javascript">
$(function() {
$('.password').pstrength();
});
</script>
<script type="text/javascript">
function setOption(elid, def) {
	element = document.getElementById(elid);
	if (element) {
		for (i = 0; i < element.options.length; i++) {
			element.options[i].selected = false;
			if (element.options[i].value == def) {
				element.options[i].selected = true;
			} else {}
		}
	} else {}
}
 
function ChangeDropdowns(value){
if(value=="UK"){
document.getElementById('vat').style.display='block';
}else if(value=="DE"){
document.getElementById('vat').style.display='block';
}else if(value=="FR"){
document.getElementById('vat').style.display='block';
}else if(value=="NL"){
document.getElementById('vat').style.display='block';
}else if(value=="AU"){
document.getElementById('vat').style.display='block';
}else if(value=="MX"){
document.getElementById('vat').style.display='block';
}else if(value=="BR"){
document.getElementById('vat').style.display='block';
}else if(value=="US"){
document.getElementById('vat').style.display='none';
}else if(value=="OT"){
document.getElementById('vat').style.display='block';
//document.getElementById('palert').style.display='block';
}
}
function setColor(obj,color)
{
	obj.style.backgroundColor=color;
}
 
</script>
 
 
</head>
<!-- // onLoad messes with hint function //-->
<body onLoad="window.parent.scrollTo(0,0)">
 
<div id="form_wrap">
 
 <!-- Begin top bar -->
<div class="navigation">
 <ul class="navigation">
  <li><a href="index.php"><img src="images/nav_signup_title.gif" width="181" height="76" alt="FindWhere Signup" /></a></li><li><img src="images/nav_signup_1_on.gif" width="215" height="76" alt="" /></li><li><img src="images/nav_signup_2_off.gif" width="159" height="76" alt="" /></li><li><img src="images/nav_signup_3_off.gif" width="213" height="76" alt="" /></li><li><img src="images/nav_signup_device_4_off.gif" width="125" height="76" alt="" /></li><li><img src="images/nav_signup_rightside.gif" width="12" height="76" alt="" /></li></ul><img height="48" width="905" border="0" alt="" src="../templates/FW153/images/sub_bar_business.jpg" /><br />
 
</div>
<!-- end top bar -->
 
 <!-- Begin Content Area -->
 <div id="form_content">
  <div class="inside">
   <div class="inside_left">
   		        
     	<form id="mailform" method="post" action="device-plan.php">
        	 <div  class="oneField">
         		<label for="country" class="preField">Country:</label>
 
                <select id="country" name="country" class="required" value="" onchange="ChangeDropdowns(this.value);" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');">
   					<option value="">Select Your Country</option>
					<option value="AU">Australia</option><option value="BR">Brazil</option><option value="DE">Deutschland</option><option value="FR">France</option><option value="MX">Mexico</option><option value="NL">Netherlands</option><option value="UK">United Kingdom</option><option value="US">United States</option>                    
					<!--<option value="US">United States</option>
                    <option value="UK">United Kingdom</option>
                    <option value="DE">Deutschland</option>
                    <option value="FR">France</option>
                    <option value="NL">Nederland</option>
                    <option value="BR">Brazil</option>
                    <option value="MX">Mexico</option>
                    <option value="AU">Australia</option>-->
                    <option value="OT">Other Countries</option>
 
                    </select>
                    <script type="text/javascript">
						setOption("country", "");
					</script>
         	 <span class="reqMark">*</span></div>
            <div class="oneField">
		  	<label for="MSISDN" class="preField">MSISDN:</label>
			<input type="text" id="MSISDN" value="" name="MSISDN" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" /><span class="reqMark">*</span></div>
 
            <div class="oneField">
                <label for="vMSISDN" class="preField">Verify MSISDN:</label>
         		<input type="text" id="vMSISDN" value="" name="vMSISDN" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');"/><span class="reqMark">*</span></div>
 
		<div class="oneField">
                <label for="FirstName" class="preField">First Name:</label>
         		<input type="text" id="FirstName" value="" name="FirstName" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" ><span class="reqMark">*</span></div>
 
          <div class="oneField">
         		<label for="LastName" class="preField">Last Name:</label>
         		<input type="text" id="LastName" value="" name="LastName" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" >
         	 <span class="reqMark">*</span></div>
 
          <div class="oneField">
         		<label for="M_COMP" class="preField">Company Name:</label>
         		<input type="text" id="M_COMP" value="" name="M_COMP" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" />
         	</div>
            <div id="vat" style="display:none;">
            <span class="oneField">
         		<label for="MC_vatnr" class="preField">VAT Tax Id:</label>
         		<input type="text" id="MC_vatnr" value="" name="MC_vatnr" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" />
         	</span><br /></div>
 
          <div class="oneField">
         		<label for="StreetShipAddress1" class="preField">Street Address:</label>
         		<input type="text" id="StreetShipAddress1" value="" name="StreetShipAddress1" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" />
         	 <span class="reqMark">*</span></div>
		 
          <div class="oneField">
         		<label for="CityShip" class="preField">City:</label>
         		<input type="text" id="CityShip" value="" name="CityShip" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" />
         	 <span class="reqMark">*</span></div>
 
           <div class="oneField">
         		<label for="postcode" class="preField">Postal Code:</label>
         		<input type="text" id="postcode" value="" name="postcode" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" />
         	 <span class="reqMark">*</span></div>
 
        	<div class="oneField">
 
         		<label for="email" class="preField">Email:</label>
         		<input type="text" id="email" value="" name="email" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" >
         	  <span class="reqMark">*</span></div>
 
         	<div class="oneField">
         		<label for="vemail" class="preField">Verify Email:</label>
         		<input type="text" id="vemail" value="" name="vemail" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" >
         			<span class="reqMark">*</span></div>
 
          <div class="oneField">
         		<label for="password" class="preField">Select Password:</label>
         		<input type="password" id="password" value="" name="password" class="password" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" />
         			        	</div>
 
          <div class="oneField">
         		<label for="vpassword" class="preField">Verify Password:</label>
         		<input type="password" id="vpassword" value="" name="vpassword" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" />
         			<span class="reqMark">*</span></div>
 
                    <!--<div id="palert" style="display:none;"><br/><br/>
                    <p class="phone_alert">Please add 00 and your country code before your mobile number.<br />
                    For example, a phone number from The Netherlands might look like this: 0031612345678 and a phone number from the US might be something like 0017031234567.</p></div>-->
 
          <div class="oneField">
         		<label for="cartId" class="preField">Enter Mobile #:</label>
         		<input type="text" id="cartId" value="" name="cartId" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" />
         			<span class="reqMark">*</span></div>
                    
          <div class="oneField">
         		<label for="vcartId" class="preField">Verify Mobile #:</label>
 
         		<input type="text" id="vcartId" value="" name="vcartId" class="required" onfocus="setColor(this.parentNode, '#00ff00');" onblur="setColor(this.parentNode, '#ffffff');" />
         			<span class="reqMark">*</span></div>
 
            <div><input type="submit" value="Continue" /></div>
        </form>
   </div>
   <div class="inside_right">
     <div class="right_pg1">
 
                 <div id="jbcontent">
<!-- Begin wrap -->          
          <div class="en"><div class="bl"><div class="tl"><div class="tr"> 
			<span class="table_header">Step 1 - Personal Information</span><br /><img border="0" src="../spacer.gif" height="10px" width="1px" /><br />
            <span class="body"><img alt="Mobile Phone" align="right" border="0" src="../templates/FW153/images/phone_w_target.jpg" /> Please complete the form on the left, this is nessessary to setup your account in the findwhere panel.
                        <img height="10" alt="" width="200" border="0" src="../templates/FW153/images/line.gif" /><br />
                        We're dedicated to providing the very best service and support, if you encounter any unexpected errors please contact our <a href="../index.php?option=com_wrapper&view=wrapper&Itemid=96" style="text-decoration:underline; font-size:14px;" target="_top">support</a> department.<br/>
                        </span><br />
 
            </div></div></div></div>             
			<div class="clear">&nbsp;</div> <!-- end wrap -->
          </div> <!-- end jbcontent div -->
     </div>
   </div>
  </div> 
  <div id="clearall">
&nbsp;  </div>
 </div>
 
<!-- End content area -->
 
</div>	
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3947047-3");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
vrmetroAuthor Commented:
Awesome thank you!!!!
hieloCommented:
you are welcome
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.