I am doing a login to manage users along with a database with PHP, HTML, CSS. At first, I thought of sending the form's submit button to a php file that would do the whole process, but I would like everything to be done asynchronously.
I have been looking for some tutorials on the internet and from what I see there are many tutorials using Ajax and jQuery as I am a beginner in these two technologies. My idea is the following:
From index.php, the form would not have an action, instead jQuery would call the php file (not yet done) in charge of managing the process.
index.php code:
<!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>
That function that uses jQuery and Ajax in turn, will change the "login (submit)" button by putting entering... and logging in if the request by Ajax (POST) has been correct.
Ajax code -- jQuery (based on a 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 */
});
The thing is that when you press the submit button, nothing happens. It simply does not make the request and I have tried to make the php file to show some example, without result.
Do you know how I could fix it?
P.S:
The path of the folders are:
DirProyecto
php
archivos.php
js
jQueryScript.js
css
index.php
Modifications:
Remove the
onclick
from the submit button so that the button looks like this:Call the anointing using a selector
jQuery
like so:Make the
id
form's match the selector'sjQuery
Here is the working code
Looking at the code I found the problem (it was silly).
I had created a function that never called, because the script code had a validation part that I didn't use in my case.
Removing that code does not call the jQuery function.
Removing that function, I have solved it correctly and now it loads everything.