I have converted my PHP website to a WordPress theme but my Bootstrap modal is not opening in WordPress.
***Header.php***
<a id="modal_trigger" href="#modal" class="sign-in-up"><i class="fa fa-user"></i> Sign In/Up</a>
<div id="modal" class="modal fade" role="dialog" >
<div class="popupHeader">
<span class="header_title">Login</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</div>
<section class="popupBody">
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fab fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fab fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
<div class="centeredText">
<span>Or use your Email address</span>
</div>
<div class="action_btns">
<div class="one_half">Login</div>
<div class="one_half last">Sign up</div>
</div>
</div>
<div class="user_login">
<form action="" method="post">
<label>Email / Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last"><button type="submit" class="btn btn_red">Login</button></div>
</div>
</form>
Forgot password?
</div>
<div class="user_register">
<form action="" method="post">
<label>Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Email Address</label>
<input name="email" type="email" id="email" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last"><button type="submit" class="btn btn_red">Register</button></div>
</div>
</form>
</div>
</section>
</div>
I tried hard but did not find any solution. I have imported all the necessary files like Bootstrap and JavaScript but still modal is not working. I have a header.php file in which I have an anchor tag and I want to open a modal when clicking on it.
Maybe you didn't enqueue bootstrap properly.
first, enqueue your bootstrap CSS and JS.
For enqueue, your style & JS WordPress has an action hook.
wp_enqueue_scripts
You have to do that inside your fuctions.php
function your_scripts() {
wp_enqueue_style( 'style-name', get_template_directory_uri().'/your_path/your.css' );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/your_path/your.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'your_scripts' );
your_scripts is your callback function. you can name it whatever your want.
wp_enqueue_style takes 5 parameter.1st is a unique id, the second is your src or link, the third is dependency, the fourth is version and the last is media. for know, more details follow the below link.
[https://developer.wordpress.org/reference/functions/wp_enqueue_style/][1]
wp_enqueue_script also takes 5 parameters.
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
$handle is the name for the script.
$src defines where the script is located.
$deps is an array that can handle any script that your new script depends on, such as jQuery.
$ver lets you list a version number.
$in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather than in the header so that it does not delay the loading of the DOM tree.
for Know, more details follow the below link.
[https://developer.wordpress.org/reference/functions/wp_enqueue_script/][1]
Now enqueue your style and CSS and try your modal.
Your <a> tag needs data-toggle="modal" and data-target="#modal" attributes. See the Bootstrap 4 modal documentation.
***Header.php***
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<a id="modal_trigger" href="#modal" class="sign-in-up" data-toggle="modal" data-target="#modal"><i class="fa fa-user"></i> Sign In/Up</a>
<div id="modal" class="modal fade" role="dialog" >
<div class="popupHeader">
<span class="header_title">Login</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</div>
<section class="popupBody">
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fab fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fab fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
<div class="centeredText">
<span>Or use your Email address</span>
</div>
<div class="action_btns">
<div class="one_half">Login</div>
<div class="one_half last">Sign up</div>
</div>
</div>
<div class="user_login">
<form action="" method="post">
<label>Email / Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last"><button type="submit" class="btn btn_red">Login</button></div>
</div>
</form>
Forgot password?
</div>
<div class="user_register">
<form action="" method="post">
<label>Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Email Address</label>
<input name="email" type="email" id="email" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last"><button type="submit" class="btn btn_red">Register</button></div>
</div>
</form>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Related
Hello I am creating a Login / Registration system on the same page using PHP and MySQl I am having trouble with the post method and action as it is on the same page. Someone knows how I can resolve this problem.
Below is my code for the login and registration/ signup system the page is separated with a slider using JavaScript, my problem is that I cannot use the Post method and action to save the form in my DB
<html>
<!--WEB-APP Login / Register Page Title-->
<title>Envision: Login/Register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--External styling CSS / Font-Family Style / Swiper CSS-->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Product+Sans' rel='stylesheet' type='text/css'>
<!--Custom Styling CSS-->
<link rel="stylesheet" type="text/css" href="CSS/Access.css">
<!--Font Awesome Script -->
<script src="https://kit.fontawesome.com/26011c24ac.js" crossorigin="anonymous"></script>
<!--Custom js script-->
<script defer src="js/Custom_JS/log_slider.js"></script>
<script defer src="js/Custom_JS/selector.js"></script>
</html>
<body>
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--Back Button to Landing Page-->
<div class="back">
<button onClick="location.href='Main.php'" class="back-btn">
<i class="fas fa-arrow-alt-circle-left" style="font-size: 36px;">
<div class="back_text">
Back
</div>
</i>
</button>
</div>
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--CONTAINER CONTAINS LOGIN / SIGN-UP SECTIONS-->
<div class="container">
<!--LOGIN SECTIONS STARTS HERE-->
<div class="form Login" action="php/check_login.php" method="post">
<form id="login" class="login_input">
<h2>Login</h2>
<div class="form_log">
<span>
Username
</span>
<input type="text" class="input_field" id="user_username" name="username" placeholder="Input your Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_log">
<span>
Password
</span>
<input type="password" class="input_field" id="user_password" name="password" placeholder="Input your Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="forgot_password">
<p>Forgotten you're Password ?</p>
</div>
<button class="submit" type="submit">
Login
</button>
</form>
</div>
<!--LOGIN SECTION ENDS HERE-->
<!------------------------------------------------------------------------------------------------------------------------------------------------->
<!--SLIDER TO TOGGLE BTW LOGIN SECTION AND SIGN-UP SECTION-->
<div class="slider_form">
<div class="slider">
<div class="slide_text user_signup">
<h2>
Don't have an account ?
</h2>
<p>
Sign-Up and get instant access to Envision skill & personal competency project management web-application
</p>
</div>
<div class="slide_text user_login">
<h2>
Already have an Account ?
</h2>
<p>
Login and get access to your projects !
</p>
</div>
<div class="slide_btn">
<span class="user_signup">Sign-up</span>
<span class="user_login">Login</span>
</div>
</div>
<!--SLIDER ENDS HERE-->
<!------------------------------------------------------------------------------------------------------------------------------------------------->
<!--SIGN-UP SECTIONS STARTS HERE-->
<div class="form Signup">
<form id="signup" class="signup_input" method="post" >
<h2>
Sign-up
</h2>
<div class="form_signup">
<span>
Username
</span>
<input type="text" class="input_field" id="username" name="username" placeholder="Enter Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Email Address
</span>
<input type="email" class="input_field" id="email" name="email" placeholder="Enter Email Address" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Password
</span>
<input type="password" class="input_field" id="password_1" name="password_1" placeholder="Enter Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Confrim Password
</span>
<input type="password" class="input_field" id="password_2" name="password_2" placeholder="Confirm Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="role_title">
<h4>Select User Type: </h4>
</div>
<label class="reg_selector">
<select name="role">
<option selected value="manager">Manager</option>
<option value="staff">Staff</option>
</select>
</label>
<button type="submit" class="submit">
Sign-Up
</button>
</form>
</div>
<!--SIGN-UP SECTION ENDS HERE-->
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------->
</div>
</body> ``
Your action attribute in the login form is misplaced and is missing in signup. It should be in the form tag.
<!--LOGIN SECTIONS STARTS HERE-->
<div class="form Login" >
<form id="login" class="login_input" action="php/check_login.php" method="post">
<h2>Login</h2>
<div class="form_log">
<span>
Username
</span>
<input type="text" class="input_field" id="user_username" name="username" placeholder="Input your Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_log">
<span>
Password
</span>
<input type="password" class="input_field" id="user_password" name="password" placeholder="Input your Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="forgot_password">
<p>Forgotten you're Password ?</p>
</div>
<button class="submit" type="submit">
Login
</button>
</form>
</div>
<!--LOGIN SECTION ENDS HERE-->
Similarly assuming your signup script is php/signup.php the signup form will be
<!--SIGN-UP SECTIONS STARTS HERE-->
<div class="form Signup">
<form id="signup" class="signup_input" method="post" action="php/signup.php" >
<h2>
Sign-up
</h2>
<div class="form_signup">
<span>
Username
</span>
<input type="text" class="input_field" id="username" name="username" placeholder="Enter Username" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Email Address
</span>
<input type="email" class="input_field" id="email" name="email" placeholder="Enter Email Address" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Password
</span>
<input type="password" class="input_field" id="password_1" name="password_1" placeholder="Enter Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="form_signup">
<span>
Confrim Password
</span>
<input type="password" class="input_field" id="password_2" name="password_2" placeholder="Confirm Password" autocomplete="off">
<small>Error message</small>
</div>
<div class="role_title">
<h4>Select User Type: </h4>
</div>
<label class="reg_selector">
<select name="role">
<option selected value="manager">Manager</option>
<option value="staff">Staff</option>
</select>
</label>
<button type="submit" class="submit">
Sign-Up
</button>
</form>
</div>
<!--SIGN-UP SECTION ENDS HERE-->
In the example above the scripts to handle the signup and login will be done on two separate scripts check_login.php and signup.php. Please change the action attribute with the actual location of the scripts responsible for managing signup and login
i have a problem when i want to login into my admin login panel i use username and password and the page refresh and stays the same without going to Settings.php path that i want to go in . if i can even try to add another script can give me permission to access that Settings.php file witout having to go trought that login.php file that causes the problem
*first code : Login.php file
*Second code : Settings.php file
<br/><br/><br/>
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-lock"></i> login</h4>
</div>
<div class="panel-body">
<?php echo form_open('/auth/login');?>
<input type="text" placeholder="username" class="form-control " name="_name" />
<br/>
<input type="password" placeholder="password" class="form-control " name="_pass" />
<br/>
<input type="submit" name="login" class="btn btn-success" value="login" />
<?php echo form_close();?>
</div>
</div>
</div>
<div class="col-md-4"></div>
------------------------------------------------------------------------------
------------------------------------------------------------------------------
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa fa-gear"></i> General Settings </h4>
</div>
<!--<form method="post" action="{site_url}/dashboard/save_settings" >-->
<?php echo form_open('/dashboard/save_settings');?>
<div class="panel-body">
<div class="form-group">
<label for="site_name">Site Name</label>
<input name="site_name" class="form-control" id="site_name" value="{site_name}" type="text">
</div>
<div class="form-group">
<label for="site_mail">Email</label>
<input name="site_mail" class="form-control" id="site_mail" value="{site_mail}" type="text">
</div>
<div class="form-group">
<label for="site_desc">SEO description</label>
<textarea name="site_desc" class="form-control" id="site_desc" rows="3">{site_desc}</textarea>
</div>
<div class="form-group">
<label for="site_keys">SEO Keywords</label>
<textarea name="site_keys" class="form-control" id="site_keys" rows="3">{site_keys}</textarea>
</div>
<div class="form-group">
<label for="ad_code">Ad Code <small>(add ad code here like google adsense code or html code.)</small> </label>
<textarea name="ad_code" class="form-control" id="ad_code" rows="3">{ad}</textarea>
</div>
<!-- Social Media -->
<h5><b>Social Media</b></h5>
<div class="input-group">
<span class="input-group-addon" id="facebook"><i class="fa fa-facebook"></i></span>
<input name="facebook" type="text" value="{facebook}" class="form-control" aria-describedby="facebook">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" id="twitter"><i class="fa fa-twitter"></i></span>
<input name="twitter" type="text" value="{twitter}" class="form-control" aria-describedby="twitter">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" id="googleplus"><i class="fa fa-google-plus"></i></span>
<input name="googleplus" type="text" value="{googlep}" class="form-control" aria-describedby="googleplus">
</div>
<!-- END / Social Media -->
</div>
<div class="panel-footer">
<!--<input class="btn btn-success" type="submit" name="update" value="save" />-->
<button class="btn btn-success" type="submit" name="update"><i class="fa fa-save"></i> save</button>
</div>
<!--</form>-->
<?php echo form_close();?>
</div>
</div>
<div class="col-md-3"></div>
I have a login page, which has login and registration forms on the same page. When registration fails it is sending me to login form and error appear in both form. I am using defaul authentication with "make:auth" command.
I don't want to change the name fields name. I tried to make login form hidden but it doesn't work. May be I couldn't.
My question is that how can I handle when registration fails, it should redirect me to register form, not login form. And the errors should be spesific for each form. Also how can I use error bags? I am new on laravel.
If you can explain to me in detail I will be grateful. Many thanks.
Here the view code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:300,400,500,600" rel="stylesheet">
<link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="assets/css/vendor.bundle.css">
<link rel="stylesheet" href="assets/css/app.bundle.css">
<link rel="stylesheet" href="assets/css/theme-a.css">
</head>
<body id="auth_wrapper">
<div id="login_wrapper">
<div id="login_content">
<div class="logo">
<img src="assets/img/logo/ml-logo.png" alt="logo" class="logo-img">
</div>
<h1 class="login-title">
Sign In to your account
</h1>
<div class="login-body">
<form id="login" method="POST" action="{{ route('login') }}">
#csrf
<div class="form-group label-floating is-empty">
<label class="control-label">Email</label>
<input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
#if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
<div class="form-group label-floating is-empty">
<label class="control-label">Password</label>
<input type="password" name="password" class="form-control" required>
#if ($errors->has('password'))
<span class="invalid-feedback">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
Forgot Password?
<div class="checkbox inline-block">
<label>
<input type="checkbox" class="checkbox-inline" value="">
Remember Me
</label>
</div>
{{--Sign In--}}
<button type="submit" class="btn btn-info btn-block m-t-40">Sign In</button>
<div class="login-options">
<span>OR</span>
<hr/>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-facebook btn-block"><i class="zmdi zmdi-facebook"></i> Sign In with
Facebook
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-google btn-block"><i class="zmdi zmdi-google-plus"></i> Sign In with
Google
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-twitter btn-block"><i class="zmdi zmdi-twitter"></i> Sign In with Twitter
</button>
</div>
</div>
</form>
</div>
<div class="login-footer p-15">
<p>
Don't have an account? Create an account
</p>
</div>
<div id="register_wrapper">
<ul class="card-actions icons right-top">
<li>
<a href="javascript:void(0)" data-toggle="register">
<i class="zmdi zmdi-close"></i>
</a>
</li>
</ul>
<div class="logo">
<img src="assets/img/logo/ml-logo.png" alt="logo" class="logo-img">
</div>
<h1 class="login-title">
Create an account
</h1>
<div class="login-body">
<div class="col-xs-12">
<button class="btn btn-facebook btn-block"><i class="zmdi zmdi-facebook"></i> Sign Up with Facebook
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-google btn-block"><i class="zmdi zmdi-google-plus"></i> Sign Up with Google
</button>
</div>
<div class="col-xs-12">
<button class="btn btn-twitter btn-block"><i class="zmdi zmdi-twitter"></i> Sign Up with Twitter
</button>
</div>
<form id="register" class="clear-both" method="POST" action="{{ route('register') }}">
#csrf
<h2 class="text-center p-t-20">
Or sign up below
</h2>
<div class="form-group label-floating is-empty">
<label class="control-label">Name</label>
<input type="text" name="name" class="form-control" required>
#if ($errors->has('name'))
<span class="invalid-feedback">
<strong>{{ $errors->first('name') }}</strong>
</span>
#endif
</div>
<div class="form-group label-floating is-empty">
<label class="control-label">Email</label>
<input type="email" name="email" class="form-control" required>
#if ($errors->has('email'))
<span class="invalid-feedback">
<strong>{{ $errors->first('email') }}</strong>
</span>
#endif
</div>
<div class="form-group label-floating is-empty">
<label class="control-label">Password</label>
<input type="password" name="password" class="form-control" required>
#if ($errors->has('password'))
<span class="invalid-feedback">
<strong>{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
<div class="form-group label-floating is-empty">
<label class="control-label">Confirm Password</label>
<input type="password" name="password_confirmation" class="form-control" required>
</div>
<div class="checkbox inline-block">
<label>
<input type="checkbox" class="checkbox-inline" value="">
I agree to the terms of services
</label>
</div>
{{--Create my account--}}
<button type="submit" name="submit" class="btn btn-info btn-block m-t-40">Create my account</button>
</form>
</div>
<div class="login-footer p-15">
<p>
Already have an account? Sign In
</p>
</div>
</div>
</div>
</div>
<script src="assets/js/vendor.bundle.js"></script>
<script src="assets/js/app.bundle.js"></script>
</body>
</html>
I had a similar issue recently on a site I was building. This may not be the best solution but the solution I came up with was to flash a variable to the session depending on the form that was submitted. Then also check for that variable when checking for errors.
So in the method that handles the login method, add session()->flash('form', 'login'). Then do something similar in the method that handles the register form.
Then in your view when checking for errors, you need to do something like...
#if ($errors->has('password') && session()->get('form') == 'login')
I'm trying to make a div appear on button click which I've not succeeded from the below code.Please let me know if I've done any thing wrong in the code.
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>
change getElementByid to getElementById (i to I)
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>
Its Simple
<script>
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
</script>
getElementById() is a function and its case sensitive . You need to write getElementByid() as getElementById().
Note:- i in getElementById() should be capital .
You have typed wrong document.getElementByid it should be capital I document.getElementById
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>
Can I strongly, strongly suggest that you use jQuery to do this - it makes this task trivial on all browsers. To do this with jQuery, perform the following steps.
Include the jQuery script library in your web page <script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>.
Add an id property to your button <a class="btn btn-default log-bar" href="#" id="loginButton" role="button" onclick = "showDiv()" >Login</a>.
Add the following Javascript to your page:
<script>
$(function() {
$("#loginButton").click(function() {
$("#sign-in").show();
});
});
</script>
I have a login form in a modal. which is in header.php file (header file is in views/include) that have been included to welcome.blade.php file. When I submit login form it gives this error "TokenMismatchException in VerifyCsrfToken.php line 68:"
<a class="header-login-btn" href="#popup1">
Login <i class="fa fa-user" aria-hidden="true"></i>
<ul class="ds-btn">
<li class="box-popop1">
<a class="header-login-btn" href="#popup1">
Login <i class="fa fa-user" aria-hidden="true"></i>
</a>
</li>
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="account-box">
<div class="login-popup-header">
Login
</div>
<form class="form-signin" action="loginUser" method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="form-group">
<input type="text" class="form-control" name="username" placeholder="Username" required autofocus />
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" required />
</div>
<input name="Submit" type="submit" value="Sign In" class="btn btn-primary">
<label class="checkbox-01 checkbox">
<input type="checkbox" value="remember-me" />
Keep me signed in
</label>
</form>
<div class="or-box row-block">
<div class="row">
<div class="col-md-12 row-block">
Create New Account
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
this is my Route
Route::post("loginUser", 'Controller#loginUser');
this is the output I'm getting
Try replacing:
<input type="hidden" name="_token" value="{{ csrf_token() }}">
with just:
{{ csrf_field() }}
The latter will inject the appropriate form input to satisfy the CSRF token. Alternatively, try adding the following tag to your header and then passing it in the headers via your ajax call (as detailed in the Laravel documentation).
<meta name="csrf-token" content="{{ csrf_token() }}">