• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1171
  • Last Modified:

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
0
vrmetro
Asked:
vrmetro
  • 4
  • 3
1 Solution
 
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

0
 
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
0
 
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>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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.
0
 
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!
0
 
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

0
 
vrmetroAuthor Commented:
Awesome thank you!!!!
0
 
hieloCommented:
you are welcome
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now