Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"newlogin"
Bootstrap 3.3.0 Snippet by
prabhatmech
3.3.0
jQuery
Preview
HTML
JS
View Full Screen
Fork
Fork this
3.3K
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="loginbox" style="display:none;margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info" > <div class="panel-heading"> <div class="panel-title">Sign In</div> <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div> </div> <div style="padding-top:30px" class="panel-body" > <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div> <form id="loginform" class="form-horizontal" role="form"> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email"> </div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input id="login-password" type="password" class="form-control" name="password" placeholder="password"> </div> <div class="input-group"> <div class="checkbox"> <label> <input id="login-remember" type="checkbox" name="remember" value="1"> Remember me </label> </div> </div> <div style="margin-top:10px" class="form-group"> <!-- Button --> <div class="col-sm-12 controls"> <a id="btn-login" href="#" class="btn btn-success">Login </a> <a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a> </div> </div> <div class="form-group"> <div class="col-md-12 control"> <div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" > Don't have an account! <a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()"> Sign Up Here </a> </div> </div> </div> </form> </div> </div> </div> <div id="signupbox" style="margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info"> <div class="panel-heading"> <div class="panel-title">Sign Up</div> <div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div> </div> <div class="panel-body" > <form id="signupform" class="form-horizontal" role="form"> <div id="signupalert" style="display:none" class="alert alert-danger"> <p>Error:</p> <span></span> </div> <div id="knowledgeInfo" class="form-group"> <label class="col-md-3 control-label">Please select</label> <div class="col-md-9 form-inline"> <div id="seeker" class="radio"> <label> <input type="radio" name="knowledge" value="seeker" checked="checked" /> Knowledge seeker </label> </div> <div id="provider" class="radio"> <label> <input type="radio" name="knowledge" value="provider" /> Knowledge Provider </label> </div> </div> </div> <div id="providerType" class="form-group" style="display:none" > <label class="col-md-3 control-label"></label> <div class="col-md-9"> <div id="individual" class="radio"> <label> <input type="radio" name="ptype" value="individual" checked="checked" /> As individual </label> </div> <div id="company" class="radio"> <label> <input id="pcompany" type="radio" name="ptype" value="company" /> As Company/Institute </label> </div> </div> </div> <div id="companyname" class="form-group" style="display:none"> <label for="companyname" class="col-md-3 control-label">Name</label> <div class="col-md-9"> <input type="text" class="form-control" name="companyname" placeholder="Company /Institute"> </div> </div> <div id="fullname" class="form-group"> <label class="col-md-3 control-label">Full name</label> <div class="col-md-5"> <input type="text" class="form-control" name="firstName" placeholder="First name" /> </div> <div class="col-md-4"> <input type="text" class="form-control" name="lastName" placeholder="Last name" /> </div> </div> <div id="malefemale" class="form-group"> <label class="col-md-3 control-label">Gender</label> <div class="col-md-9 form-inline"> <div style="margin-right:50px;" class="radio"> <label> <input type="radio" name="gender" value="male" /> male </label> </div> <div class="radio"> <label> <input type="radio" name="gender" value="female" /> female </label> </div> </div> </div> <div class="form-group"> <label for="email" class="col-md-3 control-label">Email</label> <div class="col-md-9"> <input type="text" class="form-control" name="email" placeholder="Email Address"> </div> </div> <div id="username" class="form-group"> <label for="username" class="col-md-3 control-label">username</label> <div class="col-md-9"> <input type="text" class="form-control" name="username" placeholder="username"> </div> </div> <div class="form-group"> <label for="password" class="col-md-3 control-label">Password</label> <div class="col-md-9"> <input type="password" class="form-control" name="passwd" placeholder="Password"> </div> </div> <div class="form-group"> <label for="location" class="col-md-3 control-label">Location</label> <div class="col-md-9"> <input type="text" class="form-control" name="location" placeholder="pincode or locality "> </div> </div> <div class="form-group"> <label for="city" class="col-md-3 control-label">City</label> <div class="col-md-9"> <input type="text" class="form-control" name="city" placeholder="your city "> </div> </div> <div id="Catagory" class="form-group"> <label for="catagory" class="col-md-3 control-label">Catagory</label> <div class="col-md-9"> <input type="text" class="form-control" name="catagory" placeholder="Skills needed Ex. Maths, Java etc "> </div> </div> <div class="form-group"> <div class="col-md-9 col-md-offset-3"> <div class="checkbox"> <label> <input type="checkbox" name="agree" value="agree" /> Agree with the terms and conditions </label> </div> </div> </div> <div class="form-group"> <!-- Button --> <div class="col-md-offset-3 col-md-9"> <button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i> Sign Up</button> <span style="margin:0px 8px;">or</span> <button id="btn-fbsignup" type="button" class="btn btn-primary"><i class="icon-facebook"></i> Sign Up with Facebook</button> </div> </div> </form> </div> </div> </div> </div>
$(document).ready(function(){ $('input[type="radio"]').click(function(){ $('#providerType').hide(); $('#companyname').hide(); $('#fullname').show(); $('#Catagory').show(); $('#malefemale').show(); $('#username').show(); if($(this).attr("value")=="provider"){ $('#providerType').show(); $('#Catagory').hide(); } if($(this).attr("value")=="individual"){ $('#providerType').show(); $('#Catagory').hide(); } if($(this).attr("value")=="company"){ $('#providerType').show(); $('#Catagory').hide(); $('#fullname').hide(); $('#malefemale').hide(); $('#companyname').show(); $('#username').hide(); } }); }); });
Related:
See More
Free Template
Awesome Landing Page
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76