如何使用PHP来获得星级小部件的价值

How to use PHP to get the value of a star rating widget?

本文关键字:小部 PHP 何使用      更新时间:2024-05-30

我的页面上有这个星级评定小部件,允许用户将鼠标悬停在星级上,选择评级并提交。

这是html和css:

<form method="post" id="star_review" name="star_review" action=">
<div class="rate_review">
     <div class="col-md-4"></div>
             <div class="col-md-4">
                   <div class="panel panel-default">
                        <ul class="list-group list-group-flush text-center">
                            <li class="list-group-item">
                                <div class="skillLineDefault">
                                    <div class="skill pull-left text-center">Rate the Exam</div>
                                    <div class="rating" id="rate1"></div>
                                </div>
                            </li>
                        </ul>
                   </div>
             </div>
</div>
<button class="btn btn-large btn-block btn-primary" type="submit" name="submit">Submit </button>
</form>

<style>
.rate_review {
    padding-top: 50px;
    padding-bottom: 50px;
    position: static;
}
.rating {
    margin-left: 30px;
}
div.skill {
    background: #5cb85c;
    border-radius: 3px;
    color: white;
    padding: 3px 4px;
    margin-top: -10px;
}
.skillLine {
    display: inline-block;
    width: 100%;
    min-height: 90px;
    padding: 3px 4px;
}
skillLineDefault {
    padding: 3px 4px;
}

JavaScript:

<!-- you need to include the shieldui css and js assets in order for the charts to work -->
<link rel="stylesheet" type="text/css" href="http://www.shieldui.com/shared/components/latest/css/light/all.min.css" />
<script type="text/javascript" src="http://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript">
initializeRatings();
function initializeRatings() {
    $('#rate1').shieldRating({
        max: 5,
        step: 0.1,
        value: 0,
        markPreset: false
    });
    $('#rate2').shieldRating({
        max: 5,
        step: 0.1,
        value: 1,
        markPreset: false
    });
    $('#rate3').shieldRating({
        max: 5,
        step: 0.1,
        value: 2,
        markPreset: false
    });
    $('#rate4').shieldRating({
        max: 5,
        step: 0.1,
        value: 3,
        markPreset: false
    });
}
</script>

如果我可以得到评分的值,这样我就可以在点击提交按钮后将其存储到我的数据库中?

我提供了一张屏幕截图,显示了星级评定小部件在屏幕上的外观屏幕截图

实现这一点的最简单方法是添加一个函数

function myFunction(){
    document.getElementById("myRate1").value = $('#rate1').swidget().value();
}

然后以类似的形式添加隐藏文本框

<input type="hidden" name="myRate1" id="myRate1"/>

然后在表单的onsubmit事件上调用此函数[myFunction]