쿠키, 자바 스크립트, HTML을 사용하여 registartion 양식 값을 다른 HTML 페이지로 가져 오시겠습니까?

쿠키 및 JavaScript를 사용하여 한 HTML 페이지에서 다른 HTML 페이지로 데이터 값을 표시하려고합니다. "Method = Get"을 사용할 때 URL은 브라우저의 "details.html"에 등록 페이지의 값을 표시합니다. 그러나 "Method = POST"를 시도하면 쿠키와 JavaScript를 사용하여 "details.htm"에 값을 표시 할 수 없습니다.쿠키, 자바 스크립트, HTML을 사용하여 registartion 양식 값을 다른 HTML 페이지로 가져 오시겠습니까?

하는 사람 쿠키와 자바 스크립트를 사용하여 details.htm하는 register.htm에서 값을 표시하는 데 도움이 할 수 있습니다. JS와 두 개의 HTML과 함께 : Register.htm 파일 :

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body {background-color:lightblue;} 
h1 {color:blue; 
    text-align:center; 
    text-decoration:underline;} 
.rightAlign {text-align:right; 
      padding-right:5px; 
      width:50%} 
</style> 
<script> 
function clearData() { 
document.forms[0].firstname.value=""; 
document.forms[0].lastname.value=""; 
document.forms[0].dob.value=""; 
document.forms[0].state.value=""; 
document.forms[0].email.value=""; 
document.forms[0].tel.value=""; 
document.forms[0].pwd.value=""; 
document.getElementById('male').checked=false; 
document.getElementById('female').checked=false; 
} 

function submitData() { 

document.cookie='cookie_firstname='+document.forms[0].firstname.value+'path=/' 
document.cookie='cookie_lastname='+document.forms[0].lastname.value+'path=/' 
document.cookie='cookie_dob='+document.forms[0].dob.value+'path=/' 
document.cookie='cookie_state='+document.forms[0].state.value+'path=/' 
document.cookie='cookie_email='+document.forms[0].email.value+'path=/' 
document.cookie='cookie_tel='+document.forms[0].tel.value+'path=/' 
document.cookie='cookie_sex='+document.forms[0].sex.value+'path=/' 
document.cookie='cookie_pwd='+document.forms[0].pwd.value+'path=/' 

document.forms[0].submit(); 
} 



</script> 
</head> 

<body> 
<form action="regDetails.html" method="post" onsubmit="submitData()"> 

<table style="border:0px; width:100%"> 
<tr><td colspan = 2> 
<h1>Online Registration</h1> 
</td> 
</tr> 

<tr><td colspan = 2 class="rightAlign"> 
<p style="color:red; font-family:verdana; font-size:11px;"><b>Note:</b> All * marks fields are mandatory to fill.</p> 
</td> 
</tr> 

<tr> 
<td class"rightAlign"><b>First Name</b><label style="color:red;">*</label></td> 
<td style="font-family:courier;"><input type="text" id="firstname" name="firstname" required/></td> 
</tr> 

<tr> 
<td class"rightAlign"><b>Last Name</b><label style="color:red;"></label></td> 
<td style="font-family:courier;"><input type="text" id="lastname" name="lastname"></td> 
</tr> 

<tr> 
<td class"rightAlign"><b>Date Of Birth</b><label style="color:red;">*</label></td> 
<td style="font-family:courier;"><input type="date" id="dob" name="dob" required /></td> 
</tr> 

<tr> 
<td class"rightAlign"><b>Sex</b><label style="color:red;">*</label></td> 
<td style="font-family:courier;"> 
<input type="radio" name="sex" value="male" id="male" required>Male 
<input type="radio" name="sex" value="female" id="female" required>Female</td> 
</tr> 

<tr> 
<td class"rightAlign"><b>State</b><label style="color:red;">*</label></td> 
<td style="font-family:courier;"><input list="state" id="state" name="state" required/></td> 
<datalist id="state"> 
<option value="punjab"> 
<option value="delhi"> 
<option value="haryana"> 
<option value="odisha"> 
<option value="madhyapradesh"> 
<option value="chattisgarh"> 
<option value="karnataka"> 
<option value="tamilnadu"> 
<option value="goa"> 
<option value="rajasthan"> 
<option value="bihar"> 
<option value="andhrapradesh"> 
</datalist> 
</tr> 

