[英]Present the data from one page to another page using cookies ,javascript and html
我使用Html和JavaScript开发了第1页和第2页 。 我正在尝试从第1页获取数据并使用Cookie和JavaScript将其显示在第2页上。 你可以看到下面的代码：
Page 1:
<!DOCTYPE html>
<html>
<head>
<script>
function Submit(){
var ck_name = /^[A-Za-z0-9 ]{3,20}$/;
//var emailRegex= /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
var ck_username = /^[A-Za-z0-9_]{3,20}$/;
var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
var fname=document.form.firstname.value,
lname=document.form.lastname.value,
femail=document.form.email.value,
fuser=document.form.username.value,
fpassword=document.form.password.value,
fconpassword=document.form.confirmpassword.value,
fmonth=document.form.birthday_month.value,
fday=document.form.birthday_day.value,
fyear=document.form.birthday_year.value;
if(fname == "")
{
document.form.firstname.focus();
document.getElementById("elmfirstnameError").innerHTML="Enter the First Name ";
return false;
}else if(!ck_name.test(fname)){
document.form.firstname.focus();
document.getElementById("elmfirstnameError").innerHTML=" Enter 3-20 character and no special charater";
return false;
}else {
document.getElementById("elmfirstnameError").innerHTML=" ";
}
if(lname == "")
{
document.form.lastname.focus();
document.getElementById("elmlastnameError").innerHTML="Enter the Last Name ";
return false;
}else if(!ck_name.test(lname)){
document.form.lastname.focus();
document.getElementById("elmlastnameError").innerHTML="Enter 3-20 character and no special charater";
return false;
}else {
document.getElementById("elmlastnameError").innerHTML=" ";
}
if(femail == "")
{
document.form.email.focus();
document.getElementById("elmemailError").innerHTML="Enter the Email Address";
return false;
}else if(!ck_email.test(femail)){
document.form.email.focus();
document.getElementById("elmemailError").innerHTML="You have entered an Invalid Email Address!";
return false;
}else {
document.getElementById("elmemailError").innerHTML=" ";
}
if(fuser == "")
{
document.form.username.focus();
document.getElementById("elmeusernameError").innerHTML="Enter the Username";
return false;
}else if(!ck_username.test(fuser)){
document.form.username.focus();
document.getElementById("elmeusernameError").innerHTML="Enter the Username with 3-20 characters & no special charater";
return false;
}else {
document.getElementById("elmeusernameError").innerHTML=" ";
}
if(fpassword == "")
{
document.form.password.focus();
document.getElementById("elmepasswordError").innerHTML="Enter the Password";
return false;
}else if(!ck_password.test(fpassword)){
document.form.password.focus();
document.getElementById("elmepasswordError").innerHTML="Enter the Password with 6-20 characters";
return false;
}else {
document.getElementById("elmepasswordError").innerHTML=" ";
}
if( fconpassword=="")
{
document.form.confirmpassword.focus();
document.getElementById("elmeconfirmpasswordError").innerHTML="Enter the Confirm Password";
return false;
}else if(!ck_password.test( fconpassword)){
document.form.confirmpassword.focus();
document.getElementById("elmeconfirmpasswordError").innerHTML="Should match with Password";
return false;
}else {
document.getElementById("elmeconfirmpasswordError").innerHTML=" ";
}
if(fconpassword != fpassword )
{
document.form.confirmpassword.focus();
document.getElementById("elmere-enterpasswordError").innerHTML="Passwords are not matching,re-enter again";
return false;
}else {
document.getElementById("elmere-enterpasswordError").innerHTML=" ";
}
if(fmonth=="")
{
document.form.birthday_month.focus();
document.getElementById("elmebirthday_monthError").innerHTML="Select the Birthday of Month";
return false;
}else {
document.getElementById("elmebirthday_monthError").innerHTML=" ";
}
if(fday=="")
{
document.form.birthday_day.focus();
document.getElementById("elmebirthday_dayError").innerHTML="Select the Birthday of Day";
return false;
}else {
document.getElementById("elmebirthday_dayError").innerHTML=" ";
}
if(fyear=="")
{
document.form.birthday_year.focus();
document.getElementById("elmebirthday_yearError").innerHTML="Select the Birthday of Year";
return false;
}else {
document.getElementById("elmebirthday_yearError").innerHTML=" ";
}
if(document.form.radiobutton[0].checked==false && document.form.radiobutton[1].checked == false){
document.getElementById("elmeGenderError").innerHTML="Select Your Gender";
return false;
}else {
document.getElementById("elmeGenderError").innerHTML=" ";
}
if(fname!='' && lname!='' && femail!='' && fuser!='' && fpassword!='' && fconpassword!='' && fmonth!='' && fday!='' && fyear!=''){
location.href="Useraccountpage.htm";
return false;
}
}
function Cancel(){
window.location="Loginpage.htm";
return false;
}
</script>
</head>
<body>
<div id="Holder">
<!----------Header---------->
<div id="Header">
</div>
<!----------NAVBAR---------->
<div id="NavBar">
<nav>
<ul>
<li><a href="Registrationpage.htm">Register</a></li>
<li><a href ="Useraccountpage.htm"></a></li>
</ul>
</div>
<div id="Content">
<div id="PageHeading">
</div>
<div id="ContentLeft">
<br>
</div>
<div id="ContentRight">
<section class="loginform cf">
<form name="form" action="Useraccountpage.htm" method="post" id="form_id">
<table class="center">
<tr>
<td><label for="first-name">First Name</label></td>
<td><label for="last_name">Last Name</label></td>
</tr>
<tr>
<td> </td>
</tr>
<tr >
<td>
<input type="text" class="styletxtfields" id="firstname" name="firstname" placeholder="FirstName">
</td>
<td>
<input type="text" class="styletxtfields" id="lastname" name="lastname" placeholder="LastName">
</td>
</tr>
<tr><td id="elmfirstnameError" colspan="2" class="errorMsg" ></td></tr>
<tr><td id="elmlastnameError" colspan="2" class="errorMsg" > </td></tr>
<tr>
<td>
<label for="email">Email Id</label>
<br>
<br>
<input type="email" class="styletxtfields" name="email" id="lastname" placeholder="Enter the Email ID">
</td>
</tr>
<tr>
<td id="elmemailError" colspan="2" class="errorMsg" > </td>
</tr>
<tr>
<td>
<label for="user">User Name</label>
<br>
<br>
<input type="text" class="styletxtfields" name="username" placeholder="UserName">
</td>
</tr>
<tr>
<td id="elmeusernameError" colspan="2" class="errorMsg"> </td>
</tr>
<tr>
<td><label for="password" >Password</label></td><br>
<td><label for="password" >Confirm Password</label></td><br>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<input type="password" class="styletxtfields" name="password" placeholder="Enter the Password">
</td>
<td>
<input type="password" class="styletxtfields" name="confirmpassword" placeholder="Enter the Conform Password">
</td>
</tr>
<tr><td id="elmepasswordError" colspan="2" class="errorMsg"></td></tr>
<tr><td id="elmeconfirmpasswordError" class="errorMsg"></td></tr>
<tr>
<th id="elmere-enterpasswordError" colspan="2" class="errorMsg"> </th>
</tr>
<tr>
<td>
<label for="DOB">Date of Birthday</label>
</td>
<td>
<select name="birthday_month" class="styleselfield">
<option value="" selected >Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="birthday_day" class="styleselfield" >
<option value="" selected>Day</option>
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="birthday_year" class="styleselfield">
<option value="" selected>Year</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
</select>
</td>
</tr>
<tr><td id="elmebirthday_monthError" class="errorMsg"></td></tr>
<tr><td id="elmebirthday_dayError" class="errorMsg"></td></tr>
<tr><td id="elmebirthday_yearError" class="errorMsg"> </td></tr>
<tr>
<td>
<label for="gender">Gender</label>
</td>
<td>
<input type="radio" name="radiobutton" value="Male">
<label>Male</label>
<input type="radio" name="radiobutton" value="Female">
<label>Female</label>
</td>
</tr>
<tr>
<td id="elmeGenderError" class="errorMsg"> </td>
</tr>
<tr>
<td style="text-align:center">
<input type="button" value="Register" onClick="Submit()" ><br>
</td>
<td style="text-align:center">
<input type="button" onClick="Cancel()" value="Cancel">
</td>
</tr>
</table>
</form>
</section>
</div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
这是我想要来自第1页的数据并在javascript中使用cookie显示的地方：
Page 2 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="layout.css">
<script type="text/javascript">
function getValue(varname)
{ var url = window.location.href;
var qparts = url.split("?");
if (qparts.length == 0)
{
return "";
}
var query = qparts[1];
var vars = query.split("&");
var value = "";
for (i=0;i<vars.length;i++)
{
var parts = vars[i].split("=");
if (parts[0] == varname)
{
value = parts[1];
break;
}
}
value = unescape(value);
value.replace(/\+/g," ");
return value;
}
</script>
</head>
<body>
<div id="Holder">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
</ul>
</div>
<div id="Content">
<div id="PageHeading">
<h1>WELCOME TO USER ACCOUNT</h1>
</div>
<div id="ContentLeft">
<h2>Your Message Here</h2><br>
<br>
<h6>
Your Message</h6>
</div>
<div id="ContentRight">
<form onload="getValue(varname)">
<table align="center">
<tr>
<td> First Name</td>
<td><Label id="sfName"></label></td>
</tr>
<tr>
<td> LastName :</td>
<td><Label id="slName"></label></td>
</tr>
<tr>
<td>Email</td>
<td><Label id="semail"></Label></td>
</tr>
<tabel>
</form>
<script>
var fname=getValue("firstname");
var lname=getValue("lastname");
var email = getValue("email");
document.getElementById("sfName").innerHTML= fname;
document.getElementById("slName").innerHTML= lname;
document.getElementById("semail").innerHTML= email;
</script>
</div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
你问的实际问题是什么？ 如果页面位于同一个域中，您可以尝试使用localStorage或sessionStorage来共享数据。
Cookie是持久的，自动包含在每个get / post中，而不是您似乎想要完成的最佳选择。
您的示例中的帖子不会通过href属性共享。 表单帖子将数据发送到服务器。 HTM输出不会直接看到该数据。
最好的选择是在服务器上处理提交的数据，最好是通过https。 服务器端脚本语言接收数据，可用于更新数据库。 例如，在Lucee中填充了一个名为FORM的结构，在php中填充了一个名为$ _POST的命名数组。
如果失败，如果数据需要浏览器持久化，则将其存储在localStorage或sessionStorage中。 如果它只需要在页面之间传递，那么就这样做; 但是，在消费时删除条目。
第1页：
<input name="firstname" onchange="localStorage.firstName=this.value;">
第2页：
document.getElementById("firstname").innerHTML=localStorage.firstName;
// - if not persistent: localStorage.removeItem("firstName");
如何使用javascript将数据从一个html页面传输到另一页面
[英]how to transfer data from one html page to another using javascript
使用 javascript 将数据从一个 html 页面转移到另一个页面
[英]Carrying over data from one html page to another using javascript
如何仅使用JavaScript将表单数据从一个HTML页面传递到另一HTML页面？
[英]How do I pass form data from one HTML page to another HTML page using ONLY javascript?
如何使用Phonegap中的JavaScript将数据从一个html传递到另一个html页面？
[英]How to pass the data from one html to another html page using JavaScript in Phonegap?
使用 cookie 在单击时将搜索值从一个 html 页面文本框传递到另一个 html 页面文本框？
[英]Pass Search value from one html page text box to another html page text box on click using cookies?
如何使用 JavaScript 将数据从一个 HTML 页面传递到另一个页面
[英]How can i pass data from one HTML page to another using JavaScript
如何使用JavaScript将HTML FORM数据从一个页面发送到另一个页面
[英]How to send HTML FORM data from one page to another using JavaScript
如何使用JavaScript将列表组之类的数据从一个HTML页面传递到另一HTML页面？
[英]How can I pass data like list group from one html page to another using JavaScript?
如何使用Ajax从一个HTML页面中使用数据来检索要在另一HTML页面上使用的数据
[英]How to use data from one HTML page to retrieve data to be used on another HTML page using ajax
使用 JavaScript 从一个 HTML 页面和 output 到另一个 Z4C4AD5FCA2E7A18AA74DBB1CED003 页面获取输入
[英]Using JavaScript to take input from one HTML page and output to another HTML page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.