We Keep Coding

Drop down select list modification

Thanks to lvoely people on this website, I am slowly getting this script to work as I intended. One thing I couldn't figure out is
how to get "State" (select2) to show "Select State" instead straight to options when Country (Select 1) is selected and, simililarly, ""City" to show "Select City" instead of straight to options when "State" (Select2) is selected).
how to make City (select3) to show "Select City" when previously selected "State" (select2) is unselected or changed to another State. Likewise for "State" when previously selected "Country" is unselected or changed to another Country (also for City to change to "Select City" when this happens)
$(function() {
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select2').val('');
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#select2').html(options).show();
});
$("#select2").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#select3').html(options).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="select2" style="inline">
<option value="">Select State</option>
<option data-value="india" value="orissa">Orissa</option>
<option data-value="india" value="telangan">Telangan</option>
<option data-value="america" value="usa">USA</option>
<option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3" style="inline">
<option value="">Select city</option>
<option data-value="orissa">Nal</option>
<option data-value="orissa">Mir</option>
<option data-value="telangan">Hyd</option>
<option data-value="telangan">Vija</option>
<option data-value="usa">ttt</option>
<option data-value="usa">ttt</option>
<option data-value="america">KRK</option>
<option data-value="america">MRK</option>
</select>

The lines
var options = $(this).data('options').filter('[data-value=' + id + ']');
$('#select2').html(options).show();
remove all options and replace them with only the ones that match the filter - obviously(?) the "please select" (value="") option does not match, so is not included.
You could adjust your filter to include it, or add the blank option to the select after.
$(function() {
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select2').val('');
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + '],[value=""]');
$('#select2').html(options).show();
});
$("#select2").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select3 option').clone());
}
var id = $(this).val();
if (id == "") {
$('#select3').val('');
return;
}
var options = $(this).data('options').filter('[data-value=' + id + '],[value=""]');
$('#select3').html(options).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="select2" style="inline">
<option value="">Select State</option>
<option data-value="india" value="orissa">Orissa</option>
<option data-value="india" value="telangan">Telangan</option>
<option data-value="america" value="usa">USA</option>
<option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3" style="inline">
<option value="">Select city</option>
<option data-value="orissa">Nal</option>
<option data-value="orissa">Mir</option>
<option data-value="telangan">Hyd</option>
<option data-value="telangan">Vija</option>
<option data-value="usa">ttt</option>
<option data-value="usa">ttt</option>
<option data-value="america">KRK</option>
<option data-value="america">MRK</option>
</select>
Refactored for easier calls
$(function() {
init();
reset("#select1", "#select2");
reset("#select1", "#select3");
$("#select1").change(function() {
var value = $(this).val();
if (value == "") {
reset("#select1", "#select2");
reset("#select1", "#select3");
}
else {
set("#select2", value);
reset("#select2", "#select3");
}
});
$("#select2").change(function() {
var value = $(this).val();
if (value == "") {
reset("#select2", "#select3");
}
else {
set("#select3", value);
}
});
function init() {
$("select").each(function() {
$(this).data('options', $(this).find('option').clone());
});
}
function reset(parent, child) {
var opts = $(parent).data("options").filter('[value=""]');
$(child).html(opts.clone());
}
function set(select, value) {
var options = $(select).data('options').filter(`[data-value='${value}'],[value=""]`);
$(select).html(options.clone()).show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="select2" style="inline">
<option value="">Select State</option>
<option data-value="india" value="orissa">Orissa</option>
<option data-value="india" value="telangan">Telangan</option>
<option data-value="america" value="usa">USA</option>
<option data-value="america" value="america">California</option>
</select>
<select name="select3" id="select3" style="inline">
<option value="">Select city</option>
<option data-value="orissa">Nal</option>
<option data-value="orissa">Mir</option>
<option data-value="telangan">Hyd</option>
<option data-value="telangan">Vija</option>
<option data-value="usa">ttt</option>
<option data-value="usa">ttt</option>
<option data-value="america">KRK</option>
<option data-value="america">MRK</option>
</select>

jQuery disable other dropdown values based on selected value of other dropdown

I have in my website 3 dropdowns and every dropdown has 8 options (1 to 8).
My goal is to disable the dropdown options based on what you've already selected in the other dropdowns, the total sum is maximum 8. So for example if you select 4 in the first dropdown you can only select 1 to 4 in the other 2 dropdowns.
If you select 8 in the first you can't select anything else from the others.
This is what I've tried:
$(".options select").change(function() {
var value1 = $("#input_1_5").val();
var value2 = $("#input_1_6").val();
var value3 = $("#input_1_7").val();
var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
var rest = 9-sum;
$("#input_1_6 > option").slice(rest,9).each(function() {
$(this).attr("disabled", true);
});
var rest2 = rest - 9
$("#input_1_7 > option").slice(rest2,9).each(function() {
$(this).attr("disabled", true);
});
});
The problem with this is that it only work the first time you select something, unfortunately.
EDIT: jsfiddle update https://jsfiddle.net/k7krx87L/4/
Thanks in advance!

You would use the following selector:
$("#input_1_6 option:gt(4)").prop("disabled", true);
This means disable all options in element with id #input_1_6 starting from 5th, the selector gt(4) means elements from index 4, indexes start from 0 in DOM.

<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script>
$(function () {
$('#input_1_5').on('change', function (){
var input_1_5 = $(this).val();
var input_1_6 = $('#input_1_6').val();
var input_1_7 = $('#input_1_7').val();
var cur_val;
cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
for(i=1;i<=8;i++)
{
if((i+parseInt(cur_val))<=8)
{
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false);
}
else
{
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true);
}
}
});
$('#input_1_6').on('change', function (){
var input_1_5 = $('#input_1_5').val();
var input_1_6 = $(this).val();
var input_1_7 = $('#input_1_7').val();
var cur_val;
cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
for(i=1;i<=8;i++)
{
if((i+parseInt(cur_val))<=8)
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false);
}
else
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true);
}
}
});
$('#input_1_7').on('change', function (){
var input_1_5 = $('#input_1_5').val();
var input_1_6 = $('#input_1_6').val();
var input_1_7 = $(this).val();
var cur_val;
cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
for(i=1;i<=8;i++)
{
if((i+parseInt(cur_val))<=8)
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false);
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false);
}
else
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true);
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true);
}
}
});
});
</script>
<select name="" id="input_1_5">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="" id="input_1_6">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="" id="input_1_7">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</body>
</html>
Hope this will help you.

