I'm creating a login and I've encountered an issue. I want an error message to appear if the user enters an incorrect username and/or password, specifically if both don't match what's in the DB the user will be prompted that they have entered an incorrect username/password.
It seems as if my else statement is ignored whenever I run the code. My if statement works, I've tested it. But no matter what I echo in the else clause, it's not being accessed. I've tried restructuring the js the php is tied to, I've tried Stack Overflow solutions to similar issues to no avail. I've tested the code by stepping through it and when the if statement is true "sas" is echoed, when if is not true (else) "" is echoed. No error messages on the console. Perhaps there's something wrong with the logic of what I'm trying here.
I'm using Malsup's jQuery form plugin to submit login form asynchronously. I've reduced some of non essential (there may be more I know) html and js but included the files for good measure.
PHP
<?php
$host = "meh"; // Host name
$username = "blah"; // Mysql username
$password = "pft"; // Mysql password
$db_name = "doh"; // Database name
$tbl_name = "leh"; // Table name
// Connect to server and select databse.
$mysqli = new mysqli("$host", "$username", "$password", "$db_name");
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
// username and password sent from form
$myusername = $_POST['myusername'];
$mypassword = $_POST['mypassword'];
// To protect MySQL injection
$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysqli_real_escape_string($mysqli, $myusername);
$mypassword = mysqli_real_escape_string($mysqli, $mypassword);
$sql = "SELECT FirstName, Password FROM $tbl_name WHERE FirstName= ? AND Password= ? ";
//prepare and bind paramters
if ($stmt = $mysqli->prepare($sql)) {
$stmt->bind_param("ss", $myusername, $mypassword);
$stmt->execute();
$stmt->bind_result($returnedusername, $returnedpassword);
//fetch $stmt results
while ($stmt->fetch()) {
if (isset($returnedusername) && isset($returnedpassword) && $returnedusername === $myusername && $returnedpassword === $mypassword) {
session_register("myusername");
session_register("mypassword");
//header("location:login_success.php");
echo "sas";
} else {//I DONT THIS PART IS BEING RUN...NOT SURE THOUGH IF LOOKING AT WRONG PART OF CODE
echo $_POST['loginError'];//loginError found in html, will be error message
}
} //end while
} //end if
$stmt->close();
$mysqli->close();
?>
JS
$('document').ready(function() {
var loginForm = $("#form1");
//Will load user's name into page heading (from local storage)
function storeUsername() {
window.alert("You made it in the function");//testing to see if code is run
if (typeof(Storage) != "undefined") {
// Store the user's first name as localStorage Object
var inputUsername = document.getElementById("myusername");
localStorage.username = inputUsername.value;
window.alert(localStorage.username);
}
}
var options = {
target: '#loginError',
beforeSubmit: beforeSubmit, // pre-submit callback
success: afterSuccess
};
//Submit form via ajax
// bind to the form's submit event
$('#form1').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
return false;
});
//after succesful upload
function afterSuccess() {
var flag = $("#loginError");
var flagContents = flag.html();
if (flagContents == "sas") {
window.location.href = "login_success.php";
//remove the imgPlaceHolder element
} else {
flag.fadeIn('slow');//error message will fade In
}
}
function beforeSubmit() {
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob) {
storeUsername();
} else {
//Output error to older unsupported browsers that doesn't support HTML5 File API
alert("Please upgrade your browser, because your current browser lacks some new features we need!");
return false;
}
}
});
HTML
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/generalJS/modernizr.custom.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<table width="100" border="0" cellpadding="0" cellspacing="1">
<tr>
<form name="form1" id="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1">
<tr>
<td colspan="3"><strong> Login </strong>
</td>
</tr>
<tr>
<td>Username:
<input name="myusername" type="text" id="myusername" required> </td>
</tr>
<tr>
<td>Password:
<input name="mypassword" type="password" id="mypassword" required>
</td>
</tr>
<input type="submit" id="mySubmit" name="Submit" value="Login"></input>
<div id="loginError" name="loginError" style="display:none" value="**Username or password incorrect**"></div>
<!--Php script will provide an error is login fails. It will get the outcome from checklogin, fetch reason from "password"-->
</table>
</td>
</form>
</tr>
</table>
</body>
<script type="text/javascript">
function downloadJSOnload() {
var element1 = document.createElement("script");
element1.src = "../js/login.js";
document.body.appendChild(element1);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSOnload);
else window.onload = downloadJSOnload;
</script>
</html>
