I want to make a pop up login in navigation. I want it to not go back in the previous page whenever I click one of the textboxes and when I only click the exit or "x" button it will exit. I don't know what's the problem with my code. Can someone help me?
<body>
<div class=MainNavi>
<div class=SecNavi>
<ul>
<div class="login">
<li> Login
<div id="m01" class="modal-popup" onclick="this.style.display='#form'">
<img class="modal-popup-content " id="img01" style="width:80%">
<div class="login-container">
<img src="images/user-login.png">
<div id = "form">
<form action="" method="post" id="myform">
<div class = "form-input">
<input type="text" name="username" value="" placeholder="Enter Username" required="required">
</div>
<div class = "form-input">
<input type="password" name="password" value="" placeholder="Enter Password" required="required">
</div>
<input type="submit" class=btn-login name="log" value="Let me in">
</div>
</form>
</div>
<span id ="x101"Onclick="onClick(this).this.style.display='none'"" class="x- btn x-hover display-x">x</span>
<script>
function onClick(element) {
document.getElementById("log101").src = element.src;
document.getElementById("m01").style.display = "block";
}
</script>
</div>
<li>About Us</li>
<li>Songs</li>
<li>Gallery</li>
<li>Home</li>
<center><h1>#</h1></center>
</ul>
</div>
</div>
Related
The session is not working properly in PHP. The login page is working fine. But after redirecting to my home page I couldn't able to see my login details it throws this errorNotice : Undefined index: username in C:\xampp\htdocs\final\header.php on line
and if I use the if-else state to hide my login/signup button it's not working. So please someone help me with this issue
My Login page
<link rel="stylesheet" href="css/auth.css">
<body>
<div class="login-box"> <h2>Login</h2> <form action="handleLogin.php" method="post">
<div class="user-box">
<input type="text" name="loginEmail" required="">
<label>Email</label>
</div>
<div class="user-box">
<input type="password" name="loginPass" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="submit" value="LogIn" name="submit">
</a><br>
<a class="nav_btn" href="signup.php"><i class="icon_profile"></i>Create New Account</a> </form> </div>
</body> </html>
LoginHandle page
<div class="login-box"> <h2>Login</h2> <form action="handleLogin.php" method="post">
<div class="user-box">
<input type="text" name="loginEmail" required="">
<label>Email</label>
</div>
<div class="user-box">
<input type="password" name="loginPass" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<input type="submit" value="LogIn" name="submit">
</a><br>
<a class="nav_btn" href="signup.php"><i class="icon_profile"></i>Create New Account</a> </form> </div>
</body> </html>
My header session
echo ' <form class="form-inline my-2 my-lg-0" >
<p class="text-light my-0 mx-2">Welcome'.$_SESSION["username"].' </p>
</form>';
I think you should use the post method for the form and then store the values in the sessions but remember to start session first
Here you logged in
<php?
// Check to see if we have some POST data, if we do process it
if ( isset($_POST['name']) && isset($_POST['pass']) ) {
$_SESSION["name"] = htmlentities($_POST["email"]);
header( 'Location: view.php' ) ;
return;
}
?>
<form action="handleLogin.php" method="post">
<div class="user-box">
<input type="text" name="loginEmail" required="">
<label>Email</label>
</div>
<div class="user-box">
<input type="password" pass="loginPass" required="">
<label>Password</label>
</div>
<input type="submit" value="LogIn" name="submit">
</form>
When I Click the Submit button with id 'submitPasscode', I want to hide the div tag (with id 'passcodeCard') and want to display the div tag (with id 'loginCard').
After Clicking it, onClick function 'checkPasscode()' is worked, but this function works only when loading web browser. It means that div tag (with id 'passcodeCard') didn't hide, and div tag (with id 'loginCard') didn't display after loading web browser.
I would like to know what is wrong with this code to work onClick Function works well.
Here is the code:
<div id="passcodeCard" class="loginDiv" style="margin-top: 10%;" style="display: inline;">
<form id="form" class="form-horizontal" style="padding-top: 5%;">
<div class="group">
<input type="text" id="passcode" name="passcode" placeholder="Enter Passcode"/>
<span class="bar"></span>
<label>Enter Passcode</label>
<button type="submit" class="button buttonBlue" style="margin-top: 5%;" id="submitPasscode" onclick="checkPasscode()">Submit</button>
</div>
</form>
</div>
<div id="loginCard" class="loginDiv widgetHeight" style="display: none;">
<img class="img-responsive user-logo" src="layouts/v7/resources/Images/hims5.png">
<div>
<span class="{if !$ERROR}hide{/if} failureMessage" id="validationMessage">{$MESSAGE}</span>
<span class="{if !$MAIL_STATUS}hide{/if} successMessage">{$MESSAGE}</span>
</div>
<div id="loginFormDiv">
<form class="form-horizontal" method="POST" action="index.php">
<input type="hidden" name="module" value="Users"/>
<input type="hidden" name="action" value="Login"/>
<div class="group">
<input id="username" type="text" name="username" placeholder="Username" value="admin">
<span class="bar"></span>
<label>Username</label>
</div>
<div class="group">
<input id="password" type="password" name="password" placeholder="Password" value="password">
<span class="bar"></span>
<label>Password</label>
</div>
<div class="group">
<button type="submit" class="button buttonBlue">Sign in</button><br>
<a class="forgotPasswordLink" style="color: #15c;">forgot password?</a>
</div>
</form>
</div>
</div>
<script>
function checkPasscode(){
if(document.getElementById("passcode").value == "passcode")
{
document.getElementById("form").style.display = "none";
document.getElementById("loginCard").style.display = "";
}
}
</script>
I don't completely understand your question, but is this what you wanted. I added some extra features such as making the fields required. Please let me know if this helped:
Here is the code:
<div id="passcodeCard" class="loginDiv" style="margin-top: 10%;" style="display: inline;">
<form id="form" class="form-horizontal" style="padding-top: 5%;">
<div class="group">
<input type="password" id="passcode" name="passcode" placeholder="Enter Passcode" required/>
<span class="bar"></span>
<label>Enter Passcode</label>
<button type="submit" class="button buttonBlue" style="margin-top: 5%;" id="submitPasscode" onclick="checkPasscode()">Submit</button>
</div>
</form>
</div>
<div id="loginCard" class="loginDiv widgetHeight" style="display: none;">
<img class="img-responsive user-logo" src="layouts/v7/resources/Images/hims5.png">
<div>
<span class="{if !$ERROR}hide{/if} failureMessage" id="validationMessage">{$MESSAGE}</span>
<span class="{if !$MAIL_STATUS}hide{/if} successMessage">{$MESSAGE}</span>
</div>
<div id="loginFormDiv">
<form class="form-horizontal" method="POST" action="index.php">
<input type="hidden" name="module" value="Users"/>
<input type="hidden" name="action" value="Login"/>
<div class="group">
<input id="username" type="text" name="username" placeholder="Username" value="admin" required>
<span class="bar"></span>
<label>Username</label>
</div>
<div class="group">
<input id="password" type="password" name="password" placeholder="Password" value="password" required>
<span class="bar"></span>
<label>Password</label>
</div>
<div class="group">
<button type="submit" class="button buttonBlue">Sign in</button><br>
<a class="forgotPasswordLink" style="color: #15c;">forgot password?</a>
</div>
</form>
</div>
</div>
<script>
function checkPasscode(){
if(document.getElementById("passcode").value == "passcode")
{
document.getElementById("form").innerHTML = "";
document.getElementById("loginCard").style.display = "block";
}
}
</script>
I am having issues creating a tabbed dropdown menu in bootstrap that contains forms for "register" and "sign in" but every time I click the Tabs, they close. I don't understand why. I have tried the popular e.stoppropogate(), but it does not appear to work for me. Any help would be appreciated.
Here is my HTML:
<div class="container-fluid ">
<div class = "container">
<a class="navbar-brand" href="#"><img src="img/logo.svg" height = "75px" type="image/svg+xml"/></a>
<form>
<div id="myDropDown " class="dropdown pull-right">
<a id="dLabel" role="button" data-target="javascript:;" href="/page.html">Sign In/Register <span class="caret"></span></a>
<ul id="myTabs" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="nav nav-pills ">
<li class="active"><a href="#login" data-toggle="tab" >Sign In</a></li>
<li><a href="#register" data-toggle="tab" >Register</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane " id="register">
<!--register section-->
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<span>Name:</span>
<label class="sr-only" for="exampleInputEmail2">Name</label>
<input type="text" class="form-control" id="exampleInputEmail2" placeholder="Name" required>
</div>
<span>Email:</span>
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<span>Password:</span>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
</div>
<span>Confirm Password:</span>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Confirm Passowrd</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Confirm Password" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Register</button>
</div>
</form>
<!--end register form-->
</div>
</div>
<!--tab pane register-->
<!--begin login form-->
<div class="tab-pane active" id="login">
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Sign in</button>
</div>
</form>
<!--end login form-->
</div>
</div>
<!--tab pane login-->
</div>
<!--tab content-->
</ul>
<!-- myTabs ul-->
<ul class = "pull-right"><span class=" glyphicon glyphicon-shopping-cart"></span></ul>
</div>
<!--myDropdown-->
</form>
</div><!--container-->
</div><!--container fluid-->
This is my javascript:
<script>
$('.dropdown-menu a[data-toggle="tab"]').click(function (e) {
e.stopPropagation()
$(this).tab('show')
})
</script>
Actually you are missing one attribute
Just add data-toggle="dropdown" attribute with id="dLabel" as shown in example below..
It will work..
enjoy :)
<a id="dLabel" role="button" data-toggle="dropdown" href="/page.html">Sign In/Register <span class="caret"></span></a>
When I click on my next button and it goes to step 2 and if I reload the page I would like to make sure it stays on the same div that I am on.
The 2 divs I use are join_form_1 and join_form_2
At the moment it when I reload page it goes back to first div
How can I make it stay on the div I am on?
Codepen Example Here
$(document).ready(function(){
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
$("#next").click(function(){
$("#step_1_link").removeClass("active");
$("#step_2_link").addClass("active");
$("#join_form_1").hide();
$("#join_form_2").show();
});
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="heading-message">
<div class="text-center">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="text-center">
<h1>Request A Admin Member Login</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<ol class="steps list-inline">
<li id="step_1_link">
Step 1: Set up a personal account
</li>
<li id="step_2_link">
Step 2: Choose profile picture
</li>
</ol>
<div id="join_form_1">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" placeholder="" />
</div>
<div class="form-group">
<button type="button" class="btn btn-default" id="next">Next</button>
</div>
</div><!-- Setup_1 -->
<div id="join_form_2">
<div class="form-group">
<label>Upload A Image</label>
<input type="file" name="userfile" size="50" />
</div>
</div><!-- Setup_1 -->
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box">
<h2>You'll Love This Forum</h2>
</div>
</div>
</div>
</div>
You can use javascript cookie API here
So when user clicks 'Next'
Cookies.set('active', 'join_form_2');
Than if user clicked in the previous session, show form 2.
if (Cookies.get('active') == 'join_form_2') {
$("#join_form_1").hide();
$("#step_1_link").removeClass("active");
} else {
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
}
Here is working codepen.
The easiest and most reliable way to do this is to use Fragment_identifier along with :target pseudo selector.
This will work even if cookies are disabled. And since you're using bootstrap, it's easy to style <a> tags like buttons.
For example:
if (!window.location.hash) {
window.location.hash = 'step1';
.steps:not(:target) {
display: none;
}
step1
step2
<div id="step1" class="steps">Step1</div>
<div id="step2" class="steps">Step2</div>
I have 3 forms. I'd like to show each separately. Having the user fillout and then have the completed form slide to the left, and then revealing the proceeding form.
$('.button-action').click(function() {
$('.firstForm').animate({left: '-=150px'}, 500);
});
How would I go about making this happen?
Here is a fiddle that I've tried to work with.
Thank you for your help.
I've changed the divs to have a class called 'wizard' (because that's the way I see what you are trying to do) you can change that however you'd like.
HTML
<div class="promo">
<div class="wrapper">
<div id="signup" class="wizard">
<div class="heading">
<h1>Just need your email to get started</h1>
</div>
<ul>
<li>
<input class="signup-email" type="text" placeholder="Email address" />
</li>
<li>
<button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
</li>
</ul>
</div>
<div id="form1" class="wizard">
<h1>One more to go</h1>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="Last Name" />
<input type="text" placeholder="Country" />
<button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
</div>
<div id="form2" class="wizard">
<h1>Last one</h1>
<input type="text" class="input-text" placeholder="Company Name" />
<button validationDiv="form2" class="button button-action">Done</button>
</div>
</div>
</div>
jQuery
$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
var valid = true;
$("#" + $(this).attr("validationDiv")).find("input").each(function () {
if ($(this).val() == "") valid = false;
});
if (valid) {
$(".wizard").slideUp();
$("#" + $(this).attr("data-next-id")).slideDown();
}
});
JSFiddle