Try this, it will work perfectly.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
}
});
});
</script>
</head>
<body>
<select name="project_manager[]">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="test_engineer[]" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>

how to disable dropdown options based on the previously selected dropdown values in multi select dropdown?

i am having two multi select dropdowns. those two dropdowns will have the same set of options (like monday, tuesday ,wednesday). now i want to have a validation where in one dropdown of these selected to some options(these are multi select dropdowns.), then the same options should not be available to select from the other dropdown.(means those should be disable.) here for multi select i am using one UI js plugin multi select dropdown javascript plugin.
<label for="shift_day_list_1">Day</label>
<input name="shift[day_list_1][]" type="hidden" value="" /><select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
<label for="shift_day_list_2">Day</label>
<input name="shift[day_list_2][]" type="hidden" value="" /><select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
this is my js code:
$(document).ready(function() {
$('#day_list_1').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
$('#day_list_2').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
});
how to implement this? please help me?

I've created a full commented snippet for you:
// when all the elements in the DOM are loaded
document.addEventListener('DOMContentLoaded', function() {
// get both lists and their HTMLOptionElement nodes
var list1 = document.getElementById('day_list_1'),
list2 = document.getElementById('day_list_2'),
options1 = list1.querySelectorAll('option'),
options2 = list2.querySelectorAll('option');
// add event handlers when the lists are changed to call the update function
$(list1).change(update).SumoSelect();
$(list2).change(update).SumoSelect();
function update(e) {
// when the lists are changed, loop through their HTMLOptionElement nodes
var other = (list1 === this) ? list2 : list1;
for (var i = 0; i < options1.length; i++) {
// options of list1 should be disabled if selected in list2 and vice-versa
this[i].selected ? other.sumo.disableItem(i) : other[i].selected ? void 0 : other.sumo.enableItem(i);
}
}
});
.form-control {
width: 130px;
height: 130px;
}
<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.min.js"></script>
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>

you can use normal js to achieve this.Use this following code on day_list_‌​1 on onChange event.
document.getElementById("day_list_2").options[document.getElementById("day_list_‌​1").selectedIndex].disabled = true;

Take a look at this jsfiddle
Click here for jsfiddle example
$("#theSelect option[value=" + value + "]").attr('disabled', 'disabled');
But before this, you need to add change event to the first select/dropdownlist. I hope you can take from here..

