CODEWITHSUNDEEP
javascriptcookies
Wondering Coder
Wondering Coder

Reputation: 1702

Handling Javascript Cookies

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

  1. when the first time user input their number it will save the cookie name, value and expiration date to 365.

  2. 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.

Upvotes: 0

Views: 1072

Answers (2)

Tango Bravo
Tango Bravo

Reputation: 3309

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>

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

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>

Upvotes: 1

Related Questions