Question

我正在努力建立一个5星评级系统。所有代码都运行良好，但是当我试图存储用户选择的评级值以及将具有文本区域和文本框的表单元素时，我无法将它们存储在数据库中。

Here is my code

 star_rating.php

 <html>
   <head>
     <title>Testing</title>
     <link rel="stylesheet" type="text/css" href="rating_style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {

            var clicked_val = 0;

        $("#1_star").hover(function() {
            $("#1_star").attr('src','clor.png');
            $("#2_star").attr('src','sta.png');
            $("#3_star").attr('src','sta.png');
            $("#4_star").attr('src','sta.png');
            $("#5_star").attr('src','sta.png');
        });

        $('#1_star').click(function() {
            clicked_val = 1;

        });

        $("#2_star").hover(function() {
            $("#1_star").attr('src','clor.png');
            $("#2_star").attr('src','clor.png');
            $("#3_star").attr('src','sta.png');
            $("#4_star").attr('src','sta.png');
            $("#5_star").attr('src','sta.png');
        });

        $('#2_star').click(function() {
            clicked_val = 2;

        });

        $("#3_star").hover(function() {
            $("#1_star").attr('src','clor.png');
            $("#2_star").attr('src','clor.png');
            $("#3_star").attr('src','clor.png');
            $("#4_star").attr('src','sta.png');
            $("#5_star").attr('src','sta.png');
        });

        $('#3_star').click(function() {
            clicked_val = 3;

        });

        $("#4_star").hover(function() {
            $("#1_star").attr('src','clor.png');
            $("#2_star").attr('src','clor.png');
            $("#3_star").attr('src','clor.png');
            $("#4_star").attr('src','clor.png');
            $("#5_star").attr('src','sta.png');

        });

        $('#4_star').click(function() {
            clicked_val = 4;

        });

        $("#5_star").hover(function() {
            $("#1_star").attr('src','clor.png');
            $("#2_star").attr('src','clor.png');
            $("#3_star").attr('src','clor.png');
            $("#4_star").attr('src','clor.png');
            $("#5_star").attr('src','clor.png');
        });

        $('#5_star').click(function() {
            clicked_val = 5;
        });
        $('.rating-star').mouseout(function() {
            if(clicked_val === 0 || clicked_val > 5)
            {
                $("#1_star").attr('src','sta.png');
                $("#2_star").attr('src','sta.png');
                $("#3_star").attr('src','sta.png');
                $("#4_star").attr('src','sta.png');
                $("#5_star").attr('src','sta.png');
            }


            else if (clicked_val === 1) 
            {
                $("#1_star").attr('src','clor.png');
                $("#2_star").attr('src','sta.png');
                $("#3_star").attr('src','sta.png');
                $("#4_star").attr('src','sta.png');
                $("#5_star").attr('src','sta.png');
            }

            else if (clicked_val === 2) 
            {
                $("#1_star").attr('src','clor.png');
                $("#2_star").attr('src','clor.png');
                $("#3_star").attr('src','sta.png');
                $("#4_star").attr('src','sta.png');
                $("#5_star").attr('src','sta.png'); 
            }

            else if (clicked_val === 3) 
            {
                $("#1_star").attr('src','clor.png');
                $("#2_star").attr('src','clor.png');
                $("#3_star").attr('src','clor.png');
                $("#4_star").attr('src','sta.png');
                $("#5_star").attr('src','sta.png');
            }

            else if (clicked_val === 4) 
            {
                $("#1_star").attr('src','clor.png');
                $("#2_star").attr('src','clor.png');
                $("#3_star").attr('src','clor.png');
                $("#4_star").attr('src','clor.png');
                $("#5_star").attr('src','sta.png'); 
            }

            else if (clicked_val === 5) 
            {
                $("#1_star").attr('src','clor.png');
                $("#2_star").attr('src','clor.png');
                $("#3_star").attr('src','clor.png');
                $("#4_star").attr('src','clor.png');
                $("#5_star").attr('src','clor.png');    
            }
        });

        $('#rate_this').click(function() {

            if(clicked_val === 0 || clicked_val > 5)
            {
                $('#response').html('Please give a rating');
            }
            else
            {                                                       

                $.ajax({

                    type: "POST",
                    cache: false,
                    url:'show.php',
                    data:'clicked_val='+clicked_val,
                    success: function(response)
                    {
                        $('#response').html(response);
                    }
                });
            }
        });


     });
    </script>

    </head>
   <body>
      <center>
         <div class="rating-container">
            <div class="rating-star">
               <img src="sta.png" width="50" id="1_star" />
               <img src="sta.png" width="50" id="2_star" />
               <img src="sta.png" width="50" id="3_star" />
               <img src="sta.png" width="50" id="4_star" />
               <img src="sta.png" width="50" id="5_star" />
            </div>
            <form method="post" id="rate_this">
               <input type="text" name="user_name"/>
               <input type="submit" value="submit" name="rating" id="submit_rating">
          </form>
           <div id="response"></div>
        </div>

     </center>
    </body>
   </html>

我想在点击提交按钮后存储带有表单子元素值的jquery值alnog

0 个答案: