We Keep Coding

Loading local storage items for multiple dropdown lists

I'm trying to make a table with multiple dropdowns, which all have the same values but different ID's which should retain values even after refreshing or closing and opening the page again.
It has to run on a local computer without php or any server sided scripting and without any addons, so standard browser configuration.
I've searched a lot on google and found:
local storage for multiple select option dropdowns
which helps with keeping the data, but as soon as I close the browser and load it again. The values are gone.
Can somebody help me figure this out?
Thanks in advance.
example of the code as requested:
<select name="1" id="1" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
<select name="2" id="2" class="test">
<option value="-">-</option>
<option value="Mike">Mike</option>
<option value="Steven">Steven</option>
<option value="Sacha">Sacha</option>
<option value="Wilfried">Wilfried</option>
<option value="Kevin">Kevin</option>
<option value="Stefan">Stefan</option>
<option value="Koen">Koen</option>
<option value="Wasil">Wasil</option>
</select>
this is the js file.
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});

Good that you added some code :) I've tested exactly your code and it worked. Check this Fiddle:
https://jsfiddle.net/96hrybu2/
Your problem might be that you are not binding the elements correctly.
Try to change your code to this:
$(document).ready(function(){
$('.test').change(function() {
localStorage.setItem(this.id, this.value);
}).val(function() {
return localStorage.getItem(this.id)
});
});
What seems to be happening is that he tries to bind those elements faster then they are rendered in the DOM.
Either that or your browser doesnt support localStorage.
Let me know if it helped.
Also check your console for some kind of errors and don't forget to add the jQuery library but I guess you know that :P
Cheers.

Javascript Calculation script to calculate form input value's then save as hidden input for page2.php

So ive been spending the last week trying to figure out what im doing wrong.. i have tried to use several other scripts posted to other stack overflow users but can not seem to get anything to do what i need it to do, im still learning html, php and java script so everything is taking me a little while, so any help, advice or input is greatly appreciated.
So in my form i have several input fields that are selection fields, here is some for example:
</div>
<div class="form-field">
<label class="frm">*Approx Property Value</label>
<select name="fldAPV" title="Approx_Property_Value" id="fldAPV" class="form-action select-details">
<option value="100" selected="selected">Select value</option>
<option value="100">£0 - £100,000</option>
<option value="200">£100,001 - £200,000</option>
<option value="300">£200,001 - £300,000</option>
<option value="400">£300,001 - £400,000</option>
<option value="500">£400,001 - £500,000</option>
<option value="600">£500,001 - £600,000</option>
<option value="700">£600,001 - £700,000</option>
<option value="800">£700,001 - £800,000</option>
<option value="9000">£800,001 - £900,000</option>
<option value="1Million">£900,001 - £1,000,000</option>
</select>
</div>
<div class="form-field">
<label class="frm">*Number of Bedrooms</label>
<select name="fldNOBEDS2" title="Number_Of_Bedrooms" id="fldNOBEDS2" class="form-action select-details">
<option value="Not_Sure" selected="selected">I'm Not Sure</option>
<option value="1">1 Bedroom</option>
<option value="2">2 Bedrooms</option>
<option value="3">3 Bedrooms</option>
<option value="4">4 Bedrooms</option>
<option value="5">5 Bedrooms</option>
<option value="6">6 Bedrooms</option>
<option value="7">7 Bedrooms</option>
<option value="8+">8 Bedrooms +</option>
</select>
</div>
<div class="form-field">
<label class="frm">*Reason for Survey</label>
<select name="fldRFS" title="Reason for Survey" id="fldRFS" class="form-action select-details">
<option value="Not-Sure" selected="selected">Not Sure</option>
<option value="Selling">Selling</option>
<option value="Buying">Buying</option>
<option value="Other-Reason">Other Reason</option>
</select>
Now what i am trying to achieve is to have a javascript that will calculate the input value on each field the user selects his/hers answer.. My initial thoughts was to do it with each value="" having a default price value so for example the reason for survey fields, instead of saying "Not-Sure" or "Buying" they will say "50" or "100" to represent the cost of the service.
Is it possible to have a script that would understand code like this for example:
Buying
The reason i say this is i am hoping the value's don't make things confusing, if not then i am happy to use the value="50" for example to determine what the overall cost of the service will be. I guess its the client basically putting together their own package.
The most important part of the script is to make the calculation hidden, so when clicking (View Quote) the form will submit the data either by $_GET or $_POST to page2.php where the client can view their quoted price.
I really hope i have not confused everyone! i see people post very small posts and they seem to get it on the head in one, i can not stress enough i am still learning and we all started somewhere :) This is for my own personal website and one hopes some kind experienced member can help me out, anything is much appreciated as i have spent 6 days trying to figure this out, Thanks!
King Regards