<tr> 
<td class"rightAlign"><b>Email Id</b><label style="color:red;">*</label></td> 
<td style="font-family:courier;"><input type="email" id="email" name="email" required/></td> 
</tr> 

<tr> 
<td class"rightAlign"><b>Telephone</b><label style="color:red;"></label></td> 
<td style="font-family:courier;"><input type="text" id="tel" name="tel"></td> 
</tr> 

<tr> 
<td class"rightAlign"><b>Password</b><label style="color:red;">*</label></td> 
<td style="font-family:courier;"><input type="password" id="pwd" name="pwd" required/></td> 
</tr> 

<tr> 
<td style="padding-top:10px"> 
<input type="submit" value="Submit" /></td> 
<td class"rightAlign" style="padding-top:10px"> 
<button type="button" onclick="clearData()">Clear</button> 
</td> 
</tr> 

</table> 
</form> 
</body> 
</html> 

details.html 
<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<script type="text/javascript" src="js/quiz.js"> 
</script> 
</head> 

<body onload="showDetails()"> 
<form> 

<div id="detailsContainerDiv"> 
<p>You have registered successfully with the following details:-</p> 

<div id="details" style="width:400px;"> 
<table style="width:400px;" border="1"> 
<tr><td>First Name</td><td id="firstname" class="bold"></td></tr> 
<tr><td>Last Name</td><td id="lastname" class="bold"></td></tr> 
<tr><td>DOB</td><td id="dob" class="bold"></td></tr> 
<tr><td>Sex</td><td id="sex" class="bold"></td></tr> 
<tr><td>State</td><td id="state" class="bold"></td></tr> 
<tr><td>Email</td><td id="email" class="bold"></td></tr> 
<tr><td>Telephone</td><td id="tel" class="bold"></td></tr> 
<tr><td>Password</td><td id="pwd" class="bold"></td></tr> 
</table> 

</div> 
<br /> 
<div> 
<button type="button" onclick="startQuiz()">Start Quiz</button> 
</div> 
</div> 
<div id= "quizContainerDiv" style="display:none;"> 
<ol> 

<li> 
<h3>What is the capital of Tamilnadu?</h3> 
<div> 
<input type="radio" name="q1ans" id="q1ans-A" value="A"/> 
<label for="q1ans-A">A)Chennai</label> 
</div> 
<div> 
<input type="radio" name="q1ans" id="q1ans-B" value="B"/> 
<label for="q1ans-B">B)Bangalore</label> 
</div> 
<div> 
<input type="radio" name="q1ans" id="q1ans-C" value="C"/> 
<label for="q1ans-C">C)Delhi</label> 
</div> 
<div> 
<input type="radio" name="q1ans" id="q1ans-D" value="D"/> 
<label for="q1ans-D">D)None of the above</label> 
</div> 
</li> 

<li> 
<h3>Who is the current Prime Minister of India?</h3> 
<div> 
<input type="radio" name="q2ans" id="q2ans-A" value="A"/> 
<label for="q2ans-A">A)Rahul Gadhi</label> 
</div> 
<div> 
<input type="radio" name="q2ans" id="q2ans-B" value="B"/> 
<label for="q2ans-B">B)Narendra Modi</label> 
</div> 
<div> 
<input type="radio" name="q2ans" id="q2ans-C" value="C"/> 
<label for="q2ans-C">C)Manmohan Singh</label> 
</div> 
<div> 
<input type="radio" name="q2ans" id="q2ans-D" value="D"/> 
<label for="q2ans-D">D)None of the above</label> 
</div> 
</li> 

<li> 
<h3>Who is the winner of 2015 Cricket WorldCup?</h3> 
<div> 
<input type="radio" name="q3ans" id="q3ans-A" value="A"/> 
<label for="q3ans-A">A)India</label> 
</div> 
<div> 
<input type="radio" name="q3ans" id="q3ans-B" value="B"/> 
<label for="q3ans-B">B)Australia</label> 
</div> 
<div> 
<input type="radio" name="q3ans" id="q3ans-C" value="C"/> 
<label for="q3ans-C">C)Bangladesh</label> 
</div> 
<div> 
<input type="radio" name="q3ans" id="q3ans-D" value="D"/> 
<label for="q3ans-D">D)Pakistan</label> 
</div> 
</li> 

<li> 
<h3>When is the Independence day of India?</h3> 
<div> 
<input type="radio" name="q4ans" id="q4ans-A" value="A"/> 
<label for="q4ans-A">A)26th January</label> 
</div> 
<div> 
<input type="radio" name="q4ans" id="q4ans-B" value="B"/> 
<label for="q4ans-B">B)15th July</label> 
</div> 
<div> 
<input type="radio" name="q4ans" id="q4ans-C" value="C"/> 
<label for="q4ans-C">C)15th August</label> 
</div> 
<div> 
<input type="radio" name="q4ans" id="q4ans-D" value="D"/> 
<label for="q4ans-D">D)None of the above</label> 
</div> 
</li> 

</ol> 

<button type="button" onclick="submitQuiz()">Submit Quiz</button> 
</div> 

<div id="quizResultDiv" style"display:none;"> 
</div> 

<div> 
<label>Hi <span id="name" class="highlightAns"></span>, you have successfully completed the Quiz.</label> 
<h3><span id="numOfCorrect"></span>/4 correct.</h3> 
<label>your score is <span id="score" class="highlightAns"></span></label> 
</div> 
</form> 
</body> 
</html>

자바 스크립트 파일 :

function showDetails() { 

document.getElementById("firstname").innerHTML = readCookie("cookie_firstname"); 
document.getElementById("lastname").innerHTML = readCookie("cookie_lastname"); 
document.getElementById("dob").innerHTML = readCookie("cookie_dob"); 
document.getElementById("state").innerHTML = readCookie("cookie_state"); 
document.getElementById("email").innerHTML = readCookie("cookie_email"); 
document.getElementById("tel").innerHTML = readCookie("cookie_tel"); 
document.getElementById("sex").innerHTML = readCookie("cookie_sex"); 
document.getElementById("pwd").innerHTML = readCookie("cookie_pwd"); 

} 

function readCookie(name) { 

var nameEQ = name + "="; 
var ca = document.cookie.split(';'); 
for(var i = 0; i < ca.length; i++) 
{ 
var c = ca[i]; 
while (c.cahrAt(0)=='') 
c = c.substring(1,c.length); 
if (c.indexOf(nameEQ) == 0) { 
     var cookieData = c.substring(nameEQ.length,c.length); 
     var actualData = cookieData.substring(0,cookieData.indexOf('path')); 
     return actualData; 
} 
return null; 
} 

function startQuiz() { 
document.getElementById("detailsContainerDiv").style.display='none'; 
document.getElementById("quizContainerDiv").style.display='block'; 
} 


function submitQuiz() { 
document.getElementById("quizContainerDiv").style.display='none'; 
document.getElementById("quizResultDiv").style.display='block'; 

var correctAnsCount = 0; 

if (document.forms[0].q1ans.value == "A") {correctAnsCount++;} 
if (document.forms[0].q2ans.value == "B") {correctAnsCount++;} 
if (document.forms[0].q3ans.value == "B") {correctAnsCount++;} 
if (document.forms[0].q4ans.value == "C") {correctAnsCount++;} 

var score = correctAnsCount*10; 

document.getElementById("name").innerHTML = readCookie("cookie_firstname"); 
document.getElementById("numOfCorrect").innerHTML = correctAnsCount; 
document.getElementById("score").innerHTML = score; 

}

출처

2016-08-05 user3172464

값 저장 :

localstorage.setItem("name in which you want to save value",object/variable)

GET 값 :

localstorage.getItem("name in which you want to save value");

출처

2016-08-05 08:57:58

하지만 나는 쿠키 by document.getElementById ("firstname"). innerHTML = readCookie ("cookie_firstname"); 내 details.html 페이지에서 선언합니다. 나는 위의 텍스트를 계속 유지하는 것을 이해했다. – user3172464

쿠키, 자바 스크립트, HTML을 사용하여 registartion 양식 값을 다른 HTML 페이지로 가져 오시겠습니까?

답변

관련 문제