help with a star rating script?

geetar251 · 05-11-2007, 04:15 AM

hello all...
I'm trying to get this star rating script to work. I've been battling with it for a while and can use some help...anyone up for the challenge? I have two rating bars and I can't figure out why it won't keep it's value after you click and roll off. Here's my whole page (note I haven't finished setting up the functions to work for the 2nd rating bar). Thanks!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 <style type="text/css">
#rate ul{
margin:0;
padding:0;
height:20px;
}
#rate ul li {
display:inline;
height:20px;
width:20px;
 }
</style>
  <script language='javascript'>
 rate_f = "";  
 rate_b = "";  
 rate_o = "";  
 rate_a = "";  
 rate_ar = ""; 

// on form submit we check form and build the variables to send to our php script
function rate_rest(){
  //nothing yet
}

// when user clicks a star we set the star variable
function rateclick(x){
  document.getElementById(x).src='images/star_hover.gif';
  x2 = x.substring(1);
  x3 = x.substring(0);
  rate_f = x2;
  rateover(x2, x3);
}
// onmouseover event .. kill all stars if rated and update the source on the rest of the stars
function rateover(x,which){
  killem(which);
  switch(which){
	case 'f':
	  switch(x){
		case 5:
		  document.getElementById('f5').src='images/star_hover.gif';
		case 4:
		  document.getElementById('f4').src='images/star_hover.gif';
		case 3:
		  document.getElementById('f3').src='images/star_hover.gif';
		case 2:
		  document.getElementById('f2').src='images/star_hover.gif';
		case 1:
		  document.getElementById('f1').src='images/star_hover.gif';
		  break;
	  }
	  break;
	  case 'b':
		switch(x){
		case 5:
		  document.getElementById('b5').src='images/star_hover.gif';
		case 4:
		  document.getElementById('b4').src='images/star_hover.gif';
		case 3:
		  document.getElementById('b3').src='images/star_hover.gif';
		case 2:
		  document.getElementById('b2').src='images/star_hover.gif';
		case 1:
		  document.getElementById('b1').src='images/star_hover.gif';
		  break;
	  }
	  break;
	}
}
// kills all the stars sources
function killem(which){
	switch(which){
		case 'f':
	          document.getElementById('f1').src='images/star.gif';
			  document.getElementById('f2').src='images/star.gif';
			  document.getElementById('f3').src='images/star.gif';
			  document.getElementById('f4').src='images/star.gif';
			  document.getElementById('f5').src='images/star.gif';
		  break;
		case 'b':
			  document.getElementById('b1').src='images/star.gif';
			  document.getElementById('b2').src='images/star.gif';
			  document.getElementById('b3').src='images/star.gif';
			  document.getElementById('b4').src='images/star.gif';
			  document.getElementById('b5').src='images/star.gif';
		 break;
	  }
	return true;

}

// onmouseout event that similarily kills the source
function rateoff(x, which){
	if(rate_f != "") {
		rateover(rate_f, 'f');
	} else {
		killem('f');
	}
}
  </script>
 </HEAD>

 <BODY>
 
<div class="verbage" id="rest_actions">
<div id="rate">
Your Email<span style="font-size:10px;"> (Not Required)</span><br/><input type="text" id="email"/>
<br/><br/>
<ul>
<li><img onmouseout="rateoff(1,'f')" onmouseover="rateover(1,'f')" onclick="rateclick('f1')" id="f1" alt="1" src="images/star.gif"/></li>
<li><img onmouseout="rateoff(2,'f')" onmouseover="rateover(2,'f')" onclick="rateclick('f2')" id="f2" alt="2" src="images/star.gif"/></li>
<li><img onmouseout="rateoff(3,'f')" onmouseover="rateover(3,'f')" onclick="rateclick('f3')" id="f3" alt="3" src="images/star.gif"/></li>
<li><img onmouseout="rateoff(4,'f')" onmouseover="rateover(4,'f')" onclick="rateclick('f4')" id="f4" alt="4" src="images/star.gif"/></li>
<li><img onmouseout="rateoff(5,'f')" onmouseover="rateover(5,'f')" onclick="rateclick('f5')" id="f5" alt="5" src="images/star.gif"/></li>
</ul>
<ul>
<li><img onmouseout="rateoff(1,'b')" onmouseover="rateover(1,'b')" onclick="rateclick('b1')" id="b1" alt="1" src="images/star.gif"/></li>
<li><img onmouseout="rateoff(2,'b')" onmouseover="rateover(2,'b')" onclick="rateclick('b2')" id="b2" alt="2" src="images/star.gif"/></li>
<li><img onmouseout="rateoff(3,'b')" onmouseover="rateover(3,'b')" onclick="rateclick('b3')" id="b3" alt="3" src="images/star.gif"/></li>
<li><img onmouseout="rateoff(4,'b')" onmouseover="rateover(4,'b')" onclick="rateclick('b4')" id="b4" alt="4" src="images/star.gif"/></li>
<li><img onmouseout="rateoff(5,'b')" onmouseover="rateover(5,'b')" onclick="rateclick('b5')" id="b5" alt="5" src="images/star.gif"/></li>
</ul>
<br/><br/>
Review This<br/>
<textarea id="review" cols="30" rows="5"></textarea>
<br/><br/>
<input type="button" value="Submit Review" onclick="rate_rest()"/>
</div>
</div>			  
 </BODY>
</HTML>

CFMaBiSmAd · 05-11-2007, 05:39 AM

To make a rating system useful, the votes must be "globally" remembered between visits and accessible among all visitors.

Javascript by itself cannot make the values for one visitor accessible to any other visitor. Only a server side scripting language can do this.

You could store the votes in a cookie for any visitor, but this would just allow that visitor to change his own local vote and the cookie is only available when that visitor is on your web site. This does not allow votes for different visitors to be combined.

geetar251 · 05-11-2007, 12:55 PM

Absolutely, I know that...I'll be using PHP and MySQL. I'm just trying to get the interface started first.