PHP on page2.php:
<?php
If(isset($_POST['submit'])){
$Quote = $_POST['fldST'] + $_POST['fldAPV'] //... For all nummeric Fields
Switch ($_POST['fldPropertyType']){
/* Use the Switch Statement if you want to compare the same variable
(or expression) with many different values, and execute a different piece of code
depending on which value it equals to. */
case 'Semi':
$Quote = $Quote + 20; //Replace 20 wit you're Value
case 'Terraced':
$Quote = $Quote + 50;
//... For all cases
}
//Other Code and Page Content
echo $Quote;
}
else{
//ERROR Page was accessed without filling the form in.
}
?>
I hope this gives you an good Idea how to do it. Not every Client has Javascript enabeld and you don't know about their Maschine Performance. ist the better way to calculate via PHP.
Importend: NEVER echo/print/use POST/GET Variables direktly! Thats a big leck of Security. Always Filter your User Inputs to prevent Cross-Site-Scripting (XSS)
http://phpsec.org/projects/guide/2.html
http://resources.infosecinstitute.com/website-hacking-part-vi-input-validation-filtering-php/
http://phpsec.org/projects/guide/1.html#1.4.3
<---------------------------------------------- Update ----------------------------------->
When using the code above, Dreamweaver is saying that
Switch ($_POST['fldPropertyType']){
has a syntax error. Would this affect the script running before I add all the values or is it something simple to rectify?
Thanks

HTML:
<form>
<select>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
<button type="submit">continue</button>
</form>
Javascript:
$('button').on('click', function(e) {
e.preventDefault();
var total = 0;
$('select').each(function(){
total += Number($(this).val());
});
$.ajax({
type: 'POST',
url: 'page2.php',
data: { total: total },
dataType: 'json',
success: function(result){
console.log(result);
}
});
});
PHP:
header('Content-Type: application/json');
echo JSON_encode($_POST['total']);

How to grab values from a multiple select dropdown menu and send them along with POST?

I have this type of multiple select dropdown menu I want to add to my form
<form>
...
<select id="example2" multiple="multiple">
<div id="otherChoices">
<optgroup label="Academic" class="blah">
<option value="Engineering" class="blah">Engineering</option>
<option value="Humanities">Humanities</option>
<option value="Life_Sciences">Life Sciences</option>
<option value="Social Sciences_Sciences">Social Sciences</option>
</optgroup>
<optgroup label="Clubs">
<option value="Event">Event </option>
<option value="Meeting">Meeting</option>
<option value="Performance">Performance</option>
</optgroup>
<optgroup label="Personal">
<option value="Discussion">Discussion</option>
<option value="Event">Event</option>
<option value="Food">Food</option>
<option value="Hangout">Hangout</option>
<option value="Trip">Trip</option>
</optgroup>
</div>
</select>
</form>
But I'm not sure what type of input form this is (it's a bootstrap created form but not of a valid input type), so I'm not sure exactly how to send the parameters via a post request. Currently, I'm using jquery to grab the selected values and and fill in a hidden form. Is there a better way about this?

You made a few mistakes in your HTML:
This is the corrected version:
<form action="test2.php" method="post">
<select name="example2[]" id="example2" multiple="multiple" >
<div id="otherChoices" name="hello">
<optgroup label="Academic" class="blah">
<option value="Engineering" class="blah">Engineering</option>
<option value="Humanities">Humanities</option>
<option value="Life_Sciences">Life Sciences</option>
<option value="Social Sciences_Sciences">Social Sciences</option>
</optgroup>
<optgroup label="Clubs">
<option value="Event">Event </option>
<option value="Meeting">Meeting</option>
<option value="Performance">Performance</option>
</optgroup>
<optgroup label="Personal">
<option value="Discussion">Discussion</option>
<option value="Event">Event</option>
<option value="Food">Food</option>
<option value="Hangout">Hangout</option>
<option value="Trip">Trip</option>
</optgroup>
</div>
</select>
<button type="submit">Submit</button>
</form>
EDIT:
This is what I corrected:
I added a name value to the select with square brackets to show its an array
I added a method type to the form: method="post"
Submit button
You can then access the individual items like this:
echo $_POST["example2"][0];
EDIT: Sorry I realised this is Node.js That one was for PHP. See this link for how to get post variable in node js:
How do you extract POST data in Node.js?

When you submit a form, it passes an array to the next page, specified in the form's action attribute. If one isn't set, it will submit to the current URL.
By default, forms will submit using GET unless set the method attribute to post.
So, change your <form> tag to the following:
<form method="post" action="test.php">
And give your select a name, like name="test_select".
And then your test.php can look like this:
<?php
print_r($_POST);
(no need for a ?> closing tag)
This will print the $_POST array and you'll see how multiple selects work.

I want to create an instant filter using jquery or javascript

Problem is, I don't know either language. I'm pretty good at modifying existing scripts but I can't seem to find any that suit my needs.
I want to be able to have two drop down menus and a button. From the two dropdowns lets say you can select variable A and variable B, then when the button is pressed, I want it to show an item from a list which satisfies both A and B (preferably without a refresh or need for PHP).
Are there any existing scripts like this which I can modify or is it too much to do without knowing the language?
Thanks.

Something like this. Insted of alerts put your filtering code.
<body>
<script>
function onSelect(){
var selectmenu1=document.getElementById("select1");
var selectmenu2=document.getElementById("select2");
alert("First value: " + selectmenu1.options[selectmenu1.selectedIndex].value);
alert("Second value: " + selectmenu2.options[selectmenu2.selectedIndex].value);
}
</script>
<select id="select1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" onclick="onSelect();" value="Submit!"/>
</body>

dynamic dropdown list ( select boxes )

Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.

First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com

Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.