CODEWITHSUNDEEP
javascripthtmlcookies
CHASE
CHASE

Reputation: 511

How would I use js cookies to save a value in an input

So I am testing around with cookies and I ran into a problem. I want the value in the input boxes to stay on reload. I just don't know where to start.
Here is the code:

<html>
<head>
<script type="text/javascript">
function add1() {
    var num = document.getElementById("mynum").value;
    if(num == '') num = 0;
    document.getElementById("mynum").value = parseInt(num ,10) + 1;
    }
function add5() {
    var num = document.getElementById("mynum").value;
    if(num == '') num = 0;
    document.getElementById("mynum").value = parseInt(num ,10) + 5;
    }
function add10() {
    var num = document.getElementById("mynum").value;
    if(num == '') num = 0;
    document.getElementById("mynum").value = parseInt(num ,10) + 10;
    }
function add25() {
    var num = document.getElementById("mynum").value;
    if(num == '') num = 0;
    document.getElementById("mynum").value = parseInt(num ,10) + 25;
    }
function add50() {
    var num = document.getElementById("mynum").value;
    if(num == '') num = 0;
    document.getElementById("mynum").value = parseInt(num ,10) + 50;
    }
function add100() {
    var num = document.getElementById("mynum").value;
    if(num == '') num = 0;
    document.getElementById("mynum").value = parseInt(num ,10) + 100;
    }
</script>
</head>
<body>
<form method="post">
<input type="text" id='mynum'>
<input type="button" onclick="add1()" value="Add 1">
<input type="button" onclick="add5()" value="Add 5">
<input type="button" onclick="add10()" value="Add 10">
<input type="button" onclick="add25()" value="Add 25">
<input type="button" onclick="add50()" value="Add 50">
<input type="button" onclick="add100()" value="Add 100">
</form>
</body>
</html>


So how would I create a cookie that would keep the value of id: mynum if the page reload?

Upvotes: 0

Views: 66

Answers (2)

adeneo
adeneo

Reputation: 318192

Seems like there should be an easier way to do that

<html>
    <head>
        <title>add something</title>
    </head>
<body>
    <form method="post">
        <input type="text" id='mynum'>
        <input type="button" class="adder" data-num="1"   value="Add 1">
        <input type="button" class="adder" data-num="5"   value="Add 5">
        <input type="button" class="adder" data-num="10"  value="Add 10">
        <input type="button" class="adder" data-num="25"  value="Add 25">
        <input type="button" class="adder" data-num="50"  value="Add 50">
        <input type="button" class="adder" data-num="100" value="Add 100">
    </form>
    <script type="text/javascript">
        var buttons = document.querySelectorAll('.adder'),
            initial = localStorage.getItem('mynum') || 0;

        document.getElementById("mynum").value = initial;

        for (var i=buttons.length; i--;) {
            buttons[i].addEventListener('click', add, false);
        }

        function add() {
            var num = document.getElementById("mynum"),
                val = parseInt(num.value, 10),
                add = parseInt(this.getAttribute('data-num'), 10),
                tot = val + add;

            num.value = tot;
            localStorage.setItem('mynum', tot);
        }
    </script>
</body>
</html>

FIDDLE

This uses localStorage, if you have to support older browsers there's a shim on MDN that falls back to cookies, and you would have to shim querySelectorAll and addEventListener as well.

Upvotes: 1

Dummy Code
Dummy Code

Reputation: 131

Just use document.cookie="username=John Doe";

See here for a tutorial on cookies in js

Upvotes: 0

Related Questions