I am making a program in where a form will be submitted, then the user will be redirected to the profile page. If one of the items is blank, the form will restart. However, the comment section & password of the registration is not displayed in the profile page, and that the registration does not restart when one of the items is left blank. Furthermore, the gender should also be included in display in the profile page, however, i have no idea how, since that it is a radio option.
Is there a typo in it? And how do I display the information that I haven't displayed? Thanks
Code (registration):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style type=text/css>
ul {list-style-type: none; margin: 0; padding: 0; background-color: rgb(42,157,143); overflow: hidden;}
li{float: left;}
li a:link{display: block; color: black; padding: 10px; text-decoration: none;}
li a:visited{color: orange;}
li a:hover {background-color: rgb(38,70,83); color: blue;}
li a.active {background-color: rgb(138,177,125); color: red;}
.leftdiv
{
float: up;
}
.rightdiv
{
float: down;
width: 100px;
}
div
{
padding : 1%;
color: blue;
background color: white;
width: 40%;
border: blue;
}
span
{
color : blue;
background-color: white;
margin: 8px;
font-size: 25x;
.sprite {
display:block;
position:relative;
width:50px;
height:50px;
border:1px solid red;
overflow:hidden;
}
#fb {
position:absolute;
top:0;
left:0;
}
#fb:hover {
position:absolute;
top:-50px;
left:0;
}
form
{
color : blue;
background-color: white;
margin: 8px;
font-size: 25x;
}
</style>
<body>
<script>
function passvalues()
{
var name=document.getElementById("name1").value;
localStorage.setItem("textvalues", name);
var name=document.getElementById("name2").value;
localStorage.setItem("textvalue", name);
var name=document.getElementById("email").value;
localStorage.setItem("emailvalues", name);
var name=document.getElementById("pword").value;
localStorage.setItem("passwordvalues", name);
var name=document.getElementById("tArea").value;
localStorage.setItem("textareavalue", name);
return false;
}
</script>
<body>
<nav>
<form action="Profilepage.html">
<fieldset form="signup" width=10px; style=border-style:solid; color : "black"; border-width:1px; padding:10px; text-align:left;">
<legend>Register: </legend>
<label for="name1">*First Name:</label>
<input type="text" id="name1" name="name1" required/><br><br>
<label for="name2">*Last Name:</label>
<input type="text" id="name2" name="name2" required/><br><br>
<p>*Your Gender:</p>
<input type="radio" id="male" name="gender" value="Male" required/>
<label for="male">Male</label></br>
<input type="radio" id="female" name="gender" value="Female" required/>
<label for="female">Female</label></br>
<input type="radio" id="prefernotsay" name="gender" value="Prefer not say" required/>
<label for="prefernotsay">Prefer Not Say</label>
<br>
<br>
<label for="email">*Email Address:</label>
<input type="email" id="email" name="email" required/><br><br>
<label for="number">#Number:</label>
<input type="text" id="number" name="Number" required/><br><br>
<label for="pword">*Your Password: </label>
<input type="password" id="pword" name="pword" required/>
<br>
<br>
<label for="cmmnts">*Reasons for registering: </label></br>
<input type="textarea" textarea id="tArea" name="cmmnts" rows="4" cols="50" required/> </textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="passvalues()"/>
</fieldset>
</form>
</nav>
</body>
</html>
Code (Profilepage):
<!DOCTYPE html>
<html>
<head>
</head>
<style type=text/css>
ul {list-style-type: none; margin: 0; padding: 0; background-color: rgb(42,157,143); overflow: hidden;}
li{float: left;}
li a:link{display: block; color: black; padding: 10px; text-decoration: none;}
li a:visited{color: orange;}
li a:hover {background-color: rgb(38,70,83); color: blue;}
li a.active {background-color: rgb(138,177,125); color: red;}
.leftdiv
{
float: up;
}
.rightdiv
{
float: down;
width: 100px;
}
div
{
padding : 1%;
color: blue;
background color: white;
width: 40%;
border: blue;
}
span
{
color : blue;
background-color: white;
margin: 8px;
font-size: 25x;
.sprite {
display:block;
position:relative;
width:50px;
height:50px;
border:1px solid red;
overflow:hidden;
}
#fb {
position:absolute;
top:0;
left:0;
}
#fb:hover {
position:absolute;
top:-50px;
left:0;
}
</style>
<body>
<div>
<p>First Name: </p>
<span id="name1"></span>
<br>
<br>
<p>Last Name: </p>
<span id="name2"></span>
<br>
<br>
<p>Email: </p>
<span id="email"></span>
<br>
<br>
<p>Why I support this campaign: </p>
<span id="tArea"></span>
</div>
<script>
document.getElementById("name1").innerHTML=localStorage.getItem("textvalues");
document.getElementById("name2").innerHTML=localStorage.getItem("textvalue");
document.getElementById("email").innerHTML=localStorage.getItem("emailvalues");
document.getElementById("pword").innerHTML=localStorage.getItem("passwordvalues");
document.getElementById("tArea").innerHTML=localStorage.getItem("textArea");
</script>
</body>
</html>
CodePudding user response：
You have two <body> in your Code (registration),and your can put in the head like
<head>
<script>
xxx
</script>
<style>
xxx
</style>
</head>
make sure that your html tags in your body like
<body>
<nav>
xxx
</nav>
</body>
and if you want get your radio select result,try
let gender = ''
document.getElementsByTagName("gender").forEach((item)=>{
if(item.checked){
gender = item.value;
});
CodePudding user response：
**home.html**
<!DOCTYPE html>
<html lang="en">
<head>
<style type=text/css>
ul {list-style-type: none; margin: 0; padding: 0; background-color: rgb(42,157,143); overflow: hidden;}
li{float: left;}
li a:link{display: block; color: black; padding: 10px; text-decoration: none;}
li a:visited{color: orange;}
li a:hover {background-color: rgb(38,70,83); color: blue;}
li a.active {background-color: rgb(138,177,125); color: red;}
.leftdiv{
float: up;
}
.rightdiv{
float: down;
width: 100px;
}
div{
padding : 1%;
color: blue;
/* corrected background color to background-color*/
background-color: white;
width: 40%;
border: blue;
}
span{
color : blue;
background-color: white;
margin: 8px;
font-size: 25x;
/* missing the close tag */
}
.sprite {
display:block;
position:relative;
width:50px;
height:50px;
border:1px solid red;
overflow:hidden;
}
#fb {
position:absolute;
top:0;
left:0;
}
#fb:hover {
position:absolute;
top:-50px;
left:0;
}
form{
color : blue;
background-color: white;
margin: 8px;
font-size: 25x;
}
</style>
<script>
function passvalues()
{
var name=document.getElementById("name1").value;
localStorage.setItem("textvalues", name);
var name=document.getElementById("name2").value;
localStorage.setItem("textvalue", name);
var radio= document.getElementById("myRadio").value
localStorage.setItem("emailvalues", name);
var name=document.getElementById("radio").value;
localStorage.setItem("emailvalues", name);
var name=document.getElementById("pword").value;
localStorage.setItem("passwordvalues", name);
var name=document.getElementById("tArea").value;
localStorage.setItem("textareavalue", name);
return false;
}
</script>
</head>
<body>
<nav>
<form action="profile.html">
<!-- missed " in style" -->
<fieldset form="signup" width=10px; style="border-style:solid; color : black; border-width:1px; padding:10px; text-align:left;">
<legend>Register: </legend>
<label for="name1">*First Name:</label>
<input type="text" id="name1" name="name1" required/><br><br>
<label for="name2">*Last Name:</label>
<input type="text" id="name2" name="name2" required/><br><br>
<p>*Your Gender:</p>
<input type="radio" id="radio" name="gender" value="Male" required/>
<label for="male">Male</label></br>
<input type="radio" id="radio" name="gender" value="Female" required/>
<label for="female">Female</label></br>
<input type="radio" id="radio" name="gender" value="Prefer not say" required/>
<label for="prefernotsay">Prefer Not Say</label>
<br>
<br>
<label for="email">*Email Address:</label>
<input type="email" id="email" name="email" required/><br><br>
<label for="number">#Number:</label>
<input type="text" id="number" name="Number" required/><br><br>
<label for="pword">*Your Password: </label>
<input type="password" id="pword" name="pword" required/>
<br>
<br>
<label for="cmmnts">*Reasons for registering: </label></br>
<input type="textarea" textarea id="tArea" name="cmmnts" rows="4" cols="50" required/> </textarea>
<br>
<br>
<input type="submit" value="Submit" onclick="passvalues()"/>
</fieldset>
</form>
</nav>
</body>
</html>
**profile.hrml**
<!DOCTYPE html>
<html>
<head>
</head>
<style type=text/css>
ul {list-style-type: none; margin: 0; padding: 0; background-color: rgb(42,157,143); overflow: hidden;}
li{float: left;}
li a:link{display: block; color: black; padding: 10px; text-decoration: none;}
li a:visited{color: orange;}
li a:hover {background-color: rgb(38,70,83); color: blue;}
li a.active {background-color: rgb(138,177,125); color: red;}
.leftdiv{
float: up;
}
.rightdiv{
float: down;
width: 100px;
}
div{
padding : 1%;
color: blue;
background-color: white;
width: 40%;
border: blue;
}
span{
color : blue;
background-color: white;
margin: 8px;
font-size: 25x;
}
.sprite {
display:block;
position:relative;
width:50px;
height:50px;
border:1px solid red;
overflow:hidden;
}
#fb {
position:absolute;
top:0;
left:0;
}
#fb:hover {
position:absolute;
top:-50px;
left:0;
}
</style>
<body>
<div>
<p>First Name: </p>
<span id="name1"></span>
<br>
<br>
<p>Last Name: </p>
<span id="name2"></span>
<br>
<br>
<p>Email: </p>
<span id="email"></span>
<br>
<br>
<p>Why I support this campaign: </p>
<span id="tArea"></span>
</div>
<script>
document.getElementById("name1").innerHTML=localStorage.getItem("textvalues");
document.getElementById("name2").innerHTML=localStorage.getItem("textvalue");
document.getElementById("email").innerHTML=localStorage.getItem("emailvalues");
document.getElementById("pword").innerHTML=localStorage.getItem("passwordvalues");
document.getElementById("tArea").innerHTML=localStorage.getItem("textArea");
</script>
</body>
</html>
see what is the different between this code and your code I have set some comments there you have missed small parts in your code (you have done same mistakes in profile.html)
as well as dont use two body tag and you haven't close one body tag too
And if you want to get radio values you can simply use following code
var radio= document.getElementById("myRadio").value
just make id="myRadio" use same ID for all the radio button then above code will get the clicked radio value
I have separate the code home.html and profile.html
You can test this creating two separate html file in same folder . Then copy and past the code to home.html and profile.html open the home.html in browser. after you input the value your page will be redirect to profile.html with the data that you input.