Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript cookies, saving form data

    Hello,

    Im pretty new at JavaScript still, and I am trying to add cookies to a page of my website, so that what is entered into form fields, is retained for future visits. Below is my code, and I am scratching my head as to why it is not working for me! I have viewed a few different cookie tutorials, and so far trying to shape them around what I am seeking, is leading me to my broken code.

    Javascript:
    Code:
    var today = new Date();
    var expiry = new Date(today.getTime() + 100 * 24 * 3600 * 1000); 
    
    function setCookie(name, value) 
    { 
    document.cookie=name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString(); 
    } 
    function storeValues(form) 
    { 
    setCookie("name", contact.name.value);
    setCookie("email", contact.email.value);
    setCookie("phone", contact.phone.value);
        return true; 
    }
    if(name = getCookie("name")) document.contact.name.value = name;
    if(email = getCookie("email")) document.contact.email.value = email; 
    if(phone =getCookie("phone")) document.contact.phone.value = phone;
    HTML for the Form
    Code:
    <form action="mailto:ksim@dbk.com" method="POST" name="contact" onsubmit="return validateForm();" >
     <ul>
        <li>
            <strong>Name<font color="#5fb81e">*</font></strong>
            <div><input type="text" size="25" name="name" /></div>
        </li>
        <li>
            <strong>E-mail Address<font color="#5fb81e">*</font></strong>
            <div><input type="text" size="25" name="email" /></div>
        </li>
        <li>
            <strong>Phone Number<font color="#5fb81e">*</font></strong>
            <div><input type="text" size="25" name="phone" /></div>
        </li>
        <li>
            <strong>Prefered Type of Contact?<font color="#5fb81e">*</font></strong>
            <div><input type="radio" name="contact" value="email" id="contactem" /> E-mail<br />
            <input type="radio" name="contact" value="phone" id="contactph" /> Phone</div>
        </li>
            <li>
            <strong>Reason For Contact?</strong>
            <div><input type="checkbox" name="reason" value="showinfo" />Show Information<br />
            <input type="checkbox" name="reason" value="groupinfo" />Group Information<br />
            <input type="checkbox" name="reason" value="collab" /> Collaboration<br />
            <input type="checkbox" name="reason" value="misc" />Misc
    </div>
        </li>
            <li>
            <strong>What Are You Contacting About?<font color="#5fb81e">*</font></strong>
            <div><textarea name="message" rows="7" cols="28"></textarea></div>
        </li>
            <li>
            <strong></strong>
            <div><input type="button" value="Save" conclick="setCookie();"/><button type="reset">Reset</button><button type="submit">Submit</button>
            </div>
        </li>
    </ul>
    If anyone has some tips to point me in the right direction, and let me see the error of my ways (pun totally intended) I would appreciate it.
    Last edited by damnamazing; 05-16-2012 at 08:35 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,315
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    if(name = getCookie("name")) document.contact.name.value = name;

    It is never a a good idea to use the same name for an HTML form element and a Javascript variable.

    setCookie("email", contact.email.value);
    should be
    setCookie("email", document.contact.email.value);

    But you are trying to use mailto: as the form action. The trouble with using this long-obsolete method (mailto) to send form results is its unpredictability. The method it is highly dependent on the browser in use and the email client in use (some people have only Yahoo, Gmail or Hotmail). In particular, your visitor must have Outlook or Outlook Express or Windows Live Mail as the default client for this to work correctly. Even if your visitor is using Internet Explorer, but the default mail client is different (e.g. Eudora or Thunderbird), your mailto form will not work. With all of the browser troubles, you're likely to lose about half of your users' messages. Most of the email clients that can successfully send a mail will prompt the user with a somewhat threatening security dialog prior to sending - this can scare many users from continuing. Other users will not wish to reveal their email address. Also, what about people with Javascript disabled?

    In addition, if you place an unobfuscated email address in your webpage, the bots will quickly find it and inundate you in spam.

    Modern browsers no longer accept mailto: as a form action - they simply open the email program (if any) and ignore the form. If you are going to use a form then use a server-side CGI formmail script as the action - there are several good free ones out there.

    "...there are indications that the severest phase of the recession is over..."
    - Harvard Economic Society (HES) Jan 18, 1930

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    if(name = getCookie("name")) document.contact.name.value = name;

    It is never a a good idea to use the same name for an HTML form element and a Javascript variable.

    setCookie("email", contact.email.value);
    should be
    setCookie("email", document.contact.email.value);

    But you are trying to use mailto: as the form action. The trouble with using this long-obsolete method (mailto) to send form results is its unpredictability. The method it is highly dependent on the browser in use and the email client in use (some people have only Yahoo, Gmail or Hotmail). In particular, your visitor must have Outlook or Outlook Express or Windows Live Mail as the default client for this to work correctly. Even if your visitor is using Internet Explorer, but the default mail client is different (e.g. Eudora or Thunderbird), your mailto form will not work. With all of the browser troubles, you're likely to lose about half of your users' messages. Most of the email clients that can successfully send a mail will prompt the user with a somewhat threatening security dialog prior to sending - this can scare many users from continuing. Other users will not wish to reveal their email address. Also, what about people with Javascript disabled?

    In addition, if you place an unobfuscated email address in your webpage, the bots will quickly find it and inundate you in spam.

    Modern browsers no longer accept mailto: as a form action - they simply open the email program (if any) and ignore the form. If you are going to use a form then use a server-side CGI formmail script as the action - there are several good free ones out there.

    "...there are indications that the severest phase of the recession is over..."
    - Harvard Economic Society (HES) Jan 18, 1930
    Hello Philip,

    Thanks for the reply. I added the document.contact to the setCookie lines and I am still not getting any cookies saved unfortunately.

    I know that the mailto function is pretty much useless, but the form and cookie saving is just a step into the process of figuring out how to save cookies, on top of form validation. As I am still taking my JavaScript class, I like to stick as close to what is being taught in the material, just so I can show an understanding of what is being taught at the time! But before I can show an understanding of cookies and forms, I need to get this to work haha! Later on I will be sure to teach myself a nice server-side contact form to avoid and mailto hassles!

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,315
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    Here is an example script to remember several fields. You ought to be able to configure it to your needs.

    Code:
    <html>
    <head>
    </head>
    <body>
    
    <form name="myform" action="" method="post" onsubmit="if (this.checker.checked) toMem(this)">
    FirstName: <input type = "text"  name="usernameF" id="usernameF" size="30" ><br>
    Last Name: <input type = "text"  name="usernameL" id="usernameL" size="30" ><br>
    E-mail: <input type = "text" name="email" id="email"  size="30">
    <br><br>
    Remember me? <input type="checkbox" id="checker" name="checker"> &nbsp&nbsp
    <input type="submit" value="Submit"> 
    <input type="reset" value="Reset"> 
    <input type="button" onclick="delMem(this)" value="Delete Information">
    </form>
    
    <script type = "text/javascript">
    
    function newCookie(name,value,days) {
    var days = 10;// the number at the left reflects the number of days for the cookie to last
         // modify it according to your needs
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString(); 
    }
    else {var expires = ""}
    document.cookie = name+"="+value+expires+"; path=/"; 
    }
    
    function readCookie(name) {
    var nameSG = name + "=";
    var nuller = '';
    if (document.cookie.indexOf(nameSG) == -1) {return nuller}
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length);
    }
    return null;
    }
    
    function eraseCookie(name) {
    newCookie(name,"",1); 
    }
    
    function toMem(a) {
    newCookie('theFirstName', document.myform.usernameF.value);  // add a new cookie as shown at left for every
    newCookie ('theLastName', document.myform.usernameL.value);  // field you wish to have the script remember
    newCookie('theEmail', document.myform.email.value);   
    }
    
    function delMem(a) {
    eraseCookie('theFirstName');  // make sure to add the eraseCookie function for every field
    eraseCookie('theLastName');  
    eraseCookie('theEmail');
    document.myform.usernameF.value = '';  // add a line like this for every field
    document.myform.usernameL.value = '';
    document.myform.email.value = '';
    }
    
    function remCookie() {
    document.myform.usernameF.value = readCookie("theFirstName");
    document.myform.usernameL.value = readCookie("theLastName");
    document.myform.email.value = readCookie("theEmail");
    }
    
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } 
    else {
    window.onload = function() {
    if (oldonload) {
    oldonload();
    }
    func();
    }
    }
    }
    
    addLoadEvent(function() {
    remCookie();
    });
    
    </script>
    
    </body>
    </html>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    damnamazing (05-17-2012)

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Here is an example script to remember several fields. You ought to be able to configure it to your needs.
    Thank you so much Philip, it works perfectly ! It looks like I was missing a whole lot in my first attempt!

  • #6
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh darn. The cookies work great but it messed up my form validation! The form validation was working great before the cookies, now it straight bypasses the validation and lets you submit without alerts.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,315
    Thanks
    203
    Thanked 2,565 Times in 2,543 Posts
    Quote Originally Posted by damnamazing View Post
    Oh darn. The cookies work great but it messed up my form validation! The form validation was working great before the cookies, now it straight bypasses the validation and lets you submit without alerts.
    Why should the cookie script do that? I would look for an error somewhere else. You will only set the cookie with the form values after the validation process has completed.

    Code:
    onsubmit="return validateForm(); if (this.checker.checked) toMem(this)">

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Why should the cookie script do that? I would look for an error somewhere else. You will only set the cookie with the form values after the validation process has completed.

    Code:
    onsubmit="return validateForm(); if (this.checker.checked) toMem(this)">

    It was the onsubmit like you thought, I forgot to include the validate command when adding the command to save the cookies. Thanks again for the help Philip.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •