www.webdeveloper.com
Results 1 to 5 of 5

Thread: Form Cookie to remember the information

  1. #1
    Join Date
    Oct 2011
    Location
    Durban
    Posts
    12

    Question Form Cookie to remember the information

    Please assist, I have the following code to remember form inormation but it does not seem to work. Probably something stupid.

    Code:
    <!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Contact Page</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="yorkie.css" type="text/css" />
    <script type="text/javascript">
    /* <![CDATA[ */
    
    // If box clicked value within disappears	
    function Focus(element) {
         if (element.value == element.defaultValue) {
           element.value = '';
         }
       }
    
    // If nothing typed and box onblur the default value is restored within 
    function Blank(element) {
         if (element.value == '') {
           element.value = element.defaultValue;
         }
       }
    
    // Submission of Contact Form Verified
    function verifySubmission() {
    var retValue = true;
    if (document.forms[2].email.value == "Enter Email Address"
    || document.forms[2].firstname.value == "Enter First Name"
    || document.forms[2].lastname.value == "Enter Last Name"
    || document.forms[2].telephone.value == "Enter Contact number") {
    	window.alert("You did not fill in one of the following required fields: First Name, Last Name, Email Address, or Telephone Number.");
    	retValue = false;
    	}
    return retValue;
    }
    // Email address verified as a valid email address
    function validateEmail(formObject) {
    var email = formObject.value;
    var emailCheck = /^[_\w\-]+(\.[_\w\-]+)*@[\w\-]+(\.[\w\-]+)*(\.[\D]{2,3})$/;
    if (emailCheck.test(email) == false) {
    window.alert("The e-mail address you entered does not appear to be valid.");
    formObject.value = formObject.defaultValue;
    return false;
    }
    formObject.value = email.toLowerCase();
    return true;
    }
    // Telephone number verified as a valid 10 digit number with no alpha characters
    function verifyPhone(number) {
    var phone = number.value;
    var phoneCheck = /^(\d{10})$/;
    if(phoneCheck.test(phone) == false) {
    window.alert("The telephone number you entered does not appear to be valid.");
    number.value = number.defaultValue;
    return false;
    }
    return true;
    }
    // Show additional contact form details onclick of yes radio button
    function showDiv() {
    document.getElementById('breeders').style.visibility = 'visible';
    }
    // Hide certain contact form info onclick of No radio button
    function hideDiv() {
    document.getElementById('breeders').style.visibility = 'hidden';
    }
    // SAVE FORM INFORMATION FOR THE NEXT VISIT
    function saveSelections(frm) {
    		var setvalue;
    		var fieldType;
    		var index;
    		var formname = frm.name;
    
    		// CookieExpiry in 30 days.
    		var today = new Date();
    		var exp   = new Date(today.getTime()+30*24*60*60*1000);
    
    		var string = "formname=" + formname + "|";
    		var cookieName = formname;
    
    		var n = frm.length;
    		for (i = 0; i < n; i++)	{
    			e = frm[i].name;
    			fieldValue = frm[i].value;
    			fieldType = frm[i].type;
    			
    			// Radio Buttons
    			if (fieldType == "radio") {
    				for (x=0; x < frm.elements[e].length; x++) {
    					if (frm.elements[e][x].checked)
    					{
    					index = x
    					}
    				}
    			string = string + index + "\|";
    			}
    			
    			// Text, Textarea, and dropdowns
    			if ((fieldType == "text") || (fieldType == "textarea") || (fieldType == "select")) {
    		    	string = string + frm.elements[e].value + "\|";
    			}
    			
    			// Checkboxes
    			if (fieldType == "checkbox") {
    				if (frm.elements[e].checked==true) {
    					var setvalue = "1";
    					}
    				if (frm.elements[e].checked==false) {
    					var setvalue = "0";
    					}
    			string = string + setvalue + "\|";
    			}
    			
    			// Hidden field
    			if (fieldType == "hidden") {
    		    	string = string + frm.elements[e].value + "\|";
    			}
    		}
    setCookie(cookieName, string, exp); 
    }
    // Load Form Fields from saved cookie
    function loadSelections(frm) {
    var e;
    var z;
    var x;
    var cookieName;
    var fieldArray;
    var fieldValues;
    var fieldValue;
    
    var formname = frm.id;
    
    // Retrieve form elements from cookie and split into array.
    cookieName = formname;
    fieldValues = getCookie(cookieName);
    fieldArray = fieldValues.split("\|");
    
    var n = frm.length;
    for (i = 0; i < n; i++) {
    	e = frm[i].name;
    	z = i;
    	z++;
    	var fieldType = frm[i].type;
    	var fieldValue = fieldArray[z];
    	
    	// Radio Buttons
    		if (fieldType == "radio") {
    			x = fieldValue;
    			frm.elements[e][x].checked = true;
    		}	
    	
    	// Text, Textarea, and dropdowns
    	if ((fieldType == "text") || (fieldType == "textarea") || (fieldType == "select")) {
    		frm.elements[e].value = fieldValue;
    		}
    	
    	// Checkboxes
    	if (fieldType == "checkbox") {
    		var fld_checkbox = fieldValue;
    		if (fld_checkbox == "1") {
    			frm.elements[e].checked = true;
    			}
    	}
    	
    	// Hidden fields
    	if (fieldType == "hidden") {
    		frm.elements[e].value = fieldValue;
    		}
    	}
    }
    
    // COOKIE FUNCTIONS
    function setCookie(name, value, expires) {
    document.cookie= name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "");
    }
    
    function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
    } else {
    begin += 2;
    }
    var end = document.cookie.indexOf(";", begin);
    if (end == -1) {
    end = dc.length;
    }
    return unescape(dc.substring(begin + prefix.length, end));
    }
    /* ]]> */
    </script>
    </head>
    
    <body class="contact" onload="var begin=setInterval('changeBanner()',9000); currentClock(); currentDate();  document.getElementById('breeders').style.visibility = 'hidden'; " onunload="saveSelections(document.forms[0])">
    <table width="92%">
    
    <form action="mailto:lynette@sayorkies.co.za, subject=Contact Form" method="post" enctype="text/plain" onsubmit="return verifySubmission()" onreset="return confirmReset();">
    <table class="center" cellpadding="5" border="1">
    
    <!-- This is for the personal information -->
    <tr><td><strong>Tell us who you are:</strong></td></tr>
    <tr><td><input type="text" name="firstname" size="25" maxlength="35" value="Enter First Name" onfocus="Focus(this);" onblur="Blank(this);" /> * 
    <input type="text" name="lastname" style="margin-left: 52px;" size="25" maxlength="35" value="Enter Last Name" onfocus="Focus(this);" onblur="Blank(this);" /> *</td></tr>
    
    <!-- This is for the contact information -->
    <tr><td><strong>Your Contact details:</strong></td></tr>
    <tr><td><input type="text" name="email" size="30" maxlength="60" value="Enter Email Address" onfocus="Focus(this);" onblur="Blank(this); validateEmail(this)" /> * 
    <input type="text" name="telephone" style="margin-left: 20px;" size="20" maxlength="10" value="Enter Contact number" onfocus="Focus(this);" onblur="Blank(this); verifyPhone(this)" /> * </td></tr>
    
    <!-- This is where you enter your message also select what type of message-->
    <tr><td><strong>Your Message:</strong></td></tr>
    <tr><td align="left">What is your message about?<br />
    <input type="radio" name="type" value="compliment" /> Compliment 
    <input type="radio" name="type" value="complaint" /> Complaint 
    <input type="radio" name="type" value="general" checked="checked" /> General 
    <input type="radio" name="type" value="enquiry" /> Enquiry 
    <input type="radio" name="type" value="feedback" /> Feedback</td></tr>
    <tr><td align="center"><textarea name="message" rows="6" cols="45" onfocus="Focus(this);" onblur="Blank(this)">Enter your message here...</textarea></td></tr>
    
    <!-- Additional  -->
    <tr><td align="left">Are you looking to purchase a Yorkie puppy?<br />
    <input type="radio" name="purchase" value="yes" /> Yes 
    <input type="radio" name="purchase" value="no" checked="checked" /> No</td></tr>
    
    <tr><td align="left">Do you own a Yorkie?<br />
    <input type="radio" name="owner" value="yes"  onclick="showDiv()" /> Yes 
    <input type="radio" name="owner" value="no" checked="checked" onclick="hideDiv()" /> No<br />
    <!-- If answer is no above the below questions are hidden, if yes then they appear -->
    <div id="breeders">
    How many? <select name="qnty" size="1"> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5+</option></select> 
    Are you a breeder? <input type="radio" name="breeder" value="yes" /> Yes 
    <input type="radio" name="breeder" value="no" checked="checked" /> No</div></td></tr>
    
    <!-- Subscriptions -->
    <tr><td align="left">Do you wish to subscribe to the following?<br />
    <input type="checkbox" name="subscribe" value="letter" checked="checked" /> Monthly Newsletter<br />
    <input type="checkbox" name="subscribe" value="pups" /> Notification of a new litter<br />
    <input type="checkbox" name="subscribe" value="updates" /> Notification of site updates<br />
    <input type="checkbox" name="subscribe" value="register" /> Registrations</td></tr>
    
    <!-- Buttons to clear the form or to submit the form -->
    <tr><td align="center"><input type="reset" value="Clear the Form" />
    <input type="submit" value="Send your message" /></td></tr>
    
    </table></form<script type="text/javascript">loadSelections(document.forms[0]);</script>
    
    </body>
    </html>
    I keep getting:
    Console Error: Unable to get value of the property 'split': object is null or undefined


    for this line:
    Code:
    fieldArray = fieldValues.split("\|");
    I am hitting a brick wall, dont know what to do?

  2. #2
    Join Date
    Nov 2011
    Posts
    17
    Well basicly when you declare frm.id - it is not setting it to a accurate ID (e.g. the div or what ever does not exist)

  3. #3
    Join Date
    Nov 2011
    Posts
    17
    Code:
    </table></form><script type="text/javascript">loadSelections(document.forms[0]);</script>
    You didn't close your form FYI

  4. #4
    Join Date
    Oct 2011
    Location
    Durban
    Posts
    12
    Thanks, I closed it and just need some clarification re the id. Do I need to specify an id name within the form tag eg:
    Code:
    <form id="contact">
    and then change the
    Code:
    frm.id
    to
    Code:
    frm.contact

  5. #5
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    373
    Your split command does not contain a regular expression, it's just a literal. Try removing the backslash from "\|" since you don't need to escape it.

    I have an example here: guitar.htm on line 71 of the source.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles