jQuery Multiple Star Rating system using Select Option dropdown - javascript

I found this simple jQuery Star rating system that I'd like to use, I am following http://jsfiddle.net/ code in my website and it's working fine for one star rating system not for multiple and I have multiple star rating system on one page in my website.
Here is jsfiddle link: http://jsfiddle.net/IrvinDominin/eeG86/
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
In above link I had like jQuery drop down but this is working only for one rating system on one page. My problem is I have multiple star rating system on one page.


Your first problem is the fact that you're using IDs, let's alter your markup for each select to use a class:
<select name="my_input" class="rating_simple">
Now we need to update your jQuery to reflect the change (using . instead of #).
Finally, in your change method, you refer to the star rating system using $(".webwidget_rating_simple"), but now we have multiple of these in the DOM, so we need to refer to the one adjacent to the current select that you're changing, using $(this).next(".webwidget_rating_simple").
So finally, your jQuery will look like this:
EDIT we actually need to setup each dropdown individually, this is to prevent the issue within the plugin that will select all dropdowns if you click on one star (it's better to alter the calling code than it is to update the plugin).
$(".rating_simple").each(function () {
$(this).webwidget_rating_simple({
rating_star_length: '5',
rating_initial_value: '',
rating_function_name: ''
});
});
$('.rating_simple').change(function () {
$(this).next(".webwidget_rating_simple").children("li").css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//nst.gif)');
$(this).next(".webwidget_rating_simple").children("li").slice(0,this.value).css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//sth.gif)');
});
DEMO


Try this. use different id and name.
<select name="my_input1" id="rating_simple1">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input2" id="rating_simple2">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input2" id="rating_simple2">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>

Related

Placeholder option on select element with default selected

Bit of a weird one, not sure if this is possible or not.
The system I am working on has a sort by select element which has 'Recommended Products' as the selected option on load as this is the order in which they'd like the products to be when a user hits the page, but they also want it to say 'Sort By' be default so that it's obvious this is a sort by element. Unfortunately I can't change the core HTML, I can only modify via jQuery/Javascript.
Just wondering if there was a way to do this with jQuery or not, as the method I've tried have interfered with the default select so far. Is it even possible to have a default placeholder as well as another option selected to dictate the load in state?
Cheers!
Current HTML
<select id="sort-by-select">
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>
Desired HTML
<select id="sort-by-select">
<option value="#" selected="" disabled="disabled">Sort By</option>
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>

As pointed out in the comments, you can only have one default/selected option. What you could do instead is add a label via jQuery, using .insertBefore():
$(function() {
var $label = $('<label>').text('Sort By:').attr('for', 'sort-by-select');
$label.insertBefore($('#sort-by-select'));
});
label { margin-right: 5px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort-by-select">
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>
Alternatively, you could prepend "Sort by" to every option in the select, using .text():
$(function() {
$('#sort-by-select option').text(function () {
return 'Sort by: ' + $(this).text();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort-by-select">
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>

JQuery Set selected option

I have two selection boxes, the default value is - and i want to pick something else for both, my first problem is both fields have dynamic id like prod-685209-Size so i'm having trouble accessing with id.
I have the following HTML:
<select class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
So i executed the following:
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
It worked on the front side, showing my new options but it didn't prompt the backend as it is not actually selecting the options. Backend works fine when i click to these options by hand, basically i need another solution to choose these options.

If I don't misunderstood your requirement then you need something like this. Just add two different ids to your select element and attach a change event listener. For example size and color
var s = document.getElementById("size");
var c = document.getElementById("color");
function getSize() {
sizeSelected = s.value;
console.log('size=' + sizeSelected);
}
function getColor() {
colorSelected = c.value;
console.log('color=' + colorSelected);
}
s.addEventListener('change', getSize);
c.addEventListener('change', getColor);
<select id="size" class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select id="color" class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>

You need to add .validate() after your dom commands to actually prompt the page.

select arrow style change when <select multiple="multiple" >

I have found plenty of tutorials on how to change the arrow colors of a however they don't work where multiple is set to multiple="multiple" and I have TWO arrows rather than one.
The website is textatradesman.com, The HTML is as follow:
<select id="select" multiple="multiple">
<option class="clicktoselect" value="">Click or Tap to Select</option>
<option value="http://www.Textabuilder.co.uk/">TextA Builder.co.uk</option>
<option value="http://www.Textaplumber.co.uk/">TextA Plumber.co.uk</option>
<option value="http://www.Textalocksmith.co.uk/">TextA Locksmith.co.uk</option>
<option value="http://www.Textahandyman.co.uk/">TextA Handyman.co.uk</option>
<option value="http://www.Textapainter.co.uk/">TextA Painter.co.uk</option>
<option value="http://www.Textacarpenter.co.uk/">TextA Carpenter.co.uk</option>
<option value="http://www.Textaplasterer.co.uk/">TextA Plasterer.co.uk</option>
<option value="http://www.Textatiler.co.uk/">TextA Tiler.co.uk</option>
<option value="http://www.Textabricklayer.co.uk/">TextA Bricklayer.co.uk</option>
<option value="http://www.Textaboilerrepair.co.uk/">TextA Boilerrepair.co.uk</option>
<option value=".">A - Z List of trades below....</option>
<option value="http://www.TextaApplianceRepair.co.uk/">TextA ApplianceRepair.co.uk</option>
<option value="http://www.textanacrepair.co.uk/">TextA ACRepair.co.uk</option>
<option value="http://www.textanalarmfitter.co.uk/">TextA AlarmFitter.co.uk</option>
<option value="http://www.Textaarchitect.co.uk/">TextA Architect.co.uk</option>
<option value="http://www.textaasphalter.co.uk/">TextA Asphalter.co.uk</option>
<option value="http://www.Textafrenchpolisher.co.uk/">TextA FrenchPolisher.co.uk</option>
<option value="http://www.Textagaragedoorfitter.co.uk/">TextA GarageDoorFitter.co.uk</option>
<option value="http://www.Textagardener.co.uk/">TextA Gardener.co.uk</option>
<option value="http://www.Textawindowfitter.co.uk/">TextA WindowFitter.co.uk</option>
</select>

Yes.
Simple <select> has one arrow. Multiple <select> has two arrows. What's the problem? If you don't like arrows, you can add a combo plugin like chosen or select2 from jquery.
You can explain better the problem and what you like to achieve.

Dynamically creating complex select objects in a web form

I am designing a webform that may capture anywhere from 1 to 150 rows of data giving definitions to what type of data is provided in a given row of a csv. These rows of data are all exactly same but I do not know how many of them will be used at the outset. I would like to start with one row and let the end user click an add button to add a new row. On the W-3 schools website there was a small tutorial on how to do this:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_create
but there are some problems I am seeing. first, it is buggy. If you go to the link and click the 'try it' button it will create a simple select dropdown. Wonderful! However, If you click it again it then creates a blank one, with every subsequent click creating the same. The other problem is that the select element I would need to use is huge (160 possible options) and uses optgroups to keep it separated and intuitive here is a sample:
<select name="data_value" id="data_value_selector">
<optgroup label="Entity Provider">
<option style="margin-left:12px;" value="name">Name</option>
<option style="margin-left:12px;" value="dba">DBA</option>
<option style="margin-left:12px;" value="facility_type">Facility Type</option>
</optgroup>
<optgroup label="Individual Provider"></optgroup>
<optgroup style="margin-left:12px;" label="Name">
<option value="full_name">Full Name</option>
<option value="name_prefix">Prefix</option>
<option value="first_name">First Name</option>
<option value="middle_name">Middle Name</option>
<option value="last_name">Last Name</option>
<option value="name_suffix">Suffix</option>
<option value="pro_suffix">Professional Suffix</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Birth Date">
<option value="full_birth_date">Full Birth Date</option>
<option value="day_of_birth">Day Of Birth</option>
<option value="month_of_birth">Month Of Birth</option>
<option value="year_of_birth">Year Of Birth</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Education">
<option value="education_institution">Education Institution</option>
<option value="education_city">Education City</option>
<option value="education_county">Education County</option>
<option value="education_state">Education State</option>
<option value="education_country">Education Country</option>
<option value="education_start_date">Education Start Date</option>
<option value="education_end_date">Education End Date</option>
<option value="graduation_date">Graduation Date</option>
<option value="degree" >Degree</option>
</optgroup>
<optgroup label="Provider Information"></optgroup>
<optgroup style="margin-left:12px;" label="Address">
<option value="full_address">Full Address</option>
<option value="address_1">Address 1</option>
<option value="address_2">Address 2</option>
<option value="address_city">City</option>
<option value="address_county">County</option>
<option value="address_state">State</option>
<option value="address_zip_code">Zipcode</option>
<option value="address_country">Country</option>
<option value="address_csz">City/State/Zip</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Phone">
<option value="phone_number">Number</option>
<option value="phone_extension">Extension</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Singular Values">
<option value="url">URL</option>
<option value="tin">TIN Number</option>
<option value="email">Email</option>
<option value="dea_registration_number">DEA Regisration Number</option>
<option value="npi_number">NPI Number</option>
<option value="upin_number">UPIN Number</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Provider Values">
<option value="provider_value">Provider Value</option>
</optgroup>
</select>
...And this is not even the entire select object. In the W-3 tutorial it builds each element independently as variables and adds them to each other individually. As you can see this might take some time to write and just seems very bulky. I would like to define the select object once and have it replicated that way (if possible) with every click. I imagine each newly created select object would need a unique name, but I am not 100% sure on that. If that is the case, is there a way to just append a 1 to the name of the first one and so on?

If you want something in jQuery you can use clone() function. See:
$("#data_value_selector").clone().appendTo("#select-box");
Demo.
I changed the name attribute to send a collection of the selected values. You can change this behaviour to a custom name in the click event, if you want:
var newSelect = $("#data_value_selector").clone();
newSelect.attr("name", "newName");
newSelect.appendTo("#select-box");
I hope this helps you.

You could use the cloneNode() method. Here is an example:
http://jsfiddle.net/JKNT4/7/
HTML
<button onclick="addRow()">Add Row</button>
<div id="parent_selector" class="data-row">
<select name="data_value[]">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div id="child_selectors"></div>
Javascript
function addRow() {
var itm = document.getElementById("parent_selector");
var cln = itm.cloneNode(true);
cln.removeAttribute("id");
document.getElementById("child_selectors").appendChild(cln);
}

Change fieldset via radio button

I have a form with 2 radio buttons and when either button is toggled it shows or hides a certain fieldset. The issue I have is because the fieldset is just hidden so when the form is submitted it still takes the first fieldsets values.
I have setup a fiddle to show how the form changes the fieldsets http://jsfiddle.net/hhdMq/1/
So when I select "Scale B" although you can change the correct values, when the form is submitted it takes the default values of Scale A.
<center>
<input type="radio" name="sellorlet" value="Yes" id="rdYes" checked="yes" />
<label for="rdYes">Scale A</label>
<input type="radio" name="sellorlet" value="No" id="rdNo" />
<label for="rdNo">Scale B</label>
</center>
<fieldset id="sell">
<center>
<select id="pricemin" name="min">
<option value="50000">Min Price</option>
<option value="50000">£50,000</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
</select>
<select id="pricemax" name="max">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
<option value="4000000">£4,000,000</option>
<option value="5000000">£5,000,000</option>
</select>
</center>
</fieldset>
<fieldset id="buy" style="display:none;">
<center>
<select id="lpricemin" name="min">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
<select id="lpricemax" name="max">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
</center>
</fieldset>
and the jquery used:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
My question is, how can I completely disable the first fieldset if Scale B is selected and likewise when Scale A is selected it will disable the second fieldset?
Many thanks

When submitting a form, you cannot have two inputs, selects, or textareas with the same name in the same form. Doing so will cause confusion and probably end up the wrong info being submitted. There are two ways you can fix this.
Method 1:
Change the
<select id="lpricemin" name="min">
<select id="lpricemin" name="lmin">
to
<select id="lpricemax" name="max">
<select id="lpricemax" name="lmax"> respectively.
This will allow you to handle the data from lmin and lmax and ensure you get the info from the second fieldset.
Method 2:
Put the second fieldset in a different form. Then just change the jQuery to show the forms instead of the fieldsets.

Changed the radio buttons now to a tabbed design so the form can be separated correctly. If anyone would like to know how the tabs are done they are here http://cssdeck.com/labs/fancy-tabbed-navigation-with-css3-and-jquery

Method 3 would be to change the switch the content of your select through Javascript rather than toggling through visibility. You can do that through:
function setMaxScale()
{
document.getElementById().innerHTML = "<option value="50000">Min Price</option>\
<option value="50000">£50,000</option>\
<option value="100000">£100,000</option>\
<option value="200000">£200,000</option>\
<option value="300000">£300,000</option>...";
}
An other clean solution would be to create your scales dynamically with a loop.

Categories

Resources