2015-06-11 50 views
-1

好吧,我有問題令我困惑。我有一個我爲一個項目編寫的註冊頁面,並且每次輸入它應該存儲在cookie中的信息。我第一次看後,看到了欄中的信息,但它不會傳遞到登錄頁面。Javascript錯誤?頁面重置

下面是HTML:

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!-- 

Project (Register.html) 
Author: Michael R. Mastro II 
Date: 06 Jun 2015 
--> 
    <title>Registration Page</title> 
    <script type="text/javascript"> 
    /* <![CDATA[ */ 

    /* ]]> */ 
    </script> 
</head> 
<body style="background-color:red"> 
    <form action = "" id="aboutForm" method="get" 
      enctype="application/x-www-form-urlencoded" 
      onsubmit="confirmSubmit();" 
      onreset="return confirmReset();"> 
     <h2 style="text-align:center; color:white">Pizzeria Registration Page</h2> 
      <p style="color:white">User Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="userName" id="userName" size="50" value="Enter Username" onfocus="if(this.value == 'Enter Username') {this.value = '';}" onblur="if(this.value == '') {this.value = 'Enter Username';}" /></p> 
      <p style="color:white">Street Address:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="sAdd" id="sAdd" size="50" value="Enter Street Address" onfocus="if(this.value == 'Enter Street Address') {this.value = '';}" onblur="if(this.value == '') {this.value = 'Enter Street Address';}" /></p> 
      <p style="color:white">City, State, Zip:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="city" id="city" size="30" value="Enter City" onfocus="if(this.value == 'Enter City') {this.value = '';}" onblur="if(this.value == '') {this.value = 'Enter City';}" /><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="state" id="state" size="10" maxlength="3" value="Enter State" onfocus="if(this.value == 'Enter State') {this.value = '';}" onblur="if(this.value == '') {this.value = 'Enter State';}" />&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="zipCode" id="zipCode" size="20" maxlength="10" value="Enter Zip Code" onfocus="if(this.value == 'Enter Zip Code') {this.value = '';}" onblur="if(this.value == '') {this.value = 'Enter Zip Code';}" /><br /><br /></p> 
      <p style="color:white">Email Address:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="emailAddress" id="emailAddress" size="50" value="Enter Email Address" onfocus="if(this.value == 'Enter Email Address') {this.value = '';}" onblur="if(this.value == '') {this.value = 'Enter Email Address';}" /></p> 
      <p style="color:white">Password:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="password" id="password" size="50" /><br /><br /> 
      Confirm Password:&nbsp;<input type="password" name="password_confirm" id="password_confirm" size="50" onblur="confirmPassword();" /><br /><br /></p> 
      <p> 
       <input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Cancel" /> 
      </p> 
    </form> 
</body> 

這裏是JavaScript:

