· 7 years ago · Jan 18, 2019, 06:24 AM
1[{
2 "Item Code": "1001",
3 "Item Name": "Beverages",
4 },
5 {
6 "Item Code": "2003",
7 "Item Name": "Juices",
8 },
9 {
10 "Item Code": "1004",
11 "Item Name": "Soups",
12 },
13 {
14 "Item Code": "2005",
15 "Item Name": "Cookies",
16 },
17]
18
19<!DOCTYPE html>
20<html>
21<head>
22<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
23
24<script>
25
26$(document).ready(function() {
27 //clear local storage key/value pairs from the last time the page loaded.
28 localStorage.clear();
29 $('#CategoryName').on('change', function() {
30 var selectedOption = this.value;
31 console.log(selectedOption);
32 //create a quantity input field for this category (this is all your code here
33 var quantityField = document.createElement("input");
34 quantityField.style.border = "none";
35 quantityField.style["text-align"] = "center";
36 quantityField.setAttribute('name', 'Quantity');
37 //add an id attribute to the field so we can target it with document.getElementById
38 //to listen for changes in its value.
39 quantityField.setAttribute('id', 'Quantity');
40 quantityField.setAttribute('autocomplete', 'on');
41 //don't set the value attribute here yet as we want to check local storage first.
42 quantityField.setAttribute('type', 'number');
43 quantityField.setAttribute('required', 'required');
44 quantityField.classList.add("dataReset");
45 //check localStorage to see if a quantity value exists for the selected option.
46 //selected option names include: juce,rice,roti (so these will be the keys)
47 if(localStorage.getItem(selectedOption) === null){
48 //this selectedOption key does NOT exist in local storage
49 //therefore the user has not changed the value of this category's quantity input field yet so set it to 0.
50 quantityField.setAttribute('value', '0');
51 }else{
52 //this selectedOption key DOES exist in local storage so get the value from local storage and
53 //set the value attribute of our quantity input field to it
54 //Note: this value is the last value the user selected when visiting this category previously.
55 var quantityFromLocalStorage = localStorage.getItem(selectedOption);
56 quantityField.setAttribute('value', quantityFromLocalStorage);
57 }
58 //append the quantity field (or in your full code you are appending the table here) to our document.
59 var divContainer = document.getElementById("HourlysalesSummary");
60 divContainer.innerHTML = "";
61 divContainer.appendChild(quantityField);
62
63 //our quantity field now exists in the document so we can target it in order to add a listener
64 //to check when any changes are made.
65 //(Note: Its important to only add the listener after the HTML has been appended to the document.)
66 var quantityInputField = document.getElementById('Quantity');
67 quantityInputField.addEventListener("input", function(){
68 //log the current value of the input field to check it.
69 console.log(quantityInputField.value);
70 //each time a user selects a new quantity for this category we store it in local storage as follows.
71 //The key will be the selectedOption name e.g juce, rice or roti and the value will be the quantity selected.
72 localStorage.setItem(selectedOption, quantityInputField.value);
73 });
74 });
75
76
77});
78
79
80</script>
81</head>
82<body>
83
84<div class="container">
85 <form action="www.google.com" id="form1">
86 <div class="row position-relative">
87 <div class="col-lg-4">
88 <h5 id="commonHeader">Category</h5>
89 <select class="test" id="CategoryName" name="categoryCode">
90 <option>All</option>
91 <option>juce</option>
92 <option>rice</option>
93 <option>roti</option>
94 </select>
95 </div>
96 </div>
97 <hr style="border: 1px solid black">
98 <div class="table-responsive">
99 <table class="w-100" id="HourlysalesSummary"></table>
100 </div>
101 </form>
102</div>
103
104
105</body>
106</html>