javascript - Need to keep the selected star rating highlighted after the form is submitted or reloaded [REDUX] -
i accidentally deleted question sorry reposting it.
i have 5 star rating script works fine display stars , values fine when submit rating or reload page when rating selected. star rating , value show fine @ first when place mouse pointer on star ratings image , remove mouse pointer star ratings image highlighted star rating removed name value still displayed.
for example, lets click , select rating of 2 stars , submit or reload page. 2 stars highlighted @ first , rating name value of d displayed.
but when hover mouse pointer on star rating image , remove mouse pointer rating image highlighted stars removed rating name value of d still displayed. wondering how can keep 2 stars highlighted when remove mouse pointer image after page has been submitted or reloaded?
jquery
$(document).ready(function(){ var rating = 'eunrated'; $('.rating-choice li') .on('mouseenter touchstart', function(){ $(this).parent().removeclass($(this).parent().attr('class').split(' ')[1]); var classsuffix = $(this).attr('id').split('-')[1]; $('.rating-choice').addclass('erating-' + classsuffix); $('.rate-this').text($(this).data('desc')); }) .on('mouseleave touchend', function(){ var classsuffix = $(this).attr('id').split('-')[1]; $('.rate-this').text($('.rate-this').attr('data-desc')); $('.rating-choice').attr('class', '').addclass('rating-choice ' + rating) }) .on('change click', function(e){ e.preventdefault(); e.stoppropagation(); $('.rate-this').attr('data-desc', $(this).attr('data-desc')); rating = 'erating-' + $(this).attr('id').split('-')[1]; $('.rating-choice').removeclass('eunrated').addclass(rating); $(this).find('input').prop('checked', true); }); $('#clear-rating').on('change click', function(e){ e.preventdefault(); e.stoppropagation(); $(this).parent().find('input:checked').prop('checked', false); $(this).parent().find('ul').removeclass().addclass('rating-choice eunrated'); $('.rate-this').text($('.rate-this').attr('data-desc')); $('.rate-this').attr('data-desc', 'rating').text('rating'); rating = 'eunrated'; }); }); html & php
<form method="post" action="" id="form"> <fieldset> <ol> <li><h2 class="header">rating:</h2></li> <li> <ul class="rating-choice <?php if((isset($rating) && !empty($rating) && $rating === '1') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '1')){ echo 'erating-1'; } else if((isset($rating) && !empty($rating) && $rating === '2') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '2')){ echo 'erating-2'; } else if((isset($rating) && !empty($rating) && $rating === '3') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '3')){ echo 'erating-3'; } else if((isset($rating) && !empty($rating) && $rating === '4') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '4')){ echo 'erating-4'; } else if((isset($rating) && !empty($rating) && $rating === '5') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '5')){ echo 'erating-5'; } else if((isset($rating) && !empty($rating) && $rating === '6') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '6')){ echo 'erating-6'; } else if((isset($rating) && !empty($rating) && $rating === '7') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '7')){ echo 'erating-7'; } else if((isset($rating) && !empty($rating) && $rating === '8') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '8')){ echo 'erating-8'; } else if((isset($rating) && !empty($rating) && $rating === '9') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '9')){ echo 'erating-9'; } else if((isset($rating) && !empty($rating) && $rating === '10') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '10')){ echo 'erating-10'; } else { echo 'eunrated'; } ?>"> <li id="rate-1" data-desc="a"> <label for="rating-1"><input type="radio" value="1" name="rating" id="rating-1" />0.5 stars</label> </li> <li id="rate-2" data-desc="b"> <label for="rating-b"><input type="radio" value="2" name="rating" id="rating-2" />1 star</label> </li> <li id="rate-3" data-desc="c"> <label for="rating-3"><input type="radio" value="3" name="rating" id="rating-3" />1.5 stars</label> </li> <li id="rate-4" data-desc="d"> <label for="rating-4"><input type="radio" value="4" name="rating" id="rating-4" />2 stars</label> </li> <li id="rate-5" data-desc="e"> <label for="rating-5"><input type="radio" value="5" name="rating" id="rating-5" />2.5 stars</label> </li> <li id="rate-6" data-desc="f"> <label for="rating-6"><input type="radio" value="6" name="rating" id="rating-6" />3 stars</label> </li> <li id="rate-7" data-desc="g"> <label for="rating-7"><input type="radio" value="7" name="rating" id="rating-7" />3.5 stars</label> </li> <li id="rate-8" data-desc="h"> <label for="rating-8"><input type="radio" value="8" name="rating" id="rating-8" />4 stars</label> </li> <li id="rate-9" data-desc="i"> <label for="rating-9"><input type="radio" value="9" name="rating" id="rating-9" />4.5 stars</label> </li> <li id="rate-10" data-desc="j"> <label for="rating-10"><input type="radio" value="10" name="rating" id="rating-10" />5 stars</label> </li> </ul> <a id="clear-rating" title="" href="#">clear</a> <?php if((isset($rating) && !empty($rating) && $rating === '1') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '1')){ echo '<div class="rate-this" data-desc="a">a</div>'; } else if((isset($rating) && !empty($rating) && $rating === '2') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '2')){ echo '<div class="rate-this" data-desc="b">b</div>'; } else if((isset($rating) && !empty($rating) && $rating === '3') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '3')){ echo '<div class="rate-this" data-desc="c">c</div>'; } else if((isset($rating) && !empty($rating) && $rating === '4') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '4')){ echo '<div class="rate-this" data-desc="d">d</div>'; } else if((isset($rating) && !empty($rating) && $rating === '5') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '5')){ echo '<div class="rate-this" data-desc="e">e</div>'; } else if((isset($rating) && !empty($rating) && $rating === '6') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '6')){ echo '<div class="rate-this" data-desc="f">f</div>'; } else if((isset($rating) && !empty($rating) && $rating === '7') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '7')){ echo '<div class="rate-this" data-desc="g">g</div>'; } else if((isset($rating) && !empty($rating) && $rating === '8') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '8')){ echo '<div class="rate-this" data-desc="h">h</div>'; } else if((isset($rating) && !empty($rating) && $rating === '9') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '9')){ echo '<div class="rate-this" data-desc="i">i</div>'; } else if((isset($rating) && !empty($rating) && $rating === '10') || (isset($_post['rating']) && !empty($_post['rating']) && $_post['rating'] === '10')){ echo '<div class="rate-this" data-desc="j">j</div>'; } else { echo '<div class="rate-this" data-desc="rating">rating</div>'; } ?> </li> </ol> </fieldset> <fieldset> <ol> <li><input type="submit" name="submit" value="submit" id="submit" /></li> </ol> </fieldset> </form> css
* { margin: 0; padding: 0; border: 0; } #form{ padding: 2em 3% 0 3%; } #form ol li{ list-style: none; width: 100%; float: left; } .rating-choice{ width: 150px; height: 30px; float: left; margin-bottom: 1.8em; } .rating-choice input[type="radio"], .rating-choice label{ height: 0 !important; display: none !important; } .rating-choice li{ float: left !important; width: 15px !important; height: 30px !important; display: block !important; list-style-type: none !important; cursor: pointer !important; } .header{ font-size: 1em; display: inline-block; font-weight: bold; margin-bottom: 0.2em; width: 100%; } .eunrated{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -0px; width: 150px; height: 30px; margin: 0; display: inline-block; } .erating-1{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -30px; width: 150px; height: 30px; margin: 0; display: inline-block; } .erating-2{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -60px; width: 150px; height: 30px; margin: 0; display: inline-block; } .erating-3{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -90px; width: 150px; height: 30px; margin: 0; display: inline-block; } .erating-4{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -120px; width: 150px; height: 30px; margin: 0; display: inline-block; } .erating-5{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -150px; width: 150px; height: 30px; margin: 0; display: inline-block; } .erating-6{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -180px; width: 150px; height: 30px; margin: 0; display: inline-block; } .erating-7{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -210px; width: 150px; height: 30px; margin: 0; display: inline-block; } .erating-8{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -240px; width: 150px; height: 30px; margin: 0; display: inline-block; } .erating-9{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -270px; width: 150px; height: 30px; margin: 0; display: inline-block; } .erating-10{ background-image: url('https://s18.postimg.org/mvu1nzei1/stars150.png'); background-repeat: repeat-x; background-position: 0px -300px; width: 150px; height: 30px; margin: 0; display: inline-block; } #clear-rating{ margin-left: 1em; } .rate-this{ display: inline-block; width: 100%; margin-top: .5em; margin-bottom: 1em; }
Comments
Post a Comment