两种形式去同一条路线

【问题标题】：Two forms going to same route两种形式去同一条路线
【发布时间】：2022-01-05 11:36:49
【问题描述】：

我正在尝试为我的项目创建一个登录和注册页面，一切正常，但我遇到了一个错误，问题是我的首页上有两个表单，一个默认显示，另一个显示在后面单击一个按钮，其显示被阻止，直到单击该按钮，这是我的 ui 照片

现在的问题是，如果登录表单中填写了一些详细信息，并且我单击“创建新帐户”，它仍然会按照我指定的登录路径进行，如果登录字段为空，则不会出现此问题.

这是我的 HTML 代码：-

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/public/style.css">
    <title>Social Book</title>
</head>
<body>
    
    <div class="main">
        <div class="left_side">
            Socialbook
        </div>
        
        
        <!--  this is the dialog box for signing in-->

        
        <form class="right_side" id="sign_in" action="/sign"  method="post">
            <input class="right_side_items" id="item_1" type="text" placeholder="Enter email" name="email" required ></input>
            <div class="right_side_items" id="item_2"> 
                <input id="item_2_1" type="password" placeholder="Enter Password" id="password_field" name="sign_in_password" required></input>
                <div id="item_2_2" class="eye_img"><img src="/icons/visibility.svg" alt="" onclick="eye()"></div>
                <div id="item_2_3" class="eye_img"><img src="/icons/visibility_off.svg" alt="" onclick="eye_off()"></div>
            </div>
            <button class="right_side_items" id="item_3">Log In</button>
            <div class="right_side_items" id="item_4">Forgotten password?</div>
            <div class="right_side_items" id="item_5"></div>
            <button class="right_side_items" id="item_6"  type="submit" onclick="new_account()">Create New Account</button>
        </form>

        
        
        <!--  this is the dialog box for signing up as a new user-->
        
        
        
        <form class="new_account_box" action="/signup" id="new_box" method="post">
            <div class="dialog_box">

                <div class="new_acccount_item" id="new_item_1">
                    <div id="item_1_1">Sign Up</div>
                    <div id="item_1_2" onclick="closed()"><img src="./icons/close.svg" alt=" "  ></div>
                </div>
                <div class="new_acccount_item" id="new_item_2">
                    <input class="names" id="first_name" placeholder="first name" name="name" required></input>
                    <input class="names" id="last_name"  placeholder="Surname" name="second_name" required></input>
                </div>
                <input class="input_fields" id="new_item_3"  placeholder="Mobile number or email address" name="phone" type="email" required></input>
                <input class="input_fields" id="new_item_4" placeholder="New Password" name="word" required></input>
                <div   class="new_acccount_item" id="new_item_5">
                    <div class="item_5_content" id="item_5_1">Date of birth</div>
                    <input type="date" class="input_fields" id="item_5_2" name="date" required></input>                
                </div>
                <div class="new_acccount_item" id="new_item_6">
                    <div id="item_6_1">Gender</div>
                    <div id="item_6_2">
                        <div class="item_6_2_content" id="item_6_2_1">
                            
                            <label class="gender">
                                <input type="radio" name="gender" required></input>
                                <span class="checkmark"> </span>
                            </label>
                            <div class="gender_text">Male</div>
                            
                        </div>
                        <div class="item_6_2_content" id="item_6_2_2">
                            <label class="gender">
                                <input type="radio" name="gender"></input>
                                <span class="checkmark"> </span>
                            </label>
                            <div class="gender_text">Female</div>
                        </div>
                        <div class="item_6_2_content" id="item_6_2_3">
                            <label class="gender">
                                <input type="radio" name="gender"></input>
                                <span class="checkmark"> </span>
                            </label>
                            <div class="gender_text">Custom</div>
                        </div>
                    </div>
                </div>
                <button type="submit"  class="new_acccount_item" id="new_item_7">
                    <div id="button_text">Sign Up</div>
                </button>
            </div>
        </form>
    </div>
</body>
<script>

    document.getElementById("new_box").style.display = "none";
    // document.getElementById("item_2_2").style.display = "none";
    function closed(){
        document.getElementById("new_box").style.display = "none";
    }
    function new_account(){
        document.getElementById("new_box").style.display = "flex";
    }

    function eye(){
        document.getElementById("item_2_2").style.display = "none";
        document.getElementById("item_2_3").style.display = "flex";
        document.getElementById("item_2_1").type = "password";
        console.log('button clicked')
    }
    function eye_off(){
        console.log('button clicked2')
        document.getElementById("item_2_2").style.display = "flex";
        document.getElementById("item_2_3").style.display = "none";
        document.getElementById("item_2_1").type = "text";
    }

</script>
</html>

这是 CSS 代码：-

body{
    margin: 0px;
}

.main{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15%;
}

.left_side{
    color: #1877f2;
    font-weight: 900;
    font-size: 7rem;
    height: 100vh;
    display: flex;
    align-items: center;
    margin-left: 25%;
}

.right_side{
    display: grid;
    grid-template-rows: repeat(6);
    height: 50vh;
    width: 55vh;
    align-self: center;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}
.right_side_items{
    border-radius: 5px;
    /* border-color: #d9d9d9; */
}

