Bootstrap star rating input example
In this article, you will learn how to implement a simple bootstrap star rating widget in an HTML form using the jQuery bootstrap star rating plugin and get the rating input using PHP.
Bootstrap is a free, open-source HTML, CSS, and JS framework containing templates for text, forms, buttons, navigation, datetime, and other relevant interface components. Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
Star rating is often found everywhere. It's a typical rating scale that's being used by popular marketplace sites. A star rating may be a valuable metric that tells others what most people believe about a particular product, an app, or a movie generally. A star rating consists of stars, with the quantity usually at a maximum of 5. You let your users rate an item using stars. One star equals poor, while five equals excellent. By selecting quite one star, all previous stars should be filled.
Dynamic bootstrap star rating
In the given example, we have included all the necessary CSS and JS libraries and then specified the input field for rating the product. We have also specified the JS code to call the star-rating in the input field.
Output of the above code -
<!DOCTYPE html> <?php $rating = $_POST['rating']; echo '<h2>Thanks for rating! '.$rating.'</h2>'; ?> <html> <head> <title>Bootstrap star rating example</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.2/css/star-rating.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.2/js/star-rating.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap star rating example</h2> <form action="#" method="post"> <label for="ratinginput" class="control-label">Give rating for the product:</label> <input id="ratinginput" name="rating" class="rating rating-loading" data-min="0" data-max="5" data-step="0.1" value="2"> <input type="submit" name="Submit"/> </form> </div> <script> $("#ratinginput").rating(); </script> </body> </html>
Related ArticlesjQuery Ajax serialize form data example
Ajax live data search using jQuery PHP MySQL
Django Pagination with Ajax and jQuery
Image popup on page load using HTML and jQuery
Bootstrap modal popup example on page load
Bootstrap datepicker example
jQuery File upload progress bar with validation
jQuery Ajax serialize form data example
Save emoji in MySQL
How to display PDF file in PHP from database
jQuery loop over JSON result after AJAX Success
PHP Server Side Form Validation
How to add google reCAPTCHA v2 in registration form using PHP
Complete HTML Form Validation in PHP