jquery ajax event.preventDefault() cancel the submit action of form - php

Question

I create a form in html:
<form id="flog" action="https://localhost/book.php" method="post">
<div id="inputUser">
<label for="userName">User</label>
<input type="text" name="userName" id="userName">
</div>
<div id="inputPass">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div id="savePassword">
<input type="checkbox" id="savePassword" value="CheckSavePAssword">Save password
<br>
</div>
<input type="submit" value="Acceptar">
</form>
And I create a submit function with JQuery:
$("#flog").submit(function(event) {
var savePassword = false;
if($("#CheckSavePAssword").is(':checked')) {
savePassword = true;
}
var login = new Object();
login.username = $("#userName").val();
login.pass = $("#password").val();
login.savePassword = savePassword;
var jlogin = JSON.stringify(login);
event.preventDefault();
$.ajax({
url: "./checkLogin.php",
type: "POST",
dataType: "JSON",
data: {"dataLogin" : jlogin},
success: function(data, textStatus, xhr) {
console.log("okk "+data);
},
error: function(xhr, textStatus, errorThrown) {
console.log("error");
console.log(xhr);
console.log(textStatus);
console.log(errorThrown);
}
});
});
But if i don't put "event.preventDefault()" the ajax function does not run, but this line (event.preventDefault()) canceling the submit form action.What is the problem?

Answer 1

When you use preventDefault(), you prevent the form from undergoing a traditional POST where your page would be submitted and reloaded. You need to use a JavaScript event handler if you want to give the user some feedback after your AJAX call.