I am trying to get my jQuery to work with CSS animations/class changes and working with an ajax post for this logon forum. I am having trouble reworking the JQuery animation script and incorporating the Ajax port for username and password. It does not seem to be posting the login information.
<form class="login" action="" method="post" autocomplete="false">
<div class="group">
<input id="user" type="username" name="user" class="input" placeholder="Username" required autofocus>
</div>
<div class="group">
<input id="password" type="password" name="password" class="input" data-type="password" placeholder="Password" required>
</div>
<div class="group">
<button>
<i class="spinner"></i>
<span class="state">Log in</span>
</button>
</div>
<div class="hr"></div>
</form>
Here is the jQuery
var working = false;
$('.login').on('submit', function(e) {
e.preventDefault();
if (working) return;
working = true;
var $this = $(this),
$state = $this.find('button > .state');
$this.addClass('loading');
$state.html('Authenticating');
$.ajax({
type: "POST",
data: $(this).serialize(),
cache: false,
url: "login.php",
success: function(data) {
if (data.status == 'success') {
this.addClass('ok');
$state.html('Welcome back!');
setTimeout(function() {
window.location = "/index.php"
}, 4000);
} else if (data.status == 'error') {
setTimeout(function() {
$state.html('Log in');
$this.removeClass('ok loading');
}, 3000);
}
},
});
});
After using Diego's suggestion and piping the out to the console log I was able to determine that the php function was not returning anything. Adding an echo in with corresponding results resolved my issue along with using 'data' in the if statement instead of 'data.status'.