JavaScript Cookie Save Form

Question

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>

your if clause if(email = getCookie("email")) probably needs to be: if(email == getCookie("email")), and you might wanna consider using id attributes for input fields int he form, for example <input id="email" class="field" type="text" name="email-field" placeholder="e-mail" style="text-transform: lowercase;" autofocus> — jyrkim
– jyrkim, Commented Nov 29, 2014 at 11:46
Not quite. Anyway, I just made some changes that made it work :-) — jyrkim
– jyrkim, Commented Nov 29, 2014 at 13:21

jyrkim · Accepted Answer · 2014-11-30 11:48:38Z

1

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 image description here

edited Nov 30, 2014 at 11:48

answered Nov 29, 2014 at 13:19

jyrkim

2,8791 gold badge26 silver badges35 bronze badges

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

9 Comments

Nikk Over a year ago

I only need the email stored. So I guess I'd only use the first one... However, you are using 'onclick' for the button. Um, if I change the button type to 'submit' because I need to submit the form. Will the cookie be saved?

jyrkim Over a year ago

@Boris, yes it saves. I just checked it out, it appears on Chrome's resources as a cookie for email when saved with a submit button like this <button onclick="setCookie('email', 'emailField')" type="submit">

jyrkim Over a year ago

@Boris one more thing I forgot to mention, when using submit button, you need to set a value for action attribute in the form tag: <form action="test.html" ... and so on. it has to be an existing web page.

Nikk Over a year ago

Seriously you went out of your way to help me with this. Thank you. One more question, is it possible to extend the expiry time to say 20 years? I know its not possible to set it to infinite.

Nikk Over a year ago

One more question, since I won't be calling the values via a button, do I still need this

function displayCookieValue(name) {             var value = getCookie(name);             var element = document.getElementById("value");             element.innerHTML = "Cookie name: "+ name + ", value " + value;          }

?

|

Collectives™ on Stack Overflow

JavaScript Cookie Save Form

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related