javascript - 如何使用 PHP 获取星级小部件的值？

Question

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

这是 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>

如果无论如何我可以获得评级的值，以便我可以在单击提交按钮后将其存储到我的数据库中？

我提供了星级评分小部件在屏幕上的外观截图 Screenshot

Answer 1

最简单的方法是添加一个函数

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

然后在这样的表单中添加一个隐藏的文本框

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

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