Thankful to Krajee!
to get more out of us.
Advanced usage examples of the bootstrap-star-rating plugin.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

Set an initial value to the rating. Change or set number of stars, set minimum, maximum values, the step to increment, and fractional ratings based on number of stars. Note: if you have not setup the starCaptions array with captions for each star rating value, the plugin will auto generate the caption.
<label for="input-1" class="control-label">Rate This</label>
<input id="input-1" name="input-1" value="4.3" class="rating-loading">
<script>
$(document).on('ready', function(){
    $('#input-1').rating({min: 0, max: 8, step: 0.1, stars: 8});
});
</script>
Configure your own captions and caption classes for each star rating.
<label for="input-2" class="control-label">Rate This</label>
<input id="input-2" name="input-2" value="2.5" class="rating-loading">
<script>
$(document).on('ready', function(){
    $('#input-2').rating({
        step: 1,
        starCaptions: {1: 'Very Poor', 2: 'Poor', 3: 'Ok', 4: 'Good', 5: 'Very Good'},
        starCaptionClasses: {1: 'text-danger', 2: 'text-warning', 3: 'text-info', 4: 'text-primary', 5: 'text-success'}
    });
});
</script>
Initialize rating with a predefined value. Automatically reset value when form is reset.
<form>
    <label for="input-3" class="control-label">Rate This</label>
    <input id="input-3" name="input-3" value="2" class="rating-loading">
    <button class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
</form>
<script>
$(document).on('ready', function(){
    $('#input-3').rating({});
});
</script>
Advanced customization. Customize the style and display of the clear button. Configure your own target elements where the clear button and caption would be rendered.
Custom Clear ButtonCaption Location
<label for="input-4" class="control-label">Rate This</label>
<input id="input-4" name="input-4" value="2.5" class="rating-loading">
<table class="table-bordered table-condensed">
    <tr><th>Custom Clear Button</th><th>Caption Location</th></tr>
    <tr><td><span id="kv-clear"></span></td><td><span id="kv-caption"></span></td></tr>
</table>
<script>
$(document).on('ready', function(){
    $('#input-4').rating({
        clearButton: '<button class="btn btn-secondary" type="button">' +
            '<i class="glyphicon glyphicon-remove"></i> Clear</button>',
        clearElement: "#kv-clear", 
        captionElement: "#kv-caption"
    });
});
</script>
Using plugin events. For example set an alert on both changing or clearing the rating.
<label for="input-5" class="control-label">Rate This</label>
<input id="input-5" name="input-5" value="3" class="rating-loading">
<script>
$(document).on('ready', function(){
    $("#input-5").rating().on("rating:clear", function(event) {
        alert("Your rating is reset")
    }).on("rating:change", function(event, value, caption) {
        alert("You rated: " + value + " = " + $(caption).text());
    });
});
</script>
Using plugin methods. Update a rating value via javascript.
 
<label for="input-6" class="control-label">Rate This</label>
<input id="input-6" name="input-6" class="rating-loading">
<script>
$(document).on('ready', function(){
    $("#input-6").rating();
    // trap the select change event to execute a rating method
    $("#rating_changer").on("change", function() {
        if (this.value == "") {
            $("#input-6").rating("clear");
        } else { 
            $("#input-6").rating("update", this.value); 
        }
    });
});
</script>
Using plugin methods. Automatically refresh rating based on updated options. For example, disable the rating and hide clear button after user has set the vote.
<label for="input-7" class="control-label">Rate This</label>
<input id="input-7" name="input-7" class="rating-loading">
<script>
$(document).on('ready', function(){
    $("#input-7").rating().on("rating:change", function(event, value, caption) {
        $("#input-7").rating("refresh", {disabled:true, showClear:false});
    });
});
</script>
Multi language inputs. You can set the language property to translate using your locale. Note that the locale JS file must be loaded after star-rating.js.
<input id="input-8" name="input-8" class="rating-loading">
<script>
$(document).on('ready', function(){
    $("#input-8").rating({language: 'de'});
});
</script>
Hover behavior manipulation via hoverEnabled, hoverChangeCaption, hoverChangeStars, hoverOnClear.




<label for='input-90'>All Hover Behavior Enabled</label>
<input id='input-90' class='rating-loading'><hr/>

<label for='input-91'>All Hover Behavior Disabled</label>
<input id='input-91' class='rating-loading'><hr/>

<label for='input-92'>Disallow Caption To Change On Hover</label>
<input id='input-92' class='rating-loading'><hr/>

<label for='input-93'>Disallow Stars To Change On Hover</label>
<input id='input-93' class='rating-loading'><hr/>

<label for='input-94'>Disallow Hover Behavior For Clear Button</label>
<input id='input-94' class='rating-loading'>

<script>
$(document).on('ready', function(){
    $('#input-90').rating({hoverEnabled: true});
    $('#input-91').rating({hoverEnabled: false});
    $('#input-92').rating({hoverChangeCaption: false});
    $('#input-93').rating({hoverChangeStars: false});
    $('#input-94').rating({hoverOnClear: false});

});
</script>

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.