Keep values pushed into array using javascript

StackOverflow https://stackoverflow.com/questions/17957166

Question

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>
Was it helpful?

Solution

You might be interested by something like HTML5 Offline Storage: http://www.html5rocks.com/en/tutorials/offline/storage/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top