function registerForm() { 
      var userName = document.getElementById('userName').value; 
      var sAdd = document.getElementById('sAdd').value; 
      var city = document.getElementById('city').value; 
      var state = document.getElementById('state').value; 
      var zip = document.getElementById('zipCode').value; 
      var emailAddress = document.getElementById('emailAddress').value; 
      var password = document.getElementById('password').value; 
      var regDate = new Date(); 
      regDate.setFullYear(regDate.getFullYear() + 1); 
      document.cookie = "username=" + encodeURIComponent(userName) + "; expires=" + regDate.toUTCString(); 
      document.cookie = "street=" + encodeURIComponent(sAdd) + "; expires=" + regDate.toUTCString(); 
      document.cookie = "city=" + encodeURIComponent(city) + "; expires=" + regDate.toUTCString(); 
      document.cookie = "state=" + encodeURIComponent(state) + "; expires=" + regDate.toUTCString(); 
      document.cookie = "zip=" + encodeURIComponent(zip) + "; expires=" + regDate.toUTCString(); 
      document.cookie = "emailAddress=" + encodeURIComponent(emailAddress) + "; expires=" + regDate.toUTCString(); 
      document.cookie = "password=" + encodeURIComponent(password) + "; expires=" + regDate.toUTCString(); 
      window.alert("Thank you for registering!"); 
      close.this(); 
     } 

     function confirmSubmit(){ 
     //This function will validate that all the fields are filled in. It will also 
     //check that the email address is a valid form of email address. If a box is not 
     //valid, then it sets the focus on that field. 

      //This will verify the username field has been filled out 
      if(document.getElementById('userName').value == "Enter Username" 
      || document.getElementById('userName').value == ""){ 
       alert("You must enter a username"); 
       document.getElementById('userName').focus(); 
       return false; 
      } // end userName if statement 

      //This will verify that the username is not already in use 
      if(document.cookie.length == 0){ 
       return false; 
      } 
      else{ 
       var savedData = decodeURIComponent(document.cookie); 
       var dataArray = savedData.split("; "); 
       var storedName; 
       for (var i = 0; i < dataArray.length; ++i) { 
        if (dataArray[i].substring(0,dataArray[i].indexOf("="))== "username") { 
         storedName = dataArray[i].substring(dataArray[i].indexOf("=") + 1,dataArray[i].length); 
        } 
       } 
       if(document.getElementById('userName').value == storedName){ 
        alert("Username already being used, please choose another Username"); 
       } 
       return false; 
      } 

      //This will verify the street address field has been filled out 
      if(document.getElementById('sAdd').value == "Enter Street Address" 
      || document.getElementById('sAdd').value == ""){ 
       alert("You must enter a street address"); 
       document.getElementById('sAdd').focus(); 
       return false; 
      } // end sAdd if statement 


      //This will verify the city field has been filled out 
      if(document.getElementById('city').value == "Enter City" 
      || document.getElementById('city').value == ""){ 
       alert("You must enter a city"); 
       document.getElementById('city').focus(); 
       return false; 
      } // end city if statement 


      //This will verify the state field has been filled out 
      if(document.getElementById('state').value == "Enter State" 
      || document.getElementById('state').value == ""){ 
       alert("You must enter a state"); 
       document.getElementById('state').focus(); 
       return false; 
      } // end state if statement 


      //This will verify the zip code field has been filled out 
      if(document.getElementById('zipCode').value == "Enter Zip Code" 
      || document.getElementById('zipCode').value == ""){ 
       alert("You must enter a zip code"); 
       document.getElementById('zipCode').focus(); 
       return false; 
      } // end zipCode if statement 


      //This will verify the email Address field has been filled out 
      if(document.getElementById('emailAddress').value == "Enter Email Address" 
      || document.getElementById('emailAddress').value == ""){ 
       alert("You must enter a email address"); 
       document.getElementById('emailAddress').focus(); 
       return false; 
      } // end emailAddress if statement 

      var emailPattern = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; 
      var email = document.getElementById('emailAddress').value; 
      if(!email.match(emailPattern)){ 
       alert("You must enter a valid email address"); 
       document.getElementById('emailAddress').focus(); 
       return false; 
      } 

      //This will verify the password field has been filled out 
      if(document.getElementById('password').value == ""){ 
       alert("You must enter a password"); 
       document.getElementById('password').focus(); 
       return false; 
      } // end password if statement 

      var submitForm = window.confirm("Are you sure you want to submit the form?"); 
      if(submitForm == true) 
       return registerForm(); 
      else{ 
       return false; 
      } 
     } // end confirmSubmit function 

     function confirmReset(){ 
      var resetForm = window.confirm("Are you sure you want to reset the form?"); 
      if(resetForm == true) 
       return true; 
      return false; 
     } // end confirmReset function 

     function confirmPassword(){ 
     //Function should check to see if the two passwords entered are the same.. 
     //if they are not, pop up an alert and set the focus back to password 
      var password = document.getElementById('password').value; 
      var password_confirm = document.getElementById('password_confirm').value; 
      if(password != password_confirm){ 
       alert("Passwords do not match."); 
       document.getElementById('password').value = ""; 
       document.getElementById('password_confirm').value = ""; 
       document.getElementById('password').focus(); 
      } // end if statement 
     } // end confirmPassword function 

它應該返回到登錄頁面,但它不會後腦勺有。有什麼想法嗎?

+0

爲什麼你不使用Jquery解決方案?對於JavaScript中的cookie,你需要做額外的工作。如果您對Jquery解決方案感興趣,那麼請通過添加jQUERY標籤,讓我知道並編輯您的問題 – Alex

+0

也許小提琴幫助我們協助您? – vpzomtrrfrt

+0

@MikeMastro檢查我的答案。 javascript解決方案 – Alex

回答

0

您需要使用path = /保存cookie。否則您的cookie將只能通過您當前的頁面訪問(您正在編寫cookie的地方)。使用以下內容

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2015 12:00:00 UTC; path=/";