Two forms going to same route
Question
I am trying to make a log in and sign up page for my project and everything is working perfectly but i encountered a bug, the problem is there are two forms on my front page one is shown by default and other is shown after a button is clicked whose display is blocked until the button is clicked, here is my ui photo
now the problem is if there is some details filled in the login form and i clicked on "create new account" it still goes on the route which i specified for log in, this problem does not occurs if the login fields are empty.
Here is my HTML code:-
<!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>
This is CSS code:-
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;
}
1 answers
solution1
3 2022-01-05 11:55:46
Remove the type="submit" inside
<button class="right_side_items" id="item_6"
type="submit" onclick="new_account()">
Create New Account
</button>
And, also, move the button out of the form , as it is not a part of it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can i detect "going" to same route?
Two request at same route emberjs 2
Using the $.post with JQuery for two forms on the same page?
ajax not working on two different forms in same page
Two forms in same div with foreach loop
jQuery Clone inputs in two forms on the same page?
jQuery two forms in same page - value change
Two ajax forms not working at the same time
Two forms on one page with same input fields
Javascript detect two forms open in the same browser
Related Tags