My script uses jQuery 3.3.1 to request a login page, and is returning an error instead of logged in or out, on the server PHP is 5.6 with Apache / Linux, and the local server where it works is the same version it works.
<form class="js-validate" id="formLogin" name="formLogin" autocomplete="off" accept-charset="UTF-8" onSubmit="return false;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 mb-6">
<div class="js-form-message">
<label for="user_email" class="h5 d-block text-uppercase">Email address</label>
<div class="js-focus-state input-group u-form">
<input type="email" autocomplete="false" class="form-control u-form__input" id="user_email" name="user_email" required placeholder="email@example.com" aria-label="email@example.com" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 mb-6">
<div class="js-form-message">
<label for="user_password" class="h5 d-block text-uppercase">Password</label>
<div class="js-focus-state input-group u-form">
<input type="password" autocomplete="false" class="form-control u-form__input" id="user_password" name="user_password" required placeholder="********" aria-label="********" data-msg="Your password is invalid, please try again." data-error-class="u-has-error" data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="returnResponse"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-left">
<a class="font-size-14 font-weight-bold title-green" href="login/recuperar-senha/">I forgot my password!</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-right">
<button id="btnSend" type="submit" class="btn btnp-success btn-sm color-1 material-design transition-3d-hover" data-color="#004740">Sign in</button>
</div>
</div>
</form>
<!-- SCRIPT - LOGIN -->
<script>
$(document).ready(function(){
$("#formLogin").on('submit', function(){
$.ajax({
type:'POST',
url: "login/send-form/",
data: $('#formLogin').serialize(),
beforeSend: function(){
$('#btnSend').attr("disabled","disabled");
$('#formLogin').css("opacity",".5");
},
success: function(data) {
$('#formLogin')[0].reset();
$('#returnResponse').html(data);
$('#formLogin').css("opacity","");
$("#btnSend").removeAttr("disabled");
console.log(data);
}
});
});
});
</script>
On the console it returns an error and does not execute the request, on localhost it works:
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
