Set star value in form after click on star

Question

I am implementing a star rating and am using the font awesome star in my form but I don't know how to set the star value. I have many values in this form like input and buttons. But i don't know how to the set value of a star.

https://css-tricks.com/star-ratings/

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  float:left;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

<form>
  <div class="rating"> 
     <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
  </div>
</form>

I want set the value in star. After a click on the star then the star should be black.

radio buttons will help you . Have a look at [integrating-css-star-rating-into-an-html-form](http://stackoverflow.com/questions/8118266/integrating-css-star-rating-into-an-html-form) — Garvit Mangal, May 16 '16 at 06:04

score 4 · Accepted Answer · answered May 16 '16 at 06:08

Use some js/jQuery to apply active class for current element, replace span with label and radio inside

$(document).ready(function() {
  $('label').click(function() {
    $('label').removeClass('active');
    $(this).addClass('active');
  });
});

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  float: left;
}
.rating > label {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > label.active:before,
.rating > label.active ~ label:before,
.rating > label:hover:before,
.rating > label:hover ~ label:before {
  content: "\2605";
  position: absolute;
}
input {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="rating">
    <label>☆
      <input type="radio" name="starValue" value="5" />
    </label>
    <label>☆
      <input type="radio" name="starValue" value="4" />
    </label>
    <label>☆
      <input type="radio" name="starValue" value="3" />
    </label>
    <label>☆
      <input type="radio" name="starValue" value="2" />
    </label>
    <label>☆
      <input type="radio" name="starValue" value="1" />
    </label>
  </div>
</form>

If u like my question then voting up help to others. – Varun Sharma May 16 '16 at 07:00 — Varun Sharma, May 16 '16 at 07:00

score 0 · Answer 2 · answered May 16 '16 at 06:02

0

As your CSS/HTML logic sets reverse star, you can use index of span and store it in hidden field like,

$('.rating span').on('click',function(){
    $('#rate_holder').val(4-$(this).index()+1);
    console.log($('#rate_holder').val());
});

Have a look at the fiddle here. Here for is to revert current index(because index always starts from 0 4 would be our maximum) and plus 1 to set it right from 1 to 5.

answered May 16 '16 at 06:02

Mukesh Ram

6,248
4
19
37

your answer is fine but i want also change star color. – Varun Sharma May 16 '16 at 06:06
In case you want to remove ratings which is generally not given by peoples, you can place one buttons saying remove rating and then set values of rate_holder to 0 and remove active class of all spans of .rating div. – Mukesh Ram May 16 '16 at 06:10

score 0 · Answer 3 · answered May 16 '16 at 06:22

Unfortunately there is noway to achieve this using pure CSS && HTML. You'll some sort of scripting to toggle the classes/state of the stars...

I have a working demo using the jQuery API which makes this demo quite succinct... check it out!

<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Star Rating Demo</title>
    <link rel="stylesheet" type="text/css" href="./font-awesome.min.css">
</head>
<body>
    <h1>Star Rating Demo</h1>

    <div class="rating">
        <span class="fa fa-star-o"></span>
        <span class="fa fa-star-o"></span>
        <span class="fa fa-star-o"></span>
        <span class="fa fa-star-o"></span>
        <span class="fa fa-star-o"></span>
    </div>



<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
    jQuery(".fa-star-o, .fa-star")
        .on("click, mouseover", function (event) {

        var star = jQuery(this)

        jQuery(star).removeClass("fa-star-o").addClass("fa-star")
            .prevAll()
            .removeClass("fa-star-o").addClass("fa-star")

        jQuery(star).nextAll()
            .removeClass("fa-star").addClass("fa-star-o")
    })
</script>
</body>
</html>

Set star value in form after click on star

3 Answers3