堆棧內存溢出
  簡體   English   中英

注冊javascript后如何重定向到個人資料頁面？

[英]How to redirect to profile page after registering javascript?

 原文  2022-06-02 02:27:06  1   2    javascript/ html/ local-storage

問題描述

我正在制作一個程序，其中將提交表單，然后用戶將被重定向到個人資料頁面。 如果其中一項為空白，則表單將重新啟動。 但是，注冊的評論部分和密碼不顯示在個人資料頁面中，並且當其中一項留空時，注冊不會重新開始。 此外，性別也應該包含在個人資料頁面的顯示中，但是，我不知道如何，因為它是一個單選選項。

里面有錯別字嗎？ 以及如何顯示我沒有顯示的信息？ 謝謝

代碼（注冊）：

<!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>

代碼（個人資料）：

<!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

你的代碼中有兩個<body> （注冊），你可以像

<head>
  <script>
    xxx
  </script>
  <style>
    xxx
  </style>
</head>

確保你身體中的 html 標簽喜歡

<body>
 <nav>
    xxx
 </nav>
</body>

如果你想得到你的收音機選擇結果，試試

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>

看看這段代碼和你的代碼有什么不同我已經設置了一些注釋你錯過了代碼中的小部分（你在 profile.html 中犯了同樣的錯誤）

以及不要使用兩個身體標簽，你也沒有關閉一個身體標簽

如果你想獲得無線電值，你可以簡單地使用下面的代碼

   var radio= document.getElementById("myRadio").value

只需讓id="myRadio"為所有單選按鈕使用相同的 ID，然后上面的代碼將獲得單擊的單選值

我將代碼home.html和profile.html分開

您可以測試這個在同一個文件夾中創建兩個單獨的 html 文件。 然后將代碼復制並粘貼到home.html和profile.html在瀏覽器中打開home.html 。 輸入值后，您的頁面將使用您輸入的數據重定向到profile.html 。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 注冊用戶后如何將用戶導航（重定向）到頁面 - React 如何在 ReactJS 中登錄頁面后重定向/轉到用戶配置文件 重新加載JavaScript后如何重定向頁面？ JavaScript：驗證后如何重定向頁面 發送JavaScript表單后如何重定向頁面 如何讓 jsx "to: "/profile"" 重定向並加載配置文件頁面？ 單擊應用程序通知后，如何重定向到我的應用程序配置文件頁面？ 成功登錄后如何使用javascript重定向到另一個頁面？ 使用JavaScript在Firebase登錄后如何重定向到另一個頁面？ 使用JavaScript下載后如何重定向到新頁面？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM