I have login and signup form and i made HTML form to work by switching between between login and signup. I successfully tried console of signup input data but I am facing problem in Login Form. I am not able to see any input data in console.
I have file register.php with below code.
<body>
<div class="container" style='margin-top:100px;'>
<div class="row">
<div class="col-sm-12">
<div class="form-wrap">
<div class="tabs">
<h3 class="signup-tab"><a class="active" href="#signup-tab-content">Sign Up</a></h3>
<h3 class="login-tab"><a href="#login-tab-content">Login</a></h3>
</div><!--a.tabs-->
<div class="tabs-content">
<div id="signup-tab-content" class="active">
<form class="signup-form" action="" method="post">
<input type="email" class="input" name="user_email" autocomplete="off" placeholder="Email">
<input type="text" class="input" name="user_name" autocomplete="off" placeholder="Username">
<input type="password" class="input" name="user_pass" autocomplete="off" placeholder="Password">
<input type="submit" class="button" name="registersubmit" id="registersubmit" value="Sign Up">
</form><!--.login-form-->
<div class="message_box" style="margin:10px 0px;"></div>
<div class="help-text">
<p>By signing up, you agree to our</p>
<p><a href="#">Terms of service</a></p>
</div><!--.help-text-->
</div><!--.signup-tab-content-->
<div id="login-tab-content">
<form class="login-form" action="" method="post">
<input type="email" class="input" name="user_email" autocomplete="off" placeholder="Email">
<input type="password" class="input" name="user_pass" autocomplete="off" placeholder="Password">
<input type="checkbox" class="checkbox" id="remember_me">
<label for="remember_me">Remember me</label>
<input type="submit" class="button" id="loginsubmit" name="loginsubmit" value="Login">
</form><!--.login-form-->
<div class="message_box" style="margin:10px 0px;"></div>
<div class="help-text">
<p><a href="#">Forget your password?</a></p>
</div><!--.help-text-->
</div><!--.login-tab-content-->
</div><!--.tabs-content-->
</div><!--.form-wrap-->
</div>
</div>
</div>
ended with script as follows:
<script>
jQuery(document).ready(function($) {
tab = $('.tabs h3 a');
tab.on('click', function(event) {
event.preventDefault();
tab.removeClass('active');
$(this).addClass('active');
tab_content = $(this).attr('href');
$('div[id$="tab-content"]').removeClass('active');
$(tab_content).addClass('active');
});
});
</script>
<script>
$(document).ready(function() {
var delay = 2000;
$('[name="registersubmit"]').click(function(e){
e.preventDefault();
var user_name = $('[name="user_name"]').val();
console.log(user_name);
if(user_name == ''){
$('.message_box').html(
'<span style="color:red;">Enter Your Name!</span>'
);
$('[name="user_name"]').focus();
return false;
}
var user_email = $('[name="user_email"]').val();
console.log(user_email);
if(user_email == ''){
$('.message_box').html(
'<span style="color:red;">Enter Email Address!</span>'
);
$('[name="user_email"]').focus();
return false;
}
if( $('[name="user_email"]').val()!='' ){
if( !isValidEmailAddress( $('[name="user_email"]').val() ) ){
$('.message_box').html(
'<span style="color:red;">Provided email address is incorrect!</span>'
);
$('[name="user_email"]').focus();
return false;
}
}
var user_pass = $('[name="user_pass"]').val();
if(user_pass == ''){
$('.message_box').html(
'<span style="color:red;">Password cannot be empty!</span>'
);
$('[name="user_pass"]').focus();
return false;
}
console.log(user_pass);
$.ajax
({
type: "POST",
url: "registersubmit.php",
data: "name="+user_name+"&email="+user_email+"&password="+user_pass,
beforeSend: function() {
$('.message_box').html(
'<img src="tenor.gif" width="25" height="25"/>'
);
},
success: function(data)
{
setTimeout(function() {
$('.message_box').html(data);
}, delay);
}
});
});
$('[name="loginsubmit"]').click(function(e){
e.preventDefault();
// var user_name = $('[name="user_name"]').val();
// console.log(user_name);
// if(user_name == ''){
// $('.message_box').html(
// '<span style="color:red;">Enter Your Name!</span>'
// );
// $('[name="user_name"]').focus();
// return false;
// }
var user_email = $('[name="user_email"]').val();
console.log(user_email);
if(user_email == ''){
$('.message_box').html(
'<span style="color:red;">Enter Email Address!</span>'
);
$('[name="user_email"]').focus();
return false;
}
if( $('[name="user_email"]').val()!='' ){
if( !isValidEmailAddress( $('[name="user_email"]').val() ) ){
$('.message_box').html(
'<span style="color:red;">Provided email address is incorrect!</span>'
);
$('[name="user_email"]').focus();
return false;
}
}
var user_pass = $('[name="user_pass"]').val();
if(user_pass == ''){
$('.message_box').html(
'<span style="color:red;">Password cannot be empty!</span>'
);
$('[name="user_pass"]').focus();
return false;
}
console.log(user_pass);
$.ajax({
type: "POST",
url: "loginsubmit.php",
// data: "name="+user_name+"&email="+user_email+"&password="+user_pass,
data: "email="+user_email+"&password="+user_pass,
beforeSend: function() {
$('.message_box').html(
'<img src="tenor.gif" width="25" height="25"/>'
);
},
success: function(data)
{
setTimeout(function() {
$('.message_box').html(data);
}, delay);
}
});
});
});
</script>
<script>
//Email Validation Function
function isValidEmailAddress(emailAddress) {
var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
return pattern.test(emailAddress);
};
</script>
</body>
Also i have the code where i will get my login input data and match password and display user dashboard on successful login. Code of loginsubmit.php is as below.
<?php
// if ( ($_POST['name']!="") && ($_POST['email']!="")){
if ( ($_POST['email']!="")){
// $name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];
include('connection.php');
//Password Match
$passwordhash = password_hash($password, PASSWORD_BCRYPT);
$query = "SELECT * FROM `tbl_register` WHERE email = '$email' AND password = '$passwordhash'";
//PHP code to redirect to dashboard if login successfull else redirect login page
}
?>
