Currently, my website http://www.beatzz.co/ has a login form which uses method=“POST” to send the username and password to login.inc.php, which in turn accesses the login database, does some error handling, and either returns a ?login=success or ?login=error. The site also contains a contact form, which using JavaScript, sends an Ajax call to contact.inc.php. I would like to implement this same procedure for my login & signup forms as well. I have tried copying contact.js to login.js and made some modifications to fit the login form / login.inc.php but it is inoperable at this point in time. Here is some of the code to reference.
login form
<!-- login form -->
<form name="loginForm" id="loginForm">
<div class="imgcontainer">
<img class="avatar" id="blacksheep" src="img/blacksheep.png" alt="Avatar">
</div>
<div class="container text-center">
<label><b>Username</b></label>
<input type="text" class="form-control" name="username" id="username" placeholder="Userame"
required data-validation-required-message="Please enter your username.">
<p class="help-block text-danger"></p>
<label><b>Password</b></label>
<input type="password" class="form-control" name="password" id="password" placeholder="Password"
required data-validation-required-message="Please enter your password.">
<p class="help-block text-danger"></p>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="redbtn" onclick="window.location.href='index.php'">Cancel</button>
<button type="submit" class="bluebtn" name="loginButton" id="loginButton">Login</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
login.js
$(function() {
$("#loginForm input,#loginForm textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var username = $("input#username").val();
var password = $("input#password").val();
var name = username; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (name.indexOf(' ') >= 0) {
name = username.split(' ').slice(0, -1).join(' ');
}
$this = $("#loginButton");
$this.prop("disabled", true); // Disable login button until AJAX call is complete to prevent errors
$.ajax({
url: "../includes/login.inc.php",
type: "POST",
data: {
username: username,
password: password
},
cache: false,
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-danger').append($("<strong>").text("Sorry " + name + ", it seems that my login server is not responding. Please try again later!"));
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
complete: function() {
setTimeout(function() {
$this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
}, 1000);
}
});
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');
});
login.inc.php
<?php
session_start();
// check whether the loginbtn was clicked
if (isset($_POST['loginbtn'])) {
include_once 'dbh.inc.php';
// initialize variable
$uid = trim($_POST['uid']);
$pwd = trim($_POST['pwd']);
// error handlers
// check if inputs are empty
if (empty($uid) || empty($pwd)) {
$conn = null;
header("Location: ../index.php?login=error_field");
exit();
} else {
// check if username is in database
$stmt = $conn->prepare("SELECT user_uid FROM users WHERE user_uid = ?");
$stmt->execute([$uid]);
if ($stmt->rowCount() < 1) {
$conn = null;
header("Location: ../index.php?login=error_username");
exit();
} else {
// check if password is correct
$stmt = $conn->prepare("SELECT user_pwd FROM users WHERE user_uid = ?");
$stmt->execute([$uid]);
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
// dehashing the password
$hashedPwdCheck = password_verify($pwd, $result[0]['user_pwd']);
if ($hashedPwdCheck == false) {
$conn = null;
header("Location: ../index.php?login=error_password");
exit();
} else {
// login the user in
$stmt = $conn->prepare("SELECT user_id, user_first, user_last, user_email, user_uid FROM users WHERE user_uid = ?");
$stmt->execute([$uid]);
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
$_SESSION['user_id'] = $result[0]['user_id'];
$_SESSION['user_first'] = $result[0]['user_first'];
$_SESSION['user_last'] = $result[0]['user_last'];
$_SESSION['user_email'] = $result[0]['user_email'];
$_SESSION['user_uid'] = $result[0]['user_uid'];
$conn = null;
header("Location: ../updates.php?login=success");
exit();
}
}
}
} else {
header("Location: ../index.php?login=error");
exit();
}
?>
dbh.inc.php is working correctly, and login.js calls qBootstrapValidation.js which I have pasted here due to its size. Ultimate goal? Use JavaScript & Ajax to POST form input to the login.inc.php script.