Instantly share code, notes, and snippets.

Embed
What would you like to do?
Quick hack / jQuery plugin to enable visual star ratings from Gravity Forms radio fields.
<!--
GRAVIY FORMS NOTES:
1. Create a “radio” group on any form
2. In the “appearance" tab, give the custom css class `js-gf-rating-stars`
3. The radio values should be in order from low -> high (1,2,3,4,5,etc…).
4. You can have as many stars as you want, it’s based off the number of radio elements in the group.
5. You could technically have as many groups of ratings stars as you want.
JS CONFIG:
This assumes you are using some iconfont, but the setup would work otherwise with some custom css.
Default assumes font awesome. To modify the icon font, just follow the below example:
$('.js-gf-rating-stars').gformsRatings({
iconClass: "class-name-for-your-icon-fonts-star-icon"
});
-->
<style type="text/css">
.gf-rating-star {
color: gray;
cursor: pointer;
font-size: 2em;
}
.gf-rating-star + .gf-rating-star {
padding-left: 4px;
}
.gf-rating-star-active {
color: orange;
}
</style>
<script>
(function($) {
$(document).ready(function() {
$('.js-gf-rating-stars').gformsRatings();
});
// The meat and potatoes
$.fn.gformsRatings = function( options ) {
// Setup options
var settings = $.extend({
'labels' : false,
'activeClass' : 'gf-rating-star-active',
'iconClass' : 'fa fa-star'
}, options);
return this.each(function() {
// Store the object
var $this = $(this),
$container = $('.ginput_container', $this),
$radioGroup = $('.gfield_radio', $this),
$radios = $('input[type="radio"]', $radioGroup),
$stars = null,
$currentIndex = null;
// Initialize
var init = function() {
$radioGroup.css('display', 'none');
$wrap = $('<div class="gf-rating-stars"></div>');
for (var i = 0; i < $radios.length; i++) {
var label = $radios.eq(i).siblings('label').text(),
value = $radios.eq(i).val(),
$star = $('<i class="js-gf-rating-star gf-rating-star"></i>');
$star
.addClass(settings.iconClass)
.data('index', i)
.data('value', value)
.data('label', label)
.attr('title', label)
.appendTo($wrap);
}
$wrap.appendTo($container);
$stars = $('.js-gf-rating-star');
// Star Interactions
$stars.on('hover', function() {
handleHover($(this));
}).on('click', function() {
handleClick($(this));
});
// Restore to currently checked next field
$wrap.on('mouseout', function() {
$checked = $radios.filter(':checked');
if (!$checked.length) {
$stars.removeClass(settings.activeClass);
} else {
highlight($currentIndex);
}
});
}
var highlight = function(index) {
$stars.filter(':gt(' + index + ')').removeClass(settings.activeClass);
$stars.filter(':lt(' + index + '), :eq(' + index + ')').addClass(settings.activeClass);
}
var handleHover = function(el) {
var index = el.data('index');
highlight(index);
}
var handleClick = function(el) {
var index = el.data('index');
$currentIndex = index;
$radios.eq(index).trigger('click');
}
// Kick it off
init();
});
};
})(jQuery);
</script>
@Jordan-Volcano

This comment has been minimized.

Jordan-Volcano commented Oct 20, 2017

Hi,

Great plugin for that star rating,

But i'm facing an issue.
I have various group of star on the same page, so the plugin only change for the first radio buttons group.
You can see a demo here : http://fiches-coop.adpiformation.fr/test-2#gf_1

I don't know why is it doing that, because i have a classe name personalized by group.
If you can help me, this would be great,

Thanks,

Jordan

@yvejr

This comment has been minimized.

yvejr commented Oct 31, 2018

THANK YOU SO MUCH! I spent hours trying create this myself. Thanks a lot for sharing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment