注册javascript后如何重定向到个人资料页面？
[英]How to redirect to profile page after registering javascript?
问题描述
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>
2 个解决方案
解决方案1
0 2022-06-02 02:42:20
You have two <body> in your Code (registration),and your can put in the head like你的代码中有两个<body> （注册），你可以像
<head>
<script>
xxx
</script>
<style>
xxx
</style>
</head>
make sure that your html tags in your body like确保你身体中的 html 标签喜欢
<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;
});
解决方案2
0 2022-06-02 03:54:50
**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)看看这段代码和你的代码有什么不同我已经设置了一些注释你错过了代码中的小部分（你在 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只需让id="myRadio"为所有单选按钮使用相同的 ID，然后上面的代码将获得单击的单选值
I have separate the code home.html and profile.html我将代码home.html和profile.html分开
You can test this creating two separate html file in same folder .您可以测试这个在同一个文件夹中创建两个单独的 html 文件。 Then copy and past the code to home.html and profile.html open the home.html in browser.然后将代码复制并粘贴到home.html和profile.html在浏览器中打开home.html 。 after you input the value your page will be redirect to profile.html with the data that you input.输入值后，您的页面将使用您输入的数据重定向到profile.html 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
注册用户后如何将用户导航（重定向）到页面 - React - How to navigate (redirect) a user to a page after registering the user - React
如何在 ReactJS 中登录页面后重定向/转到用户配置文件 - How to Redirect/go to the User Profile after login page in ReactJS
重新加载JavaScript后如何重定向页面？ - How to redirect page after reload in javascript?
JavaScript：验证后如何重定向页面 - JavaScript: How to redirect a page after validation
发送JavaScript表单后如何重定向页面 - how to redirect page after sending javascript form
如何让 jsx "to: "/profile"" 重定向并加载配置文件页面？ - How to get react jsx "to: "/profile"" to redirect and load the profile page?
单击应用程序通知后，如何重定向到我的应用程序配置文件页面？ - How do I redirect to my application profile page after I click on the application notification?
成功登录后如何使用javascript重定向到另一个页面？ - How to redirect to another page using javascript after successful login?
使用JavaScript在Firebase登录后如何重定向到另一个页面？ - How to redirect to another page after firebase login using javascript?
使用JavaScript下载后如何重定向到新页面？ - How do I redirect to a new page after a download using Javascript?
相关标签