#item_1{
    width: 90%;
    margin: auto;
    height: 60%;
    background-color: #f1f3f4;
}
#item_2{
    width: 96%;
    margin: auto;
    height: 60%;
    background-color: #f1f3f4;
    display: grid;
    grid-template-columns: 90% 10%;
}

#item_2_1{
    background-color: #f1f3f4;
    border: 0px;
}

#item_2_2 {
    display: none;
    align-items: center;
    justify-content: center;
}
#item_2_3 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.eye_img img{
    cursor: pointer;
}


#item_3{
    width: 93%;
    margin: auto;
    height: 75%;
    background-color: #1877f2;
    color: white;
    font-weight: 900;
    font-size: 1rem;
    border: 0px;
}

#item_3:hover{
    background-color: #086bee;
}

#item_4{
    width: fit-content;
    display: flex;
    align-self: center;
    margin: auto;
    color: #1877f2;
}
#item_5{
    border-bottom: 1px solid #d9d9d9;
    height: fit-content;
    width: 90%;
    margin-left: 5%;
}
#item_6{
    background-color: #42b72a;
    color: white;
    font-weight: 900;
    width: 45%;
    height: 75%;
    margin-left: 30%;
    border-radius: 7px;
    border: 0px;
}

#item_6:hover{
    background-color: #30ce11;
}

input{
    padding-left: 5%;
    border: 2px solid #d9d9d9;
}
input[type=text]:focus {
    outline: none; 
    border: 2px solid #1877f2;
  }
input[type=password]:focus {
    outline: none; 
    border: 2px solid #1877f2;
  }

  input[type=password] {
    border: 2px solid #d9d9d9;
  }
  
  
.new_account_box{
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    
}

.dialog_box{
width: 27%;
height: 65%;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
margin: auto;
display: grid;
grid-template-rows: repeat(7,1fr);
background-color: white;

}

#new_item_1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    height: fit-content;
}

#item_1_1{
    color: black;
    font-size: 2rem;
    font-weight: 900;
}

#item_1_1::after{
    content: "It's quick and easy";
    display: block;
    margin-top: 2%;
    font-size: .8rem;
    color: #606770;
}

#item_1_2{
    display: flex;
    justify-content: flex-end;
}
#item_1_2 img{
    cursor: pointer;
}

#item_1_2 img{
    height: 30%;
}

#new_item_2{
    display: grid;
    grid-template-columns: repeat(2,auto);
}

.names{
    border: 2px solid #d9d9d9;
    width: 80%;
    height: 50%;
    display: flex;
    justify-self: center;
    border-radius: 5px;
    margin: auto;
    background-color: #f1f3f4;
    
}

.input_fields{
    border: 2px solid #d9d9d9;
    width: 85%;
    height: 55%;
    display: flex;
    justify-self: center;
    border-radius: 5px;
    margin: auto;
    background-color: #f1f3f4;
}

#item_5_1{
    margin-bottom: 1%;
    margin-left: 5%;
    font-size: .8rem;
    color: #606770;
}


#new_item_6{
    display: grid;
    grid-template-rows: 1fr 1.5fr
}

#item_6_1{
    margin-left: 5%;
    color: #606770;
    font-size: .9rem;
}

#item_6_2{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width: 95%;
    justify-self: center;
    gap: 2%;
}

.item_6_2_content{
    border: 2px solid #d9d9d9;
    border-radius: 3px;
    margin-left: 15%;
    display: grid;
    grid-template-columns: 2fr 1fr
}
.checkmark{
    width: 70%;
    height: 70%;
    background-color: #1877f2;
    display: none;
    border-radius: 50%;
    
}

.gender{
    
    width: 20%;
    height: 30%;
    border: 2px solid black;
    margin-left: 5%;
    margin-top: 8%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    
}

.gender input:checked + .checkmark{
    display: inline-block;
}

.gender input{
    display: none;
}

.gender_text{
    /* border: 2px solid black; */
    display: flex;
    align-items: center;
    margin-right: 10px;
    
}

#new_item_7{
    background-color: #42b72a;
    width: 40%;
    display: flex;
    margin: auto;
    height: 50%;
    border-radius: 5px;
    border: none;
}

#button_text{
    color: white;
    font-weight: 900;
    font-size: 1rem;
    margin: auto;
    border: 0px;
}

input:focus{
    outline: none;
}
#new_item_7{
    cursor: pointer;
}
#new_item_7:hover{
    background-color: #30ce11;
}

【问题讨论】：

  • 我不确定您为什么在用户提交登录信息时调用名为“new_account”的函数。是对的吗？它有什么作用？
  • 如果他/她想创建一个新帐户，它会打开一个弹出窗口，用户在其中填写详细信息，它只是被 display:none 隐藏

标签： javascript html css node.js


【解决方案1】：

去掉里面的type="submit"

<button class="right_side_items" id="item_6"  
type="submit" onclick="new_account()">
    Create New Account
</button>

此外，将按钮移出表单，因为它不是表单的一部分。

【讨论】：

  • 感谢您的解决方案是正确的，但是当我运行它时它仍然抛出相同的错误，然后我看到按钮在表单内，这就是为什么即使在删除后它也会进入相同的路线提交”，但感谢您的解决方案确实有帮助
  • 哦，感谢您指出这一点。我将编辑我的答案。
猜你喜欢
  • 2012-09-09
  • 1970-01-01
  • 2019-01-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-15
  • 2011-09-28
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode