Handling Javascript Cookies

Question

I'm studying Javascript cookie. Basically what I want is

when the first time user input their number it will save the cookie name, value and expiration date to 365.
When the user visit again my site he/she don't have to enter his number anymore as long as the cookie is still alive or haven't deleted yet in the browser, he/she will be redirected to my homepage.

Here's my code in javascript so far:

function checkCookie() {
    var mob_tel=getCookie("mob_tel");
    if (mob_tel!=null && mob_tel!="") {
        alert("Welcome again " + mob_tel);
    } else {
        set_name("");
    }
}

function set_name(form) {
    var mob_tel = form.mobtel.value
    if (mob_tel != "") {
        if (confirm("Are you sure you want this saved as your number?")) {
            setCookie ("mob_tel", mob_tel, 365);
            //window.history.go(0);
        }
    } else alert("Geez, at least enter something, entering nothing will cause an error.");
}

my html body

<body onload="checkCookie()">
    <form>
            Enter Mobile Number: <input type="text" name="mobtel"><br>
            <input type="submit" value="Save Cookie" onclick="set_name(this.form)">
    </form>
</body>

It all works but in my firebug:

Uncaught TypeError: Cannot read property 'value' of undefined
set_name
checkCookie
(anonymous function)
onload

Maybe my coding style is wrong. I'm open to rewrite my code. I'm still new to javascript.

Sudhir Bastakoti · Accepted Answer · 2012-02-01 04:54:19Z

1

Add name to you form:


<form name="your_form_name_here">
    Enter Mobile Number: <input type="text" name="mobtel" value=""><br>
    <input type="submit" value="Save Cookie" onclick="set_name(this.form)">
</form>

answered Feb 1, 2012 at 4:54

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wondering Coder Over a year ago

How about the firebug error which says: Uncaught TypeError: Cannot read property 'value' of undefined. This only occur if a user still haven't input his number and saved the cookies in the browser.

Tango Bravo · Accepted Answer · 2012-02-01 04:57:38Z

Here's a working version.

This is what I did:
1 - getCookie() and setCookie() weren't defined. I used the W3Schools functions to supplement them.
2 - There were some scripting errors (missing semi-colons,etc) I fixed those.
3 - for the set_name() function, I changed it to a DOM query to access the input which held the telephone number.

<script>
function checkCookie() {
    var mob_tel=getCookie("mob_tel");
    if (mob_tel!=null && mob_tel!="") {
        alert("Welcome again " + mob_tel);
    } else {
        set_name("");
    }
}

function getCookie(c_name) {
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++) {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x==c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name,value,exdays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

function set_name(form) {
    var mob_tel = document.getElementById('mobtel').value;
    if (mob_tel != "") {
        if (confirm("Are you sure you want this saved as your number?")) {
            setCookie ("mob_tel", mob_tel, 365);
            //window.history.go(0);
        }
    } else alert("Geez, at least enter something, entering nothing will cause an error.");
}
</script>
<body onload="checkCookie()">
    <form>
            Enter Mobile Number: <input type="text" name="mobtel" id="mobtel"><br>
            <input type="submit" value="Save Cookie" onclick="set_name(this.form)">
    </form>
</body>

Collectives™ on Stack Overflow

Handling Javascript Cookies

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related