I just made a login system but I can only login with pressing the button on my screen, not using the enter button on my keyboard. How can I enable this? I read something about the AcceptButton, but how do I apply this?
my code:
login.php
<?php
require('inc/functions.php');
session_start();
if(checkLogedIn()){
header("location:index.php");
die();
}
include 'inc/header.php'
?>
<body>
<div id="wrap">
<div class="text-center">
<img src="img/logo.png" height="125" width="125">
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
<div class="login-panel panel panel-default">
<div class="panel-heading">Inloggen</div>
<div class="result"></div>
<div class="panel-body">
<form role="form" id="loginForm">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Gebruikersnaam" name="username" type="text" autofocus="">
</div>
<div class="form-group">
<input class="form-control" placeholder="Wachtwoord" name="password" type="password">
</div>
<div class="row">
<div class="col-xs-7">
<a href="#" class="btn btn-success post">Inloggen</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div><!-- /.col-->
</div><!-- /.row -->
</div>
<footer class="footer">
<div class="text-center">
<p class="text-muted">© <?php echo date("Y"); ?> company name</p>
</div>
</footer>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.result').hide();
$(".post").on("click",function(){
// console.log('clicked!');
var formData = $('#loginForm').serialize();
$.ajax({
type: "POST",
url: "checkauth.php",
data: $("#loginForm").serialize(), // serializes the form's elements.
success: function(data){
//window.location.href = "/welcome";
// console.log(data);
if(data.status2 == 'success'){
//
$('.panel-body').fadeOut(1400);
$('.result').html(data.message);
$('.result').fadeIn(1200);
window.setTimeout(function() {
window.location.href = 'index.php';
}, 2000);
}else {
$('.result').html(data.message);
}
}
});
});
});
</script>
</body>
</html>
checkauth.php
<?php
session_start();
/* Check Login form submitted */
if($_SERVER['REQUEST_METHOD'] == 'POST'){
header('Content-Type: application/json');
/* Define username and associated password array */
$logins = array('admin' => 'admin2',
'username1' => 'password1',
'username2' => 'password2');
/* Check and assign submitted Username and Password to new variable */
$Username = isset($_POST['username']) ? $_POST['username'] : '';
$Password = isset($_POST['password']) ? $_POST['password'] : '';
// print_r($_POST);
/* Check Username and Password existence in defined array */
if (isset($logins[$Username]) && $logins[$Username] == $Password){
/* Success: Set session variables and redirect to Protected page */
$_SESSION['UserData']['Username']=$logins[$Username];
$_SESSION['UserData']['loggedin']=TRUE;
$return['message'] = '<br><div class="alert alert-success" role="alert">Login gegevens correct, welkom!</div><br>';
$return['status2'] = 'success';
} else {
/*Unsuccessful attempt: Set error message */
$return['message'] = '<div class="alert alert-danger" role="alert">Incorrecte login gegevens. Probeer het aub. opnieuw.</div>';
$return['status2'] = 'error';
}
echo json_encode($return);
}
else{
exit('No direct acces to this script!');
}
?>
Can anyone help ?
To make enter button to work you can use
Rather then