Question

I have a working star rating system, but If a user has already voted and changes their mind on the vote, they cannot reset their vote.

Here is what I have in the Javascript:

<script type="text/javascript">

var set = false;
var v = 0;
var a;

function loadStars() {
    star1 = new Image();
    star1.src = "images/star1.png";
    star2 = new Image();
    star2.src = "images/star2.png";
}

function highlight(x) {
    if (set == false) {
        y = x * 1 + 1
        switch (x) {
        case "1":
            document.getElementById(x).src = star2.src;
            document.getElementById('vote').innerHTML = "One star";
            break;
        case "2":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Two stars"
            break;
        case "3":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Three stars"
            break;
        case "4":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Four stars"
            break;
        case "5":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Five stars"
            break;
        }
    }
}

function losehighlight(x) {
    if (set == false) {
        for (i = 1; i < 6; i++) {
            document.getElementById(i).src = star1.src;
            document.getElementById('vote').innerHTML = ""
        }
    }
}

function setStar(x) {
    y = x * 1 + 1
    if (set == false) {
        switch (x) {
        case "1":
            a = "1"
            flash(a);
            break;
        case "2":
            a = "2"
            flash(a);
            break;
        case "3":
            a = "3"
            flash(a);
            break;
        case "4":
            a = "4"
            flash(a);
            break;
        case "5":
            a = "5"
            flash(a);
            break;
        }
        set = true;
        insertrating(x, '<?=$themeid?>');
        document.getElementById('vote').innerHTML = "Thank you!";
    }

    function flash() {
        y = a * 1 + 1
        switch (v) {
        case 0:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star1.src;
            }
            v = 1
            setTimeout(flash, 200)
            break;
        case 1:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            v = 2
            setTimeout(flash, 200)
            break;
        case 2:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star1.src;
            }
            v = 3
            setTimeout(flash, 200)
            break;
        case 3:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            v = 4
            setTimeout(flash, 200)
            break;
        case 4:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star1.src;
            }
            v = 5
            setTimeout(flash, 200)
            break;
        case 5:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            v = 6
            setTimeout(flash, 200)
            break;
        }
    }

</script>

How would I go about allowing the user to resubmit a vote?

My html looks like this:

<span style="float: left; text-align: left;"> Rate This Theme<br />
    <img src="images//star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="1" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="2" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="3" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="4" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="5" style="float: left;" /> 
</span> 

Answer 1

As far as I can tell, the only thing preventing the user from re-voting is your set variable.

   if (set==false)
   {
   ...  
   set=true;

Just get rid of the if clause and it should run even if set==true

Per Tomalak’s comment, i forgot to mention that:

If the backend doesn’t support this,
then it will insert a new vote rather
than changing the existing one. And
since there doesn’t appear to be any
user identification, that would appear
to be the case

If you don’t have any user authentication, at least use a cookie or something to keep track of which user is what so that the vote is edited, not a new one created.

As for setting cookies, I’d recommend setting a cookie via Javascript once the user votes the first time. On the backend, whatever you’re using for server-side technology should check to see if a cookie already exists, and if it does, edit the ranking entry instead of creating a new one.
Here’s a good resource on cookies in JS: http://www.quirksmode.org/js/cookies.html