How to improve a star rating code?

Question

I’m with a website and certain points hold me, as this evaluation, is not very cool this script, someone fit can improve for me or tell me what can improve, to make the code more organized, check if the user selected some star, give error message

Codes:

$star1 = isset($_POST["star1"]);
$star2 = isset($_POST["star2"]);
$star3 = isset($_POST["star3"]);
$star4 = isset($_POST["star4"]);
$star5 = isset($_POST["star5"]);

if ($star1 == 1)
{
    $star = $_POST["star1"];
}
if ($star2 == 1)
{
    $star = $_POST["star2"];
}
if ($star3 == 1)
{
    $star = $_POST["star3"];
}
if ($star4 == 1)
{
    $star = $_POST["star4"];
}
if ($star5 == 1)
{
    $star = $_POST["star5"];
}

Use of the variable $star to do the INSERT of the points the user selected, plus if it does not select anything sends '0' to the DB.

Here are the stars:

<div class="rating_star">
                <div id="col_star">
                    <table cellspacing=2 cellpadding="2">
                        <tr>
                            <td width="48" onmouseover="rate('1')" onmouseout="retira('1')" onclick="rating('1');">
                                <img id="1" src="../img/star_48x48.png" border="0" id="star1" style="cursor:pointer;width:48px;">
                            </td>
                            <td width="48" onmouseover="rate('2')" onmouseout="retira('2')" onclick="rating('2');">
                                <img id="2" src="../img/star_48x48.png" border="0" id="star2" style="cursor:pointer;width:48px;"></a>
                            </td>
                            <td width="48" onmouseover="rate('3')" onmouseout="retira('3')" onclick="rating('3');">
                                <img id="3" src="../img/star_48x48.png" border="0" id="star3" style="cursor:pointer;width:48px;"></a>
                            </td>
                            <td width="48" onmouseover="rate('4')" onmouseout="retira('4')" onclick="rating('4');">
                                <img id="4" src="../img/star_48x48.png" border="0" id="star4" style="cursor:pointer;width:48px;"></a>
                            </td>
                            <td width="48" onmouseover="rate('5')" onmouseout="retira('5')" onclick="rating('5');">
                                <img id="5" src="../img/star_48x48.png" border="0" id="star5" style="cursor:pointer;width:48px;"></a>
                            </td>
                            <td id="note" width="65"></td>
                        </tr>
                    </table>
                </div>              
                </div>
                <div id="msg"></div>

And here’s the script that makes it all work:

<script>
    function cache() 
    {
        imagens = new Image();
        imagens.src='../img/star_48x48.png';
        imagens.src='../img/star1_48x48.png';
    }

    function rate(id)
    {
        if(id==1)
        {
        document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star1' id='star1' value='1'></font>";
        }
        if(id==2)
        {
        document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star2' id='star2' value='2'></font>";
        }
        if(id==3)
        {
        document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star3' id='star3' value='3'></font>";
        }
        if(id==4)
        {
        document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star4' id='star4' value='4'></font>";
        }
        if(id==5)
        {
        document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star5' id='star5' value='5'></font>";
        }
        for(i = 0; i < id; i++)
        {
        document.getElementById(i+1).src="../img/star1_48x48.png";
        }
    }

    function retira(id) 
    {
        for(i = 5; i > id; i--) 
        {
        document.getElementById(i).src="../img/star_48x48.png";
        }
    }

    function rating(id)
    {
        var user = document.getElementById('idLogged').value;

        if (user != "")
        {

        if(id==1) 
        {
            document.getElementById('voto').value = id;
            document.getElementById('msg').innerHTML="<div class='alert alert-danger' style='height:48px;text-align:center;'>Detestei</div>";
        }

        if(id==2) 
        {
            document.getElementById('voto').value = id;
            document.getElementById('msg').innerHTML="<div class='alert alert-danger' style='height:48px;text-align:center;'>Não gostei</div>";
        }

        if(id==3) 
        {
            document.getElementById('voto').value = id;
            document.getElementById('msg').innerHTML="<div class='alert alert-warning' style='height:48px;text-align:center;'>Razoável</div>";
        }

        if(id==4) 
        {
            document.getElementById('voto').value = id;
            document.getElementById('msg').innerHTML="<div class='alert alert-info' style='height:48px;text-align:center;'>Gostei</div>";
        }

        if(id==5) 
        {
            document.getElementById('voto').value = id;
            document.getElementById('msg').innerHTML="<div class='alert alert-success' style='height:48px;text-align:center;'>Adorei</div>";
        }       
        }
        else
        {
            document.getElementById('msg').innerHTML="<div class='alert alert-danger' style='height:48px;text-align:center;'><strong>Erro ao avaliar!</strong> É necessário realizar o login para enviar um comentário.</div>";
        }
    }
</script>

And so, it’s kind of bad this system isn’t?

If the user does not select the stars can register '0'

Answer 1

The first thing I’d do is this:

for ($i = 4; $i > 0; $i--) {
     if (isset($_POST["star" . $i])) {
         $star = $_POST["star" . $i];
         break;
     }
}

In HTML it would basically only save on indentation. It could also use <div> instead of using a <table>, This is old and wrong style.

If it can be generated automatically, then it can be improved. It is very repetitive code, could create a loop to generate this.

In JS more fancy in indentation and would otherwise solve the sending of data. You don’t need five variables, you need one with the number of stars:

document.getElementById('note').innerHTML="<font class='ajax'><input type='hidden' name='star' id='star' value='" + id + "'></font>";
for (var i = 0; i < id; i++) {
    document.getElementById(i + 1).src = "../img/star1_48x48.png";
}

I’d still take that <font>, This is old and makes no sense in this case.

In fact I have my doubts if I would need this for. But you’re too confused to understand the goal.

There you can improve PHP to:

$star = $_POST["star"]; //na verdade nem precisa criar esta variável

There will be stored the number of stars that is the most relevant information.

In the other JS function:

var textos = ["Detestei", "Não gostei", "Razoável", "Gostei", "Adorei"];
var user = document.getElementById('idLogged').value;
if (user != "") {
    document.getElementById('voto').value = id;
    document.getElementById('msg').innerHTML="<div class='alert alert-danger' style='height:48px;text-align:center;'>" + texxtos[id - 1] + "</div>";
} else {
    document.getElementById('msg').innerHTML="<div class='alert alert-danger' style='height:48px;text-align:center;'><strong>Erro ao avaliar!</strong> É necessário realizar o login para enviar um comentário.</div>";
}

I put in the Github for future reference.

I’m not analyzing if the code is right, just rewriting. Nor does it without knowing the whole code. As there is no MCVE, I have no way to test if the changes are all right. In a larger context it is likely that can improve other things. Gives cool. But I can’t do the whole code again for you. There are the basic ideas, just take advantage.