CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
dark_illusion_909099
dark_illusion_909099

Reputation: 1099

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

I have this star rating widget on my page, allowing the user to hover over the stars and select the rating and submit it.

This is the html and 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>

if there anyway that I can get the value of the rating so that I can store it on to my database after submit button click ?

I have provided a screenshot of how the star rating widget looks on the screen Screenshot

Upvotes: 1

Views: 1763

Answers (1)

Aashu Spk
Aashu Spk

Reputation: 111

Simplest way to achieve this is by adding a function

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

Then adding a Hidden text box in form like this 

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

and then calling this function [myFunction] on form's onsubmit event

Upvotes: 1

Related Questions