Home > Enterprise >  how to hide log in form when click on sign up button
how to hide log in form when click on sign up button

Time：01-10

when I click on the login button login form opens but when I click on the signup button login form closed and the sign-up form opens.

currently what is the problem.., I created a login and sign-up form when I click on the login button login form opens properly but when I click on the sign-up button log-in form show behind the sign-up form.

<!--- simple java script function--->
<!--log in-->
<
script >
  $("#button_login").click(function() {
    $(".login_box").show();
  }); <
/script> <
script >
  $("#hide").click(function() {
    $(".login_box").toggle();
  }); <
/script>
<!--sign up-->
<
script >
  $("#button_signup").click(function() {
    $(".signin_box").show();
  }); <
/script> <
script >
  $("#hide_box").click(function() {
    $(".signin_box").toggle();
  }); <
/script>
.button_login a {
  color: white;
}

.button_login a:hover {
  text-decoration: none;
}

form#login {
  padding: 18px;
  background: #FFF7EA;
}

#popup {
  box-shadow: 2px 2px 18px #888888;
}

#popup .top_head {
  width: 85px;
  padding: 5px;
  color: #FAAC18;
  font-size: 24px;
  font-weight: 600;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

input#e_name {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: white;
  border: 0;
  border-bottom: 1px solid #FAAC18;
  color: #333;
  display: block;
  font-size: 16px;
  margin-top: 5px;
  outline: 0;
  padding: 7px 12px 10px;
  width: 100%;
}

.button_login_header {
  padding-left: 17px;
  margin-top: 20px;
}

.button_login_header button {
  width: 470px;
  padding: 5px;
  color: white;
  border: 1px solid #FAAC18;
  border-radius: 3px;
  background: #FAAC18;
}

.form-group {
  padding: 15px;
  margin-bottom: 0rem;
}

label {
  display: inline-block;
  margin-bottom: 0.0rem;
}

.forget {
  padding-left: 20px;
}

#popup {
  pointer-events: auto;
  width: 550px;
  height: auto;
  background-color: white;
  position: fixed;
  top: 100px;
  left: 30%;
  z-index: 3;
  display: none;
  justify-content: center;
  align-items: center;
}

label.popupCloseButton.close-btn.fa.fa-times {
  font-size: 27px;
  padding-top: -1px;
}

.popupCloseButton {
  padding: 30px;
  color: #FAAC18;
  cursor: pointer;
  display: inline-block;
  font-family: arial;
  font-weight: bold;
  position: absolute;
  top: -21px;
  right: 19px;
  font-size: 25px;
  line-height: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
}

.signup {
  width: 270px;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
}

.sign_button {
  border: none;
  cursor: pointer;
  background: none;
  color: #0056b3;
}

.sign_button:hover {
  color: #0056b3;
  text-decoration: underline;
}


/********************Sign Up form***************/

.f_name {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: white;
  border: 0;
  border-bottom: 1px solid #FAAC18;
  color: #333;
  display: block;
  font-size: 16px;
  margin-top: 3px;
  outline: 0;
  padding: 7px 12px 10px;
  width: 100%;
}

.button_register button {
  width: 330px;
  padding: 5px;
  align-items: center;
  margin-left: 20%;
  margin-right: auto;
  justify-content: center;
  color: white;
  border: 1px solid rgb(250, 172, 24);
  border-radius: 3px;
  background: rgb(250, 172, 24);
}

div#popup_sign {
  padding: 10px;
  pointer-events: auto;
  width: 550px;
  height: auto;
  background-color: white;
  position: fixed;
  top: 50px;
  left: 30%;
  z-index: 3;
  display: none;
  justify-content: center;
  align-items: center;
}

#popup_sign .top_head {
  width: 115px;
  padding: 5px;
  color: #FAAC18;
  font-size: 24px;
  font-weight: 600;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

button.btn_login {
  width: 330px;
  padding: 5px;
  align-items: center;
  margin-left: 20%;
  margin-right: auto;
  margin-top: 5px;
  justify-content: center;
  color: #FAAC18;
  border: 1px solid rgb(250, 172, 24);
  border-radius: 3px;
  background-color: white;
}
<div  id="popup">
  <label for=""  id="hide" onclick="closeNav()"></label>
  <div >
    <text >Log In </text>
  </div>
  <form id="login" action="/action_page.php">
    <div >
      <label for="f_name">Mobile Number:</label><br />
      <input type="tel"  id="e_name" placeholder="Enter Number" aria-required="false">
    </div>
    <div >
      <label for="f_name">Password:</label><br />
      <input type="password"  id="e_name" placeholder="password" aria-required="false">
    </div>
    <div >Forget Your Password?</div>
    <div >
      <button type="submit">LOGIN</button>
    </div>
  </form>
</div>
<div >
  <text>Don't have account?<button type="submit" id="button_signup" ><a href="#popup_sign">SIGN UP</button></text>
</div>

<!---sign up-->
<div  id="popup_sign">
  <label for=""  id="hide_box" onclick="closeNav()"></label>
  <div >
    <text >Sign Up </text>
  </div>
  <form id="Sign" action="/action_page.php">
    <div >
      <label for="S_name">Full Name :</label><br />
      <input type="text"  id="S_name" placeholder="Full Name">
    </div>
    <div >
      <label for="email">Enter E-mail Address:</label><br />
      <input type="tel"  id="email" placeholder="E-Mail Address">
    </div>
    <div >
      <label for="mobile_number">Mobile Number:</label><br />
      <input type="tel"  id="mobile_number" placeholder="Enter Number">
    </div>
    <div >
      <label for="password">Password:</label><br />
      <input type="password"  id="password" placeholder="password">
    </div>
    <div >
      <button type="submit">Register</button>
    </div>
    <div  id="login_submit">
      <button type="submit" >Login</button>
    </div>
  </form>
</div>

Anyone can help to create this type using javascript..?

CodePudding user response：

Based on your code snippet there is no login form behind the sign-up form.

What is it that you want exactly? If your asking for a way to close one form when the other is open you could try this.

$("#button_login").click(function() {
  $(".signin_box").hide();
  $(".login_box").show();
});

$("#hide").click(function() {
  $(".login_box").hide();
  $(".signin_box").hide();
});

$("#button_signup").click(function() {
  $(".login_box").hide();
  $(".signin_box").show();
});

$("#hide_box").click(function() {
  $(".signin_box").hide();
  $(".login_box").hide();
});
.button_login a {
  color: white;
}

.button_login a:hover {
  text-decoration: none;
}

form#login {
  padding: 18px;
  background: #FFF7EA;
}

#popup {
  box-shadow: 2px 2px 18px #888888;
}

#popup .top_head {
  width: 85px;
  padding: 5px;
  color: #FAAC18;
  font-size: 24px;
  font-weight: 600;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

input#e_name {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: white;
  border: 0;
  border-bottom: 1px solid #FAAC18;
  color: #333;
  display: block;
  font-size: 16px;
  margin-top: 5px;
  outline: 0;
  padding: 7px 12px 10px;
  width: 100%;
}

.button_login_header {
  padding-left: 17px;
  margin-top: 20px;
}

.button_login_header button {
  width: 470px;
  padding: 5px;
  color: white;
  border: 1px solid #FAAC18;
  border-radius: 3px;
  background: #FAAC18;
}

.form-group {
  padding: 15px;
  margin-bottom: 0rem;
}

label {
  display: inline-block;
  margin-bottom: 0.0rem;
}

.forget {
  padding-left: 20px;
}

#popup {
  pointer-events: auto;
  width: 550px;
  height: auto;
  background-color: white;
  position: fixed;
  top: 100px;
  left: 30%;
  z-index: 3;
  display: none;
  justify-content: center;
  align-items: center;
}

label.popupCloseButton.close-btn.fa.fa-times {
  font-size: 27px;
  padding-top: -1px;
}

.popupCloseButton {
  padding: 30px;
  color: #FAAC18;
  cursor: pointer;
  display: inline-block;
  font-family: arial;
  font-weight: bold;
  position: absolute;
  top: -21px;
  right: 19px;
  font-size: 25px;
  line-height: 30px;
  width: 30px;
  height: 30px;
  text-align: center;
}

.signup {
  width: 270px;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
}

.sign_button {
  border: none;
  cursor: pointer;
  background: none;
  color: #0056b3;
}

.sign_button:hover {
  color: #0056b3;
  text-decoration: underline;
}


/********************Sign Up form***************/

.f_name {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: white;
  border: 0;
  border-bottom: 1px solid #FAAC18;
  color: #333;
  display: block;
  font-size: 16px;
  margin-top: 3px;
  outline: 0;
  padding: 7px 12px 10px;
  width: 100%;
}

.button_register button {
  width: 330px;
  padding: 5px;
  align-items: center;
  margin-left: 20%;
  margin-right: auto;
  justify-content: center;
  color: white;
  border: 1px solid rgb(250, 172, 24);
  border-radius: 3px;
  background: rgb(250, 172, 24);
}

div#popup_sign {
  padding: 10px;
  pointer-events: auto;
  width: 550px;
  height: auto;
  background-color: white;
  position: fixed;
  top: 50px;
  left: 30%;
  z-index: 3;
  display: none;
  justify-content: center;
  align-items: center;
}

#popup_sign .top_head {
  width: 115px;
  padding: 5px;
  color: #FAAC18;
  font-size: 24px;
  font-weight: 600;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

button.btn_login {
  width: 330px;
  padding: 5px;
  align-items: center;
  margin-left: 20%;
  margin-right: auto;
  margin-top: 5px;
  justify-content: center;
  color: #FAAC18;
  border: 1px solid rgb(250, 172, 24);
  border-radius: 3px;
  background-color: white;
}
<!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">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>

<body>
  <div  id="popup">
    <label for=""  id="hide" onclick="closeNav()"></label>
    <div >
      <text >Log In </text>
    </div>
    <form id="login" action="/action_page.php">
      <div >
        <label for="f_name">Mobile Number:</label><br />
        <input type="tel"  id="e_name" placeholder="Enter Number" aria-required="false">
      </div>
      <div >
        <label for="f_name">Password:</label><br />
        <input type="password"  id="e_name" placeholder="password" aria-required="false">
      </div>
      <div >Forget Your Password?</div>
      <div >
        <button type="submit">LOGIN</button>
      </div>
    </form>
  </div>
  <div >
    <text>Don't have account?<button type="submit" id="button_signup" ><a href="#popup_sign">SIGN
          UP </a></button></text>
  </div>

  <!---sign up-->
  <div  id="popup_sign">
    <label for=""  id="hide_box" onclick="closeNav()"></label>
    <div >
      <text >Sign Up </text>
    </div>
    <form id="Sign" action="/action_page.php">
      <div >
        <label for="S_name">Full Name :</label><br />
        <input type="text"  id="S_name" placeholder="Full Name">
      </div>
      <div >
        <label for="email">Enter E-mail Address:</label><br />
        <input type="tel"  id="email" placeholder="E-Mail Address">
      </div>
      <div >
        <label for="mobile_number">Mobile Number:</label><br />
        <input type="tel"  id="mobile_number" placeholder="Enter Number">
      </div>
      <div >
        <label for="password">Password:</label><br />
        <input type="password"  id="password" placeholder="password">
      </div>
      <div >
        <button type="submit">Register</button>
      </div>
      <div  id="login_submit">
        <button type="submit" >Login</button>
      </div>
    </form>
  </div>
</body>

</html>

You could even remove the hide-box function and replace the hide-box element with the hide element

Page link：https//www.codepudding.com/Enterprise/257455.html

Prev:why is this code returning true instead of false
Next:Trying to RegExp an array, getting an Uncaught TypeError: x is not a function
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding