Question

108

JavaScript Cookie Save Form

rated 0 times [ 113] [ 5] / answers: 1 / hits: 6705 / 10 Years ago, sat, november 29, 2014, 12:00:00

I've been using this tutorial online to try and save the input value for one of my form fields.

So far without any success.

Am I doing something wrong?

<script type=text/javascript>

    var today = new Date();

    var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000); // plus 30 days



    function setCookie(name, value) {

        document.cookie=name + = + escape(value) + ; path=/; expires= + expiry.toGMTString();

    }



    function storeValues(form)  {

        setCookie(email, form.email-field.value);

        return true;

    }



    if(email = getCookie(email)) document.getElementById('login-form').email-field.value = email-field;



     function getCookie(name) {

        var re = new RegExp(name + =([^;]+));

        var value = re.exec(document.cookie);

        return (value != null) ? unescape(value[1]) : null;

     }



     document.write(getCookie(email));

</script>

HTML:

<form action= method=post id=login-form>

<input class=field type=text name=email-field placeholder=e-mail style=text-transform: lowercase; autofocus>

<br>

<input class=field type=password name=pass placeholder=password>

<button type=submit></button>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

haleeg

Add To Favorites

Follow

Total Points: 703

Total Questions: 100

Total Answers: 98

Location: Dominica

Member since Sat, Nov 5, 2022

2 Years ago

answered 10 Years ago calicinthias · Accepted Answer

Your setCookie method's document.cookie part was okay, so I only had to make a couple of changes to make it work. For test purposes, I also changed the form a bit. Here is the code:

<form action=Cookies.html method=post id=login-form>

    <input class=field type=text  onkeydown=if (event.keyCode == 13) document.getElementById('submitButton').click() id=emailField name=email-field placeholder=e-mail style=text-transform: lowercase; autofocus>

    <br>

    <input class=field type=password id=password name=pass placeholder=password>

    <br>

    <br> 

    <button id=submitButton onclick=setCookie('email', 'emailField') type=submit>set Cookie email</button>

    <br>

    <button onclick=setCookie('password', 'password') type=button>set Cookie password</button>

    <br>

    <button onclick=displayCookieValue('email') type=button>display Cookie email</button>

    <br>

    <button onclick=displayCookieValue('password') type=button>display Cookie password</button>  

    <br>

   </form>



<div id=value></div>



<script>



        var today = new Date();

        var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000); // plus 30 days



        function setCookie(name, id) {

            var element = document.getElementById(id);

            var elementValue = escape(element.value);



            document.cookie = name + = + elementValue + ; path=/; expires= + expiry.toGMTString();

            console.log(document.cookie);

        }



        function storeValues(form) {

            setCookie(email, form.email - field.value);

            return true;

        }



        function displayCookieValue(name) {

            var value = getCookie(name);

            var element = document.getElementById(value);

            element.innerHTML = Cookie name: + name + , value  + value;



        }



        function getCookie(name) {

            var re = new RegExp(name + =([^;]+));

            var value = re.exec(document.cookie);

            return (value != null) ? unescape(value[1]) : null;

        }

</script>

Note, it also stores the password value as the cookie value which in production is probably not a good idea :-) Also I tested it locally by using Apache server on my computer.

Screenshot below displays Chromes resources:

enter