We Keep Coding

Javascript issue with selector session storage

Hello so I added some javascript to keep selection stored when page is reloaded in my select menu , but the issue is when I load the page for the first time nothing appears in my select menu (First choice of the select menu)
what appears
window.onload = function() {
var selItem = sessionStorage.getItem("SelItem");
$('#date').val(selItem);
}
$('#date').change(function() {
var selVal = $(this).val();
sessionStorage.setItem("SelItem", selVal);
});
<label class="op" for="date">Periode : </label>
<select id="date">
<option value="toutes">Toutes</option>
<option value="2019">Année en cours</option>
<option value="2018">Année pécédente</option>
<option value="2017">Année -2</option>
<option value="2016">Année -3</option>
<option value="2015">Année -4</option>
</select>
<br/><br/>
<input type="hidden" name="date" id="date1" class="datepicker w100" value="2015-01-01"type="date" placeholder="Du jj/mm/aaaa"> <input type ="hidden"name="date2" id="date2" value="2026-12-31"class="datepicker w100" type="date" placeholder="Au jj/mm/aaaa">
<br/>

So only set the value if there is something in storage.
if (selItem) $('#date').val(selItem);

Assign value of radio button based on dynamic number of user selected values

After a user makes his/her selections of the five select dropdowns, I want to set the value of a radio button from field "radio_btn_name" based on up to 3 of the users selections. Think of each object as a "rule". If a combination of selections matches that rule, give "radio_btn_x" the "output" value.
In Part 1 of my question I achieved my desired result when the number of "selected_option_names_" is equal to the number of select dropdowns. However, I need to be able to check for a dynamic number of dropdowns against only up to 3 user selections.
I imagine the solution will be drastically different from part 1, as a result I feel a new question is warranted.
JSFiddle
$(document).ready(function() {
// A successful solution would render all these rules true, radio_button_4,
// radio_button_8 and radio_button_1 would get their respective new values
var objs = [{
selected_option_name_1: "select_1",
selected_option_name_2: "",
selected_option_name_3: "",
selected_option_value_1: "1-1",
selected_option_value_2: "",
selected_option_value_3: "",
radio_btn_name: "radio_button_4",
output: "5000-R"
}, {
selected_option_name_1: "select_1",
selected_option_name_2: "select_2",
selected_option_name_3: "select_5",
selected_option_value_1: "1-1",
selected_option_value_2: "2-2",
selected_option_value_3: "5-2",
output: "10000-R",
radio_btn_name: "radio_button_8"
}, {
selected_option_name_1: "select_4",
selected_option_name_2: "",
selected_option_name_3: "",
selected_option_value_1: "4-1",
selected_option_value_2: "",
selected_option_value_3: "",
output: "15000-R",
radio_btn_name: "radio_button_1"
}];
// Solution for part 1. Will only work if number of dropdowns == "selected_option_name_"
$("#submit").on("click", function() {
$("#wrapper").find("input[type='radio']").each(function(i, o) {
var btn = $(this);
var btn_name = $(this).attr("name");
$.each(objs, function(index, rule) {
if (btn_name == rule.radio_btn_name) {
if(rule.selected_option_value_1 == $('#select_1').val()
&& rule.selected_option_value_2 == $('#select_2').val()
&& rule.selected_option_value_3 == $('#select_3').val()) {
btn.val(rule.output);
console.log(rule.output);
}
}
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div>
<select class="group_1" name="select_1">
<option value=""></option>
<option value="1-1">Dropdown 1-1</option>
<option value="1-2">Dropdown 1-2</option>
<option value="1-3">Dropdown 1-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_1" value="r()">
<input type="radio" name="radio_button_2" value="o()">
<input type="radio" name="radio_button_3" value="n()">
</div>
<div>
<select class="group_1" name="select_2">
<option value=""></option>
<option value="2-1">Dropdown 2-1</option>
<option value="2-2">Dropdown 2-2</option>
<option value="2-3">Dropdown 2-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_4" value="r()">
<input type="radio" name="radio_button_5" value="o()">
<input type="radio" name="radio_button_6" value="n()">
</div>
<div>
<select class="group_1" name="select_3">
<option value=""></option>
<option value="3-1">Dropdown 3-1</option>
<option value="3-2">Dropdown 3-2</option>
<option value="3-3">Dropdown 3-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_7" value="r()">
<input type="radio" name="radio_button_8" value="o()">
<input type="radio" name="radio_button_9" value="n()">
</div>
<br>
<div>
<select class="group_1" name="select_4">
<option value=""></option>
<option value="4-1">Dropdown 4-1</option>
<option value="4-2">Dropdown 4-2</option>
<option value="4-3">Dropdown 4-3</option>
</select>
</div>
<br>
<div>
<input type="radio" name="radio_button_10" value="r()">
<input type="radio" name="radio_button_11" value="o()">
<input type="radio" name="radio_button_12" value="n()">
</div>
<br>
<div>
<select class="group_1" name="select_5">
<option value=""></option>
<option value="5-1">Dropdown 5-1</option>
<option value="5-2">Dropdown 5-2</option>
<option value="5-3">Dropdown 5-3</option>
</select>
</div>
<br>
<button id="submit">Submit</button>
</div>

It turns out the solution wasn't as far off as I thought. I just needed to add an input type hidden with name equal to empty string to account for any empty strings in my objects.
I also updated my jQuery to find the value of names vs id's from part one of my post.
Updated fiddle
$(document).ready(function() {
$("#submit").on("click", function() {
$("#wrapper").find("input[type='radio']").each(function(i, o) {
var btn = $(this);
var btn_name = $(this).attr("name");
$.each(objs, function(index, rule) {
if (btn_name == rule.radio_btn_name) {
if(rule.selected_option_value_1 == $('[name="'+rule.selected_option_name_1 + '"]').val()
&& rule.selected_option_value_2 == $('[name="'+rule.selected_option_name_2 + '"]').val()
&& rule.selected_option_value_3 == $('[name="'+rule.selected_option_name_3 + '"]').val()) {
btn.val(rule.output);
console.log(rule.output);
}
}
});
});
});
});
<div>
<input type="hidden" name="" value="">
<button id="submit">Submit</button>
</div>

submit to url with multiple input of form

I have a form with 3 multiple choice questions. The questions lead to one of 5 pages (url) depending on the selected choices of each question.
I searched here for a javascript that works with a similar situation yet the script doesn't work in my site.
My form code is:
<fieldset id="second">
<h3 class="mbot_0"><label>How many miles does your auto have</label>
</h3>
<select id="mileage" data-hint="" name="mileage">
<option id="m1" selected value="0-15,000">
0-15,000
</option>
<option id="m2" value="15,001-30,000">
15,001-30,000
</option>
<option id="m3" value="30,001-65,000">
30,001-65,000
</option>
<option id="m4" value="65,001-100,000">
65,001-100,000
</option>
<option id="m5" value="100,000+">
100,000+
</option></select>
<h3 class="mbot_0"><label>Does your car have a GDI engine?</label></h3>
<select id="gdi" data-hint="" name="gdi">
<option id="" selected value="--">Select one
</option>
<option id="" value="yes">Yes</option>
<option id="" value="no">No</option>
</select>
<h3 class="mbot_0"><label>Do you use top-tier fuel when you fill up?</label></h3>
<select id="fuel" >
<option id="" selected value="--">Select one
</option>
<option id="" value="yes">Yes
</option>
<option id="" value="no">No
</option>
</select>
<input id="pre_btn1" onclick="prev_step1()" type="button" value="Previous">
<input type="submit" id="calculate"
value="Calculate" onclick="replace()"/>
</fieldset></form>
and My script is
function replace() {
if (document.getElementById('mileage').value == '0-15,000' && document.getElementById('gdi').value == 'yes' && document.getElementById('fuel').value == 'yes') {
window.location = 'http://www.arnolfodesign.com/clients/itw_carbonator/outcome01.html';
} else if (document.getElementById('mileage').value == '0-15,000' && document.getElementById('gdi').value == 'yes' && document.getElementById('fuel').value == 'no') {
window.location = 'http://www.arnolfodesign.com/clients/itw_carbonator/outcome02.html';
}
}
</script>
I'm learning javascript as I go. Please, what am I missing in the script?

I've got the script to work. I stripped out the commas in the "mileage" values and also replaced the submission button from type=submit to type=button. Maybe there was something overriding the submit function? Also changed the script function from "replace()" to "calc()". Unclear which item directly effected the script but it now works as I expected.

Multiple option selects to create unique shopping cart SKU

Is there a way of inserting a string into a field, whereby the string is predetermined depending on what options are selected from two drop down menus?
This is so that a combination of two drop down menus creates a unique SKU for that product, and that string referred to as a SKU is inserted into the input value of the item_number variable and then passed to paypal during checkout.
I will use the example of selling tee-shirts. So the combinations will be black/small, black/large, white/small, & white/large. And each will have a unique SKU of TEESHIRT-BS, TEESHIRT-BL, TEESHIRT-WS & TEESHIRT-WL respectively.
Here is my HTML for the option selects, however, I think I need some JavaScript to insert the SKU into the value field.
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input type="hidden" name="item_number" value="">

Try the following:
var sizeList = document.getElementById('size');
var colorList = document.getElementById('color');
sizeList.onchange = function() {
generateSku();
};
colorList.onchange = function() {
generateSku();
};
function generateSku() {
var selectedSize = sizeList.options[sizeList.selectedIndex].text;
var selectedColor = colorList.options[colorList.selectedIndex].text;
document.getElementById('sku').value = 'TEESHIRT-' + selectedColor.charAt(0).toUpperCase() + selectedSize.charAt(0).toUpperCase();
}
generateSku();
<input type="hidden" name="on0" value="colour"><b>select colour</b></><br>
<select id="color" name="os0" >
<option value="black">black</option>
<option value="white">white</option>
</select>
<br>
<br>
<input type="hidden" name="on1" value="size"><b>select size</b></><br>
<select id="size" name="os1" >
<option value="small">small</option>
<option value="large">large</option>
</select>
<!-- SKU-->
<input id="sku" name="item_number" value="">

dropdown changes depending of text field value

I am not very good with javascript and I dont even know if this is possible.
Im trying to get a dropdown to be selected depending on the value of a text field
I have the following text field which is calculated by adding the Number of Adults and Children together.
<input type="text" name="Total" id="Total" onfocus="this.blur()"/>
What I would like to do is depending on the value of the Total have the following dropdown change .ie if Total is less than 10 have the dropdown show 1 Hr, between 10 and 20 show 2 Hrs etc
<select name="Duration">
<option value="1">1 Hr</option>
<option value="2">2 Hrs</option>
<option value="3">3 Hrs</option>
<option value="4">4 Hrs</option>
</select>

I think this is the general direction that you would need to go (I am only including the case where the total is less than 10, so you would need to add the other situations to the if statement):
<input type="text" name="Total" id="Total" onfocus="this.blur()" onblur="if(this.value < 10) { document.getElementById('totalDropDown').value = 1; }"/>
<select name="Duration" id="totalDropDown">
<option value="1">1 Hr</option>
<option value="2">2 Hrs</option>
<option value="3">3 Hrs</option>
<option value="4">4 Hrs</option>
</select>

you can look at this fiddle: http://jsfiddle.net/knnw8/1/
I would start with
<input type="text" name="Total" id="Total" onChange="fillCombobox(this)"/>
and then assign the options you want in the combobox as you can see in the fiddle
(you can ofcourse also use onBlur instead of onChange)
edit: I've updated the fiddle a little bit more to your needs

Try this i think this is what you need
<script type="text/javascript">
function chkVal(ele){
var val = ele.value;
console.log(val);
if(val < 10){
$('#totalDropDown').val(1)
}
else if(val <= 20){
$('#totalDropDown').val(2)
}
else if(val <= 30){
$('#totalDropDown').val(3)
}
else if(val > 30){
$('#totalDropDown').val(4)
}
}
</script>
<input type="text" onkeyup="chkVal(this)"/>
<select name="Duration" id="totalDropDown">
<option value="1">1 Hr</option>
<option value="2">2 Hrs</option>
<option value="3">3 Hrs</option>
<option value="4">4 Hrs</option>
</select>