Simple formulaire login en Ajax ...
Posté : 26 janv. 2019, 19:37
Bonsoir,
en fait, je veux simplement tester un formulaire de login en PHP/Ajax.
Le problème, c'est que j'ai l'impression que la page "register.php" n'est pas appelée via Ajax quand je veux valider la connexion.
Voici mon code :
Merci d'avance pour votre aide.
Bonne soirée
Thierry
en fait, je veux simplement tester un formulaire de login en PHP/Ajax.
Le problème, c'est que j'ai l'impression que la page "register.php" n'est pas appelée via Ajax quand je veux valider la connexion.
Voici mon code :
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="author" content="THIRIONET Thierry" />
<meta name="description" content="social network, réseau social, teachers, Teachers du net, TDN, tdn">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Responsive registration form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style type="text/css">
.alert-class,.register-class,.forgot-class{
display: none;
}
</style>
</head>
<body class="bg-dark">
<div class="container mt-4">
<div class="row">
<div class="col-lg-4 offset-lg-4 alert-class" id="alert">
<div class="alert alert-success">
<strong id="result"></strong>
</div>
</div>
</div>
<!-- Login Form -->
<div class="row">
<div class="col-lg-4 offset-lg-4 bg-light rounded" id="login-box">
<h2 class="text-center mt-2">Login</h2>
<form method="post" role="form" class="p-2" id="login-form">
<div class="form-group">
<input type="input" name="username" id="username" placeholder="Entrez votre nom utilisateur" class="form-control" minlength="3" required>
</div>
<div class="form-group">
<input type="password" name="password" id="password" placeholder="Entrez votre mot de passe" class="form-control" minlength="6" required>
</div>
<div class="form-group">
<input type="submit" name="login-btn" id="login-btn" value="Connexion" class="btn btn-primary btn-block">
</div>
</form>
</div>
</div>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#login-lnk").click(function(){
$("#register-box").hide();
$("#login-box").show();
});
$("#login-form").validate();
$("#login-btn").click(function(e){
if (document.getElementById('login-form').checkValidity()){
e.preventDefault();
$.ajax({
type: "post",
url: "register.php",
data:$("#login-form").serialize()+'&action=login',
success:function(response){
window.alert("login function");
$("#alert").show();
$("#result").html(response);
}
});
}
return true;
});
});
</script>
</div>
</body>
</html>
Bonne soirée
Thierry