Try this:
$('#day_list_1').on('change', function() {
$('#day_list_2').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_2').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
$('#day_list_2').on('change', function() {
$('#day_list_1').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_1').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="day_list_1">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<label for="day_list_2">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>

First you have to change the id of "day_list_1", because as per HTML standard there is only one id in the entire HTML of any tag.
So you should do like this :
First one :
<select class="form-control" id="day_list_1" multiple="multiple"
name="shift[day_list_1][]">
Next one:
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
Code for validation :
function validate(){
var error = false;
var selected_val_1 = [];
$('#day_list_1 :selected').each(function(i, selected){
selected_val_1[i] = $(selected).text();
});
var selected_val_2 = [];
$('#day_list_2 :selected').each(function(i, selected){
selected_val_2[i] = $(selected).text();
});
$.each(selected_val_1, function( index, value ) {
if($.inArray(value, selected_val_2) != -1){
error = true;
}
});
$.each(selected_val_2, function( index, value ) {
if($.inArray(value, selected_val_1) != -1){
error = true;
}
});
if(error == true){
return true;
}else{
return false;
}
}
I hope it helps you . If you have any query regarding this logic then you can revert me .
Thanks.

It will work fine for 3 drop downs also
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
});
</script>
</head>
<body>
<select id="project_manager" name="project_manager[]" multiple="multiple">
<option></option>
<option id="option" value="1">Test 1</option>
<option id="option" value="2">Test 2</option>
<option id="option" value="3">Test 3</option>
</select>
<select id="test_engineer" name="test_engineer[]" multiple="multiple" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>

Displaying user Favourites from Local Storage

so i ran myself into a brick wall this morning. In short, i have created a webpage which reads Properties from a JSON file and lets the user filter through the searches using Type/Price/Bedrooms. I have tried to make a favourite list, however this is where the problem showed up. I can save the property ID into the local storage, however i cannot view that ID or use it to display the property that is linked to that ID.
This is my HTML code:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="staffscript.js"></script>
<body>
<p id="prop1">
This is prop 1 page
<button class="save">Save to Favourites</button>
</p>
<button id="viewFavourites">View Favourites</button>
<div id="placeholder"></div>
<label for="House">House</label>
<input type="radio" id="House" name="type" value="House"/>
<label for="Flat">Flat</label>
<input type="radio" id="Flat" name="type" value="Flat"/>
<label for="Any">Any</label>
<input type="radio" id="Any" name="type" value="Any"/>
<select id="minPrice" name="minPrice">
<option value="0">No Min Price</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>
<select id="maxPrice" name="maxPrice">
<option value="99999999999999">No Max Price</option>
<option value="100000">£100,000</option>
<option value="150000">£150,000</option>
<option value="200000">£200,000</option>
<option value="2500000">£250,000</option>
</select>
<select id="minBedrooms" name="minBedrooms">
<option value="0">No Min Bedrooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="maxBedrooms" name="maxBedrooms">
<option value="10">No Max Bedrooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select id="TimeAddedMonth" name="TimeAddedMonth">
<option value="Any">Any</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select id="TimeAddedDay" name="TimeAddedDay">
<option value="Any">Any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<button id="search">Search Staff</button>
</body>
And this is my JS File
$(document).ready(function() {
$("#search").on("click", function(){
$.getJSON('data.json', function(data) {
var Type = $("input:checked").val();
var minPrice = $("#minPrice").val();
var maxPrice = $("#maxPrice").val();
var minBedrooms = $("#minBedrooms").val();
var maxBedrooms = $("#maxBedrooms").val();
var timeAdded = $("#TimeAddedMonth").val();
var timeAddedDay = $("#TimeAddedDay").val();
var output = "<ul>";
for(var i in data.Properties) {
if ((Type == data.Properties[i].type) || ( Type == "Any" )){
if ((data.Properties[i].price >= minPrice) && (data.Properties[i].price <= maxPrice)){
if ((data.Properties[i].bedrooms >= minBedrooms) && (data.Properties[i].bedrooms <= maxBedrooms)){
if ((timeAdded == data.Properties[i].added.month) || ( timeAdded == "Any" )){
if ((timeAddedDay == data.Properties[i].added.day) || ( timeAddedDay == "Any" )){
output+="<li>" + data.Properties[i].type + "</li>";
output+='<img src="' + data.Properties[i].picture + '" />';
output+="<li>" + "£" + data.Properties[i].price + "</li>";
output+="<li>" + data.Properties[i].description + "</li>";
output+='<a href="' + data.Properties[i].url + '" > Full Description... </a>';
document.getElementById("placeholder").innerHTML = output;
}
}
}
}
}
}
output+="</ul>";
});
});
$(".save").on( "click", function() {
try {
$(this).attr('disabled',true);
//restoreArrayData();
var AddingHouses = $(this).closest("p").attr("id");
var myFavouriteProperties = JSON.parse(localStorage.getItem("favProperties"));
if (myFavouriteProperties == null) {
myFavouriteProperties = [];
}
myFavouriteProperties.push(AddingHouses);
localStorage.setItem("favProperties",JSON.stringify(myFavouriteProperties));
}
catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
console.log("Error: Local Storage limit Exceeded");
}
else {
console.log("Error: Saving to Local Storage");
}
}
});
});
$("#viewFavourites").on("click", function() {
console.log("Restoring array data from local storage");
myFavouriteProperties = JSON.parse(localStorage.getItem("favProperties"));
var output = "<ul>";
if(myFavouriteProperties != null) {
for (var i = 0; i < data.Properties.length; i++) {
for (j = 0; j < myFavouriteProperties.length; j++) {
if(data.Properties[i].id == myFavouriteProperties[j])
{
output+="<li>" + data.Properties[i].type + "</li>";
output+='<img src="' + data.Properties[i].picture + '" />';
output+="<li>" + "£" + data.Properties[i].price + "</li>";
}
}
}
}
output+="</ul>";
document.getElementById("placeholder").innerHTML = output;
});
Everything works apart from View Favourites function
NOTE: I can see my FireFox local storage, so it does save the ID in an array. I jus dont understand why its not displaying it

You can access the localStorage object simply with the global var localStorage
Personally I use this snippet when I use it:
// Retrieve your data from locaStorage
var saveData = JSON.parse(localStorage.saveData || null) || {};
// Store your data.
function saveStuff(obj) {
saveData.obj = obj;
// saveData.foo = foo;
saveData.time = new Date().getTime();
localStorage.saveData = JSON.stringify(saveData);
}
// Do something with your data.
function loadStuff() {
return saveData.obj || "default";
}
if (saveData.time) alert("You were here: " + saveData.time);
saveStuff("Stuff");

#dsfq's comment is correct. data is not defined within the #viewFavourites click function. The for loop never runs because there are no items to go over.
Assign data to a variable in the parent scope ($(document).ready() or the like) to access it in other functions.

Javascript add textfield button doesn't work properly

I have made the following code
HTML:
<form method="post" id="myemailform" name="myemailform" action="form-to-email.php">
<div id="form_container">
<label class="description" for="pax">Number:</label>
<div>
<select class="select small" id="pax" name="pax">
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
</select>
</div>
<label class="description">ID:</label>
<input type='text' id="idpl" class="id-text-len" name='ids1' placeholder="ID #1">
<input class="btn btn-primary" type='button' id='btnMore' value='Add Ids'>
</form>
js:
jQuery(function ($) {
$('#btnMore').click(function () {
var form, fields, newField;
var e = document.getElementById("pax");
var strUser = e.options[e.selectedIndex].text;
form = $("#myemailform");
for (var i = 1; i < strUser; i++) {
fields = form.find("input[name^='ids']");
newField = $(fields[0]).clone();
newField.attr('name', 'ids' + (fields.length + 1));
newField.attr('placeholder', 'ID #' + (fields.length + 1));
newField.insertAfter(fields.last());
}
});
});
You can see the jsfiddle .
What i want is when i click on the button to add fields, not add more on the existing but new.
I mean e.g. first time i click 10 and then add, as a results i'll get 10 textfields. Then if i click 14 i don't want to get 10+14=24 textfields but 4 more, i want 14textfields.
I haven't made it up to do that. Please someone help me by code, in general i know why that's happening but i don't know how to solve that.

Try
jQuery(function($) {
var form = $("#myemailform");;
$('#btnMore').click(function() {
var fields, newField;
var opt = parseInt($('#pax').val());
var len = opt - $('.id-text-len').length;
if(len> 0){
for (var i = 0; i < len; i++) {
fields = form.find(".id-text-len");
newField = $(fields[0]).clone();
newField.attr('name', 'ids' + (fields.length + 1));
newField.attr('placeholder', 'ID #' + (fields.length + 1));
newField.val('');
newField.insertAfter(fields.last());
}
} else {
form.find(".id-text-len:gt("+ (opt - 1) +")").remove()
}
});
});
Demo: Fiddle

how about this
http://jsfiddle.net/7QUea/3/
i think this is the one you need
just one more line
$("input[name^='ids']").not("input[name='ids1']").remove();
jQuery(function($) {
$('#btnMore').click(function() {
$("input[name^='ids']").not("input[name='ids1']").remove();
var form, fields, newField;
var e = document.getElementById("pax");
var strUser = e.options[e.selectedIndex].text;
form = $("#myemailform");
for (var i = 1; i < strUser; i++) {
fields = form.find("input[name^='ids']");
newField = $(fields[0]).clone();
newField.attr('name', 'ids' + (fields.length + 1));
newField.attr('placeholder', 'ID #' + (fields.length + 1));
newField.insertAfter(fields.last());}
});
});

Changed a few things (now it is more jQuery styled):
jQuery(function ($) {
$('#btnMore').click(function () {
var strUser = $("#pax").val();
var form = $("#myemailform");
var fields = form.find("input[name^='ids']");
for (var i = 0; i < (strUser - fields.length); i++) {
var newField = $(fields[0]).clone();
newField.attr('name', 'ids' + (fields.length + 1 + i));
newField.attr('placeholder', 'ID #' + (fields.length + 1 + i));
form.find("input[name^='ids']").last().after(newField);
}
});
});
Check here: http://jsfiddle.net/7QUea/4/