I have a field in a form that takes in an 'authorisation code' and checks it against a database using AJAX and PHP. I'm trying to make use of the Bootstrap feedback on forms to feedback to the user if the code was wrong or not. Currently it's not working, and there are no errors, if anyone could point out the issue it would be greatly appreciated.
form:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<!-- Scripts -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/validator.js"></script>
<script src="js/validator.min.js"></script>
<!-- CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form id="auth_form" action="action.php" method="post">
<div class="form-group has-feedback" name="auth_code" id="auth_code">
<label for="auth_code" class="control-label">
Authorisation Code</label>
<input class="form-control" id="auth_code_input" name="auth_code_input" type="password">
<span class="form-control-feedback glyphicon" id="iconBad"></span>
<span id="auth_code_result"></span>
</div>
<div class="form-group">
<div>
<button class="btn btn-info" name="submit" type="submit" id="submit">Submit</button>
</div>
</div>
</form>
<!-- AJAX -->
<script type="text/javascript">
$(document).ready(function() {
var x_timer;
$("#auth_code_input").keyup(function (e){
clearTimeout(x_timer);
var auth_code = $(this).val();
x_timer = setTimeout(function(){
check_auth_code_ajax(auth_code);
}, 1000);
});
function check_auth_code_ajax(auth_code){
var $auth_code = $('#auth_code');
$("#auth_code_result").html('<img src="img/ajax-loader.gif"/>');
$.post('auth_code_checker.php',
{'auth_code_input':auth_code},
function(data) {
// data will be JSON, including a status we can use
$("#auth_code_result").html('');
showStatus(data.status, $auth_code);
},
'json' // Expect JSON response from server
);
}
</script>
<!-- Sets field to error/cross or success/tick -->
<script>
function showStatus(status, $target) {
if (status === 'ok') {
$target.removeClass('has-error').addClass('has-success');
$('.glyphicon', $target).removeClass('glyphicon-remove').addClass('glyphicon-ok');
} else {
$target.removeClass('has-success').addClass('has-error');
$('.glyphicon', $target).removeClass('glyphicon-ok').addClass('glyphicon-remove');
}
}
</script>
</body>
</html>
auth_code_checker.php
<?php
include 'pdo_config.php';
try {
$conn = new PDO($dsn, $user, $pass, $opt);
$auth_code = $_POST["auth_code_input"];
$stmt = $conn->prepare("SELECT * FROM tbl_instructors WHERE auth_code = :auth_code");
$stmt->bindParam(':auth_code', $auth_code);
$stmt->execute();
$exists = $stmt->fetchColumn();
if ($exists > 0) {
$response['status'] = 'ok';
} else {
$response['status'] = 'fail';
}
header("Content-Type: application/json", true);
echo json_encode($response);
catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null;
