Jump to content

[SOLVED] star rating


cs1h

Recommended Posts

Hi,

 

Can anyone point me to a script or tutorial for a star rating system in which you click on your rating to select it and then click submit to submit your rating?

 

I have seen a lot of scripts where you vote automatically just by clicking on the star but I need one where you choose your rating first and then submit it.

 

All help is much appreciated,

 

Colin

Link to comment
https://forums.phpfreaks.com/topic/106768-solved-star-rating/
Share on other sites

Here is a quick and dirty solution. The input field should be hidden - I made it a text field for display purposes. There are quite a few things I would do with this if I was going to actually use it, but it should get you going.

 

<html>
<head>
<script>

var rating = 1;

function showRating(rateVal) {

    for (i=1; i<=5; i++) {
        if (rateVal!=0) {
            imgSrc = (i<=rateVal)? 'star_on.gif' : 'star_off.gif';
        } else {
            imgSrc = (i<=rating)? 'star_on.gif' : 'star_off.gif';
        }
        document.getElementById('rating'+i).src = imgSrc;
    }
    return;
}

function setRating(rateVal) {
    rating = rateVal
    document.getElementById('rateValue').value = rateVal;
    return false;
}
</script>


<body onload="">

<div id="userrating">
<img src="star_off.gif" id="rating1" onmouseover="showRating(1);" onmouseout="showRating(0);" onclick="setRating(1);"
><img src="star_off.gif" id="rating2" onmouseover="showRating(2);" onmouseout="showRating(0);" onclick="setRating(2);"
><img src="star_off.gif" id="rating3" onmouseover="showRating(3);" onmouseout="showRating(0);" onclick="setRating(3);"
><img src="star_off.gif" id="rating4" onmouseover="showRating(4);" onmouseout="showRating(0);" onclick="setRating(4);"
><img src="star_off.gif" id="rating5" onmouseover="showRating(5);" onmouseout="showRating(0);" onclick="setRating(5);">
</div>

<br><br><br><br>
<form action="">
<input type="text" name="rateValue" id="rateValue">
<br><button type="submit">Submit</button>
</form>
</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/106768-solved-star-rating/#findComment-547770
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.