Estoy haciendo un login para poder administrar usuarios junto con una base de datos con PHP, HTML, CSS. En un principio, pensé en mandar el botón de submit del formulario a un archivo php que hiciera todo el proceso pero, me gustaría que todo se hiciera de manera asíncrona.
He estado buscando algunos tutoriales por internet y, por lo que veo, hay muchos tutoriales usando Ajax y jQuery, ya que soy principiante en estas dos tecnologías. Mi idea es la siguiente:
Desde index.php, el formulario no tendría action, si no que jQuery llamaría al archivo php (aún no realizado) encargado de poder administrar el proceso.
Código index.php:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- CSS imports -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" />
<!-- JQuery include -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/loginForm.js"></script>
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
<!-- Navigation Bar content -->
<nav class="navBar">
<ul>
<li><a class="hover" href="index.php">Index</a></li>
</ul>
</nav>
<!-- Body content -->
<div class="bodyContainer">
<!-- Form -->
<div class="formContainer">
<p class="formTitle">Login form</p>
<form id="loginForm" method="post">
<div class="formDataContainer">
<div id="error"><!-- Error will be shown here ! --></div>
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<button type="submit" id="btnLogin">Sing in</button>
<button type="button" id="registerBtn" onclick="location.href='models/registerForm.php';">Register</button>
</div>
</form>
</div>
</div>
</body>
</html>
Esa función que usa jQuery y Ajax a su vez, cambiará el botón de "login (submit)" poniendo entrando... e iniciando sesión si la petición por Ajax (POST) ha sido correcta.
Código Ajax -- jQuery (basado en un tutorial)
$('document').ready(function() {
/* login submit */
function submitForm() {
var data = $("#loginForm").serialize();
$.ajax({
type: 'POST',
url: 'php/loginProcess.php',
data: data,
beforeSend: function() {
$("#error").fadeOut();
$("#btnLogin").html('Sending ...');
},
success: function(response) {
if (response == "ok") {
$("#btnLogin").html('Signing In ...');
setTimeout(' window.location.href = "home.php"; ', 4000);
} else {
$("#error").fadeIn(1000, function() {
$("#error").html(response);
$("#btnLogin").html('Sign In');
});
}
}
});
return false;
}
/* login submit */
});
El caso es que, al pulsar el botón de submit, no pasa nada. Simplemente no te hace la petición y, he probado a hacer el archivo php para que mostrara algo de ejemplo, sin resultado.
¿Sabéis cómo podría arreglarlo?
PD:
La ruta de las carpetas son:
DirProyecto
php
archivos.php
js
jQueryScript.js
css
index.php