[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 409
  • Last Modified:

Hovering over and setting form fields......

Hi all,
Ive attached a small file below.

Basically Im building a simple ratings system. There are five start on the page, they change when hovered over and when someone clicks it stores which star they clicked on in a form field.

But...  as soon as they are not hovering any more, the start go back to grey (which is to be expected). Is there anyway I can keep the state that the stars were in when clicked?

Hope that makes sense

Thanks
index.html
0
fox_statton
Asked:
fox_statton
  • 11
  • 10
1 Solution
 
leakim971PluritechnicianCommented:
Check this : http://jsfiddle.net/yY2dm/
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27868773.html</title>
<style type="text/css">
.star {
	width: 32px;
	height: 32px;
	display: inline-block;
	background:url(http://nawi01.daptiv.com/cognos8/samples/images/Graystar.png) no-repeat;
}
.star:hover, .star.active {
	background:url(http://nawi01.daptiv.com/cognos8/samples/images/Yellowstar.png) no-repeat;
}
</style>
<script type="text/javascript">
	function starf(dis) {
		document.getElementById("rating").value = dis.rel;
		var b = true;
		var stars = document.getElementById("stars").getElementsByTagName("a");
		for(var i=0;i<stars.length;i++) {
			f = dis!=stars[i];
			b = b&&f;
			var a = (b||!f)?" active":"";
			stars[i].className = stars[i].className.replace(/ active/gi, "") + a;
		}
	}
</script>
</head>
<body>
<div id="stars">
	<a href="javascript:void(0)" class="star" onclick="starf(this);" rel="star1"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this);" rel="star2"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this);" rel="star3"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this);" rel="star4"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this);" rel="star5"></a>
</div>
<form id="form1" name="form1" method="post" action="">
    <label>
	    <input type="text" name="rating" id="rating" />
    </label>
</form>
</body>
</html>

Open in new window

0
 
fox_stattonAuthor Commented:
Thats great, very close, but the difference is that the hover only seems to highlight one star at a time, but the original highlighted all the stars under the current one, so if you hovered on start 3, stars 1 and 2 were highlighted
0
 
leakim971PluritechnicianCommented:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27868773.html</title>
<style type="text/css">
.star {
	width: 32px;
	height: 32px;
	display: inline-block;
	background:url(http://nawi01.daptiv.com/cognos8/samples/images/Graystar.png) no-repeat;
}
.star:hover, .star.active, .star.hover {
	background:url(http://nawi01.daptiv.com/cognos8/samples/images/Yellowstar.png) no-repeat;
}
</style>
<script type="text/javascript">
	function starf(dis, c) {
		document.getElementById("rating").value = dis.rel;
		var b = true;
		var stars = document.getElementById("stars").getElementsByTagName("a");
		for(var i=0;i<stars.length;i++) {
			f = dis!=stars[i];
			b = b&&f;
			var a = (b||!f)?(" " + c):"";
			var r = new RegExp(" " + c, "gi");
			stars[i].className = stars[i].className.replace(r, "") + a;
		}
	}
</script>
</head>
<body>
<div id="stars">
	<a href="javascript:void(0)" class="star" onclick="starf(this, 'active');" onmouseover="starf(this, 'hover');" onmouseout="starf(this, 'star');" rel="star1"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active');" onmouseover="starf(this, 'hover');" onmouseout="starf(this, 'star');" rel="star2"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active');" onmouseover="starf(this, 'hover');" onmouseout="starf(this, 'star');" rel="star3"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active');" onmouseover="starf(this, 'hover');" onmouseout="starf(this, 'star');" rel="star4"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active');" onmouseover="starf(this, 'hover');" onmouseout="starf(this, 'star');" rel="star5"></a>
</div>
<form id="form1" name="form1" method="post" action="">
    <label>
	    <input type="text" name="rating" id="rating" />
    </label>
</form>
</body>
</html>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
fox_stattonAuthor Commented:
Hi all,
thanks for all this, I tried to modify this a bit, so that I could have half stars, but its showing strange behaviour, cant figure how why this would happen.. ideally there would be five stars, made of 10 images in order to allow the half star setting... cant think of any other way to do it
index2.html
star-left-gray.png
star-left-yellow.png
star-right-gray.png
star-right-yellow.png
0
 
fox_stattonAuthor Commented:
Thanks for those links, but most of those are ajax, i want to use this as part of an existing form, rather than have the rating value stored as soon as someone clicks
0
 
leakim971PluritechnicianCommented:
onyl the first one is ajax...
0
 
fox_stattonAuthor Commented:
Hi Leakim971,
 regarding the code you posted before, I modified it slightly, but there are some behaviours that are occuring which are a little strange.

The main one is that if you click on a star it sets it, but if you hover over other stars, especially lesser ones, it sets the textfield to that value, but it does not update the stars which are yellow.

So what you can end up with is five stars highlighted, but "star1" being in the textfield....
q.html
0
 
leakim971PluritechnicianCommented:
replace : document.getElementById(target).value = dis.rel;
by : if(c=="active") document.getElementById(target).value = dis.rel;
0
 
fox_stattonAuthor Commented:
Hi, thanks for that, but that leads to another behaviour....

if I click on the stars to set it to poor, but hover over star5, all the stars are illuminated and remain illuminated, however the form field still shows 3. Really, I dont want it to save the state of the stars until the user clicks, so if they mouseout without a click, the stars illuminated should only be the ones for the last click... not sure if that makes sense...
0
 
leakim971PluritechnicianCommented:
You old comment :

<<
the original highlighted all the stars under the current one, so if you hovered on start 3, stars 1 and 2 were highlighted
>>

You have a typo error in HTML of star3, check around rating

	function starf(dis, c,starset, target) {
		if(c=="active") {
			document.getElementById(target).value = dis.rel;

			var targetdesi = dis.rel;
			
			if (targetdesi=='star1') {
				document.getElementById('summary').innerHTML = "<b>Rating:</b> Bad";
			} else 	if (targetdesi=='star2') {
							document.getElementById('summary').innerHTML = "<b>Rating:</b> Poor";
				} else 	if (targetdesi=='star3') {
								document.getElementById('summary').innerHTML = "<b>Rating:</b> Average";
					} else 	if (targetdesi=='star4') {
									document.getElementById('summary').innerHTML = "<b>Rating:</b> Good";
						} else 	if (targetdesi=='star5') {
							
				document.getElementById('summary').innerHTML = "<b>Rating:</b> Excellent";
								
							}
		}
		
		var b = true;
		var stars = document.getElementById(starset).getElementsByTagName("a");
		for(var i=0;i<stars.length;i++) {
			f = dis!=stars[i];
			b = b&&f;
			var a = (b||!f)?(" " + c):"";
			var r = new RegExp(" " + c, "gi");
			stars[i].className = stars[i].className.replace(r, "") + a;
		}
	}

Open in new window

0
 
fox_stattonAuthor Commented:
Hi,
in the actual code youve included, or in the original code? I found a typo in star5, but nothing for star3
0
 
leakim971PluritechnicianCommented:
in the html, not the code
0
 
leakim971PluritechnicianCommented:
by: fox_stattonPosted on 2012-09-19 at 13:56:11ID: 38415587
http://filedb.experts-exchange.com/incoming/2012/09_w38/604083/q.html
0
 
fox_stattonAuthor Commented:
Ah, got it!

But still getting the same behaviour with the stars remaining highlighted
0
 
leakim971PluritechnicianCommented:
I don't have this problem on my side, could you post your page one more time?
0
 
fox_stattonAuthor Commented:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27868773.html</title>
	<link rel="stylesheet" href="demo.css" type="text/css" media="all" />  
<style type="text/css">
.star {
	width: 32px;
	height: 32px;
	display: inline-block;
	background:url(http://nawi01.daptiv.com/cognos8/samples/images/Graystar.png) no-repeat;
}
.star:hover, .star.active, .star.hover {
	background:url(http://nawi01.daptiv.com/cognos8/samples/images/Yellowstar.png) no-repeat;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
</style>
<script type="text/javascript">
	function starf(dis, c,starset, target) {
		
if(c=="active") {
document.getElementById(target).value = dis.rel; 
}
		var targetdesi = dis.rel;
		
		if (targetdesi=='star1') {
		document.getElementById('summary').innerHTML = "<b>Rating:</b> Bad";
		} else 	if (targetdesi=='star2') {
		document.getElementById('summary').innerHTML = "<b>Rating:</b> Poor";
		} else 	if (targetdesi=='star3') {
		document.getElementById('summary').innerHTML = "<b>Rating:</b> Average";
		} else 	if (targetdesi=='star4') {
		document.getElementById('summary').innerHTML = "<b>Rating:</b> Good";
		} else 	if (targetdesi=='star5') {	
		document.getElementById('summary').innerHTML = "<b>Rating:</b> Excellent";
		}
		
		var b = true;
		var stars = document.getElementById(starset).getElementsByTagName("a");
		for(var i=0;i<stars.length;i++) {
			f = dis!=stars[i];
			b = b&&f;
			var a = (b||!f)?(" " + c):"";
			var r = new RegExp(" " + c, "gi");
			stars[i].className = stars[i].className.replace(r, "") + a;
		}
	}
	
	



function desc_reset() {




var targetdesi = document.getElementById('rating').value;
		
if (targetdesi=='star1') {
document.getElementById('summary').innerHTML = "<b>Rating:</b> Bad";
} else 	if (targetdesi=='star2') {
document.getElementById('summary').innerHTML = "<b>Rating:</b> Poor";
} else 	if (targetdesi=='star3') {
document.getElementById('summary').innerHTML = "<b>Rating:</b> Average";
} else 	if (targetdesi=='star4') {
document.getElementById('summary').innerHTML = "<b>Rating:</b> Good";
} else 	if (targetdesi=='star5') {
document.getElementById('summary').innerHTML = "<b>Rating:</b> Excellent";
}


}
	
</script>
</head>
<body>
<div id="summary">
<b>Rating: </b>
</div>
<div id="stars">
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active', 'stars', 'rating');" onmouseover="starf(this, 'hover', 'stars', 'rating');" onmouseout="starf(this, 'star', 'stars', 'rating');desc_reset();" rel="star1"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active', 'stars', 'rating');" onmouseover="starf(this, 'hover', 'stars', 'rating');" onmouseout="starf(this, 'star', 'stars', 'rating');desc_reset();" rel="star2"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active', 'stars', 'rating');" onmouseover="starf(this, 'hover', 'stars', 'rating');" onmouseout="starf(this, 'star', 'stars', 'rating');desc_reset();" rel="star3"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active', 'stars', 'rating');" onmouseover="starf(this, 'hover', 'stars', 'rating');" onmouseout="starf(this, 'star', 'stars', 'rating');desc_reset();" rel="star4"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active', 'stars', 'rating');" onmouseover="starf(this, 'hover', 'stars', 'rating');" onmouseout="starf(this, 'star', 'stars', 'rating');desc_reset();" rel="star5"></a>
</div>






<form id="form1" name="form1" method="post" action="">
  <p class="sum">
    <label>
      <strong><br />
      Summary</strong><br />
      <input name="summary_data" type="text" id="summary_data" size="85" />
    </label>
  </p>
  </br>
  <p><strong>Tell us about your experience with </strong></p>
  <p class="details">
    <label>
      <textarea name="review_data" cols="60" rows="8" id="review_data"></textarea>
    </label>
  </p></br>
  
  <p><strong>Is there anything  could have done better?</strong></p>
  <p class="improve">
    <textarea name="improve_data" cols="60" rows="4" id="improve_data"></textarea>
  </p>
  </br>
  <p>
    <label>
      <input type="textfield" name="rating" id="rating" />
            <input type="hidden" name="cid" id="cid" value="" />
                  <input type="hidden" name="orderid" id="orderid" value="" />
				                    <input type="hidden" name="companyname" id="companyname" value="" />
    </label>
  </p>
  </br>



  <p>
    </br>
      </br>
    <label>
      <input type="submit" name="Submit" id="Submit" value="Submit" />
    </label>
  </p>
</form>
</body>
</html>	

Open in new window

0
 
leakim971PluritechnicianCommented:
run fine for me : http://jsfiddle.net/YSCkH/
not for you?
0
 
fox_stattonAuthor Commented:
Nope, doesnt work there either. Im using chrome.

So basically this is what happens.

Hover over a few stars, works fine, then click on star 3, three stars become hightighted, all good so far.... then hover on star 5.... then mouse out... all five stars remain highlighted... really it should have reverted to just 3 stars highlighted.
0
 
leakim971PluritechnicianCommented:
I see, check this :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27868773.html</title>
	<link rel="stylesheet" href="demo.css" type="text/css" media="all" />  
<style type="text/css">
.star {
	width: 32px;
	height: 32px;
	display: inline-block;
	background:url(http://nawi01.daptiv.com/cognos8/samples/images/Graystar.png) no-repeat;
}
.star:hover, .star.active, .star.hover {
	background:url(http://nawi01.daptiv.com/cognos8/samples/images/Yellowstar.png) no-repeat;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
</style>
<script type="text/javascript">
	function starf(dis, c,starset, target) {
		
if(c=="active") {
document.getElementById(target).value = dis.rel; 
}
		var targetdesi = dis.rel;
		
		if (targetdesi=='star1') {
		document.getElementById('summary').innerHTML = "<b>Rating:</b> Bad";
		} else 	if (targetdesi=='star2') {
		document.getElementById('summary').innerHTML = "<b>Rating:</b> Poor";
		} else 	if (targetdesi=='star3') {
		document.getElementById('summary').innerHTML = "<b>Rating:</b> Average";
		} else 	if (targetdesi=='star4') {
		document.getElementById('summary').innerHTML = "<b>Rating:</b> Good";
		} else 	if (targetdesi=='star5') {	
		document.getElementById('summary').innerHTML = "<b>Rating:</b> Excellent";
		}
		
		var b = true;
		var stars = document.getElementById(starset).getElementsByTagName("a");
		for(var i=0;i<stars.length;i++) {
			f = dis!=stars[i];
			b = b&&f;
			var a = (b||!f)?(" " + c):"";
			var r = new RegExp(" " + c, "gi");
			stars[i].className = stars[i].className.replace(r, "") + a;
		}
	}
	
	



function desc_reset() {


		var stars = document.getElementById("stars").getElementsByTagName("a");
		for(var i=0;i<stars.length;i++) {
			stars[i].className = stars[i].className.replace(/hover/gi, "");
		}


var targetdesi = document.getElementById('rating').value;
		
if (targetdesi=='star1') {
document.getElementById('summary').innerHTML = "<b>Rating:</b> Bad";
} else 	if (targetdesi=='star2') {
document.getElementById('summary').innerHTML = "<b>Rating:</b> Poor";
} else 	if (targetdesi=='star3') {
document.getElementById('summary').innerHTML = "<b>Rating:</b> Average";
} else 	if (targetdesi=='star4') {
document.getElementById('summary').innerHTML = "<b>Rating:</b> Good";
} else 	if (targetdesi=='star5') {
document.getElementById('summary').innerHTML = "<b>Rating:</b> Excellent";
}


}
	
</script>
</head>
<body>
<div id="summary">
<b>Rating: </b>
</div>
<div id="stars" onmouseout="desc_reset();">
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active', 'stars', 'rating');" onmouseover="starf(this, 'hover', 'stars', 'rating');" rel="star1"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active', 'stars', 'rating');" onmouseover="starf(this, 'hover', 'stars', 'rating');" rel="star2"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active', 'stars', 'rating');" onmouseover="starf(this, 'hover', 'stars', 'rating');" rel="star3"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active', 'stars', 'rating');" onmouseover="starf(this, 'hover', 'stars', 'rating');" rel="star4"></a>
    <a href="javascript:void(0)" class="star" onclick="starf(this, 'active', 'stars', 'rating');" onmouseover="starf(this, 'hover', 'stars', 'rating');" rel="star5"></a>
</div>






<form id="form1" name="form1" method="post" action="">
  <p class="sum">
    <label>
      <strong><br />
      Summary</strong><br />
      <input name="summary_data" type="text" id="summary_data" size="85" />
    </label>
  </p>
  </br>
  <p><strong>Tell us about your experience with </strong></p>
  <p class="details">
    <label>
      <textarea name="review_data" cols="60" rows="8" id="review_data"></textarea>
    </label>
  </p></br>
  
  <p><strong>Is there anything  could have done better?</strong></p>
  <p class="improve">
    <textarea name="improve_data" cols="60" rows="4" id="improve_data"></textarea>
  </p>
  </br>
  <p>
    <label>
      <input type="textfield" name="rating" id="rating" />
            <input type="hidden" name="cid" id="cid" value="" />
                  <input type="hidden" name="orderid" id="orderid" value="" />
				                    <input type="hidden" name="companyname" id="companyname" value="" />
    </label>
  </p>
  </br>



  <p>
    </br>
      </br>
    <label>
      <input type="submit" name="Submit" id="Submit" value="Submit" />
    </label>
  </p>
</form>
</body>
</html>	

Open in new window

0
 
fox_stattonAuthor Commented:
Brilliant, thank you!
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 11
  • 10
Tackle projects and never again get stuck behind a technical roadblock.
Join Now