I have created some code in JavaScript that allows the user to add values to a dropdown menu and three arrays which the dropdown menu pulls and displays values from. I was wondering if there is a way to create a cookie or something that will keep the values that a user adds. Below is my code an here is the link to the working JSfiddle.
<html>
<head>
<title>Selected Index Design</title>
<script >
var arr1 = ["",0,6,0,15,4,0,1,0,0,17];
var arr2 = ["",0,5,19,3,26,3,25,0,0,24];
var arr3= ["",0,15,0,9,0,5,0,0,0,7];
function fill() {
var si = document.getElementById('dd').selectedIndex;
if (si !==0)
{
var a = arr1[si];
var b= arr2[si];
var c= arr3[si];
var x = document.getElementById("factor").value;
var d= a*x;
var e= b*x;
var f=c*x;
var g = d*4 + e*4 + f*9;
document.getElementById("val1").innerHTML=d;
document.getElementById('val2').innerHTML=e;
document.getElementById('val3').innerHTML=f;
document.getElementById('val4').innerHTML=g;
}
}
function addoption(){
var mySelect = document.getElementById('dd'),
newOption = document.createElement('option');
newOption.value = document.getElementById('addopt').value;
if (typeof newOption.innerText === 'undefined')
{
newOption.textContent = document.getElementById('addopt').value;
}
else
{
newOption.innerText = document.getElementById('addopt').value;
}
mySelect.appendChild(newOption);
var newone= document.getElementById('addone').value;
var newtwo= document.getElementById('addtwo').value;
var newthree= document.getElementById('addthree').value;
arr1.push(newone);
arr2.push(newtwo);
arr3.push(newthree);
}
</script>
</head>
<body>
<table id="table1">
<tr>
<th>dd</th>
<th>factor</th>
<th>v1</th>
<th>v2</th>
<th>v3</th>
<th>v4</th>
</tr>
<tr class="odd">
<td>
<form name = "dd">
<select name = "dd" id="dd" onchange = "fill()">
<option > a </option>
<option > b </option>
<option > c </option>
<option > d </option>
<option > e </option>
<option > f </option>
<option > g </option>
<option > h </option>
<option > i </option>
<option > j </option>
<option > k </option>
</select>
</form>
</td>
<td id="fac">
<form name="factor">
<select id="factor" onChange="fill();">
<option value=""></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>
</select>
</form>
</td>
<td id="val1"></td>
<td id="val2"></td>
<td id="val3"></td>
<td id="val4"></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td ></td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
<br><br>
<h3>Insert New data</h3>
<b>option<b>
<input type='text' value='' id='addopt'><br><br>
<b>array one</b>
<input type='text' value='' id='addone'><br><br>
<b>array 2</b>
<input type='text' value="" id='addtwo'><br><br>
<b>array 3</b>
<input type='text' value='' id='addthree'><br><br>
<button id="button" onclick="addoption()">add</button>
<div id='result'></div>
</body>
</html>
