JavaScript Cookies Help

Page 1 of 1

4 Replies - 331 Views - Last Post: 14 October 2012 - 08:50 AM

#1 edwin2213  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 08-October 12

JavaScript Cookies Help

Posted 08 October 2012 - 09:54 PM

I have done some searching around the internet and on this forum, but am still stuck. I have a form that is verified with Javascript. If the form in completed properly, upon clicking the submit button it needs to set a cookie and redirects to a "Thank you" page. If the person tries to resubmit the form it should recognize them and redirect them to a "Already Submitted" page.

Any help would be greatly appreciated.

Here is the code I have for the main HTML pages and the JS page.

index.html code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Site Prototype</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="Javascript.js" type="text/javascript">
</script>
</head>

<body style="background-color:#E8E2D5">
<h1><center>Form/Cookie Prototype</center></h1>
<br>
<br>


<form style="background-color:#000000; color:#CCCCCC; position:fixed;" name="form" onsubmit="return validateForm();" method"get" action="Complete.html">



<p>Please complete the following form to sign up for our newsletter.</p><br>

Name:  <input id="name" type="text" name="name"><br>
<br>
Street Address: <input id="address" type="text" name="address"><br>
<br>
Email Address: <input id="email"type="email" name="email"><br>
<br>
Phone Number: <input id="phone" type="text" name="phone"><br>
<br>
<input type="submit" value="Submit">
</form>


</body>
</html>


Javascript:


function validateForm() 

{
	
name=document.form.name.value;
address=document.form.address.value;
email=document.form.email.value;
phone=document.form.phone.value;

if (name == "")
{
alert("Please enter your name.");
return false;
}

if (address == "")
{
alert("Please enter your address.");
return false
}

if (email == "")
{
alert("Please enter your email address.");
return false;
}

if (phone == "")
{
alert("Please enter your phone number.");
return false;
}

else return true;

}


complete.html code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Site Prototype</title>
</head>

<body style="background-color:#E8E2D5">
<h1><center>KForm/Cookie Prototype</center></h1>
<br>
<br>
<p style="background-color:#000000; color:#CCCCCC; position:fixed"><br>
<br>
<br>
<center>Thank you for your submission!</center><br>
<br>
</p>



</body>
</html>


alreadysubmitted.html code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Site Prototype</title>
</head>

<body style="background-color:#E8E2D5">
<h1><center>Form/Cookie Prototype</center></h1>
<br>
<br>
<p style="background-color:#000000; color:#CCCCCC; position:fixed"><br>
<br>
<br>
<center>You have already submitted this form.</center><br>
<br>
</p>

</body>
</html>


CSS
@charset "UTF-8";
/* CSS Document */

<style type="text/css">
   #input 			{position:absolute; left:150px;}
   #name 			{position:absolute; left:150px; width: 200px; }
   #address 		{position:absolute; left:150px; width: 200px; }
   #email	 		{position:absolute; left:150px; width: 200px; }
   #phone		 	{position:absolute; left:150px; width: 200px; }
</style>


Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript Cookies Help

#2 edwin2213  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 08-October 12

Re: JavaScript Cookies Help

Posted 08 October 2012 - 10:29 PM

Nevermind...I figured it out.

Related question though. Everything works great in Firefox and Chrome but not in Safari. Does anyone know why this would be?

Here is the code for that I got to work.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Site Prototype</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript">
expireDate = new Date;
expireDate.setMonth(expireDate.getMonth()+6)

function validateInformation(myForm) 
{
    if (validateForm(myForm) == false)
        return false;
    if (cookieInformationExists(myForm) == true) 
    {
        //alert("Cookie information exists!!");
        window.location = "alreadysubmitted.html";
    }
    else {
        createCookie(myForm);
        return true;
        return false;     
    }
    return false;
}
function cookieInformationExists(myForm) {
    if (document.cookie != "") {
        //alert("found cookie info...");
        splitCookie = document.cookie.split("; ");
        userName = unescape(splitCookie[0].split("=")[1]);
        if (userName == "") {
            //alert("Username= "+userName);
            return false;
        }
        else {
            //alert("Username= "+userName);
            if (userName!=myForm.name.value)
                return false;
            return true;
        }
    }
    else {
        //alert("There is no cookie at all!!");
        return false;
    } 
    return false;
}
function createCookie(myForm) {
    document.cookie = "userName="+escape(myForm.name.value)+";expires="+expireDate.toGMTString();

    document.cookie = "userAddress="+escape(myForm.address.value)+";expires="+expireDate.toGMTString();

    document.cookie = "userEmail="+escape(myForm.email.value)+";expires="+expireDate.toGMTString();

    document.cookie = "userPhone="+escape(myForm.phone.value)+";expires="+expireDate.toGMTString();

   
    return true;
}

function validateForm(myForm) 

{
    if (myForm.name.value == "") 
    {
        alert("Please enter your name.");
        return false
    }
    if (myForm.address.value == "") 
    {
        alert("Please enter your address.");
        return false
    }
    if (myForm.email.value == "") 
    {
        alert("Please enter your email address.");
        return false
    }
    if (myForm.phone.value == "") 
    {
        alert("Please enter your phone number.");
        return false
    }
    return true;
}
</script>
</head>

<body style="background-color:#E8E2D5">
<h1><center>Form/Cookie Prototype</center></h1>
<br>
<br>


<form style="background-color:#000000; color:#CCCCCC; position:fixed;" <form onsubmit="return validateInformation(this)" action="Complete.html">



<p>Please complete the following form to sign up for our newsletter.</p><br>

Name:  <input id="name" type="text" name="name"><br>
<br>
Street Address: <input id="address" type="text" name="address"><br>
<br>
Email Address: <input id="email"type="email" name="email"><br>
<br>
Phone Number: <input id="phone" type="text" name="phone"><br>
<br>
<input type="submit" value="Submit">
</form>


</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#3 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 5723
  • View blog
  • Posts: 22,637
  • Joined: 23-August 08

Re: JavaScript Cookies Help

Posted 09 October 2012 - 03:23 AM

How exactly does it "not work" in Safari?
Was This Post Helpful? 0
  • +
  • -

#4 edwin2213  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 08-October 12

Re: JavaScript Cookies Help

Posted 09 October 2012 - 08:01 AM

In Safari I can complete the form and get redirected to the Thank you page. If I go back and compete the form again, when I press submit, I go back to the Thank you page. It should go to the Already Completed page. It does this in Firefox and Chrome. I have also turned on "Block Cookies: Never" in the Safari preferences.

Thank you.
Was This Post Helpful? 0
  • +
  • -

#5 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 751
  • Joined: 25-October 08

Re: JavaScript Cookies Help

Posted 14 October 2012 - 08:50 AM

View Postedwin2213, on 08 October 2012 - 11:29 PM, said:

Nevermind...I figured it out.


FOI:
What was the problem, how did you figure it out and what changes did you make?
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1