This tutorial focused on creating a registration form that can be hide and display on a click. This hide and show functionality will be maintained using jQuery.
Here with the help of HTML login and registration form example shown below you will learn how to perform it.
So, suppose you have a sign up form and login form on your website, you can display them very effectively. When you click on a “Login form” hyperlink, login form will display.
And, simultaneously, when you click on a sign up form hyperlink, “Sign up” form will appear.
It’s a complete Login/Signup pannel.
Here is the jQuery/HTML codes to Show/Hide form (Sign in & Sign up).
HTML File: showhideform.html
- It includes div “first” for the Login form.
- Div “second” for the Signup form.
<!DOCTYPE html>
<html>
<head>
<title>Show & Hide Form - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<link href="css/showhide.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/showhide.js"></script>
</head>
<body>
<img id="logo" src="images/logo.png">
<div id="main">
<!-- Create Div First For Login Form -->
<div id="first">
<form action="" method="post">
<h3>Login to your FormGet account.</h3>
<img id="divider" src="images/divider.png">
<input id="loginemail" placeholder="Email" type="text">
<input id="loginpassword" placeholder="Password" type="password">
<input id="login" type="button" value="Sign In">
<p id="one"><a href="#">Forgot Password ?</a></p>
<p id="two">Don't have account? <a class="signup" href="#" id="signup">Sign up here</a></p>
</form>
</div>
<!-- Create Div Second For Signup Form-->
<div id="second">
<form action="" id="form" method="post" name="form">
<h3>Create a Free Account</h3>
<img id="divider" src="images/divider.png">
<input id="name" placeholder="Full Name" type="text">
<input id="registeremail" placeholder="Email" type="text">
<input id="registerpassword" placeholder="Password" type="password">
<input id="contact" placeholder="Contact Number" type="text">
<input id="register" type="button" value="Create your FormGet account">
<p id="two">Already have an account? <a class="signin" href="#" id="signin">Sign in</a></p>
</form>
</div>
</div>
</body>
</html>
jQuery File: showhide.js
- Contains jQuery function to display sign-up form, hide login form when clicking on a hyperlink.
- jQuery function to display login form, hide sign-up form when clicking on a hyperlink.
$(document).ready(function() {
// On Click SignIn Button Checks For Valid E-mail And All Field Should Be Filled
$("#login").click(function() {
var email = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/i);
if ($("#loginemail").val() == '' || $("#loginpassword").val() == '') {
alert("Please fill all fields...!!!!!!");
} else if (!($("#loginemail").val()).match(email)) {
alert("Please enter valid Email...!!!!!!");
} else {
alert("You have successfully Logged in...!!!!!!");
$("form")[0].reset();
}
});
$("#register").click(function() {
var email = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/i);
if ($("#name").val() == '' || $("#registeremail").val() == '' || $("#registerpassword").val() == '' || $("#contact").val() == '') {
alert("Please fill all fields...!!!!!!");
} else if (!($("#registeremail").val()).match(email)) {
alert("Please enter valid Email...!!!!!!");
} else {
alert("You have successfully Sign Up, Now you can login...!!!!!!");
$("#form")[0].reset();
$("#second").slideUp("slow", function() {
$("#first").slideDown("slow");
});
}
});
// On Click SignUp It Will Hide Login Form and Display Registration Form
$("#signup").click(function() {
$("#first").slideUp("slow", function() {
$("#second").slideDown("slow");
});
});
// On Click SignIn It Will Hide Registration Form and Display Login Form
$("#signin").click(function() {
$("#second").slideUp("slow", function() {
$("#first").slideDown("slow");
});
});
});
CSS File: showhide.css
- Styling sign-in, sign-up panel.
body{
background-color:#eeeff3;
text-align:center
}
#main{
position:relative;
margin-top:15px
}
img#logo{
margin-top:50px
}
#first{
width:308px;
margin-top:0;
padding:28px 25px;
background-color:#fff;
border:1px solid #000;
border-radius:5;
position:absolute;
left:50%;
margin-left:-180px;
top:0
}
#second{
width:308px;
margin-top:0;
padding:28px 25px;
background-color:#fff;
display:none;
border:1px solid #000;
border-radius:5;
position:absolute;
left:50%;
margin-left:-180px;
top:0
}
h3{
margin-top:0
}
input[type=text],[type=password]{
padding:7px;
width:100%;
height:40px;
margin-top:15px;
font-size:18px
}
input[type=button]{
background:linear-gradient(to bottom,#22abe9 5%,#36caf0 100%);
box-shadow:inset 0 1px 0 0 #7bdcf4;
border:1px solid #0F799E;
color:#fff;
width:306px;
height:40px;
margin-top:15px;
font-size:18px;
font-weight:700;
cursor:pointer;
text-shadow:0 1px 0 #13506D
}
input[type=button]:hover{
background:linear-gradient(to bottom,#36caf0 5%,#22abe9 100%)
}
a{
text-decoration:none;
color:#6495ed
}
p#two{
margin-bottom:0
}
Conclusion:
So, if you want to create a complete sign-in, sign-up panel for any of your project, the above codes jQuery/HTML codes will provide you a great help.
Collect more related information through these blogs –
- Dynamically Change Form Action Based on Selection Using jQuery
3 Replies to “Show And Hide Registration/Login Form Using jQuery”
Hey would you mind letting me know which web host you’re working with? I’ve loaded your blog in 3 completely different internet browsers and I must say this blog loads a lot faster then most. Can you suggest a good internet hosting provider at a fair price? Kudos, I appreciate it!
Above of link in sign up and sign in not working,,,,,but as per UI is good
Help me how to do working sign in or signup
Thanks for the Code Show And Hide Registration/Login Form Using jQuery, I have downloaded the code & find useful, Thanks again …