Ajax to php - javascript events not firing - php

Question

I'm sure this will be easy for you guys but I'm struggling with this one. Just trying to do a simple ajax post request to a php file here.
I can see that the ajax request is working because I get valid data back from my php script (I verified this by echoing the result to the page). However, my ajax callbacks are not firing. See below:
Javascript:
var request;
$(document).ready(function() {
$('#loginform').submit(function(e) {
if (request)
request.abort();
var $form = $(this);
var $inputs = $form.find("input, select, button");
$inputs.prop("disabled", true);
var serializedData = $form.serialize();
request = $.ajax({
url: "/login.php",
type: "post",
data: serializedData,
timeout: 10000,
success: function() {
alert("success");
// $("#result").html('Submitted successfully');
},
error: function() {
alert("failure");
// $("#result").html('There is error while submit');
}
});
});
PHP
<?php echo 'foo'; exit(); ?>
I almost feel stupid asking this considering the number of examples there are, but I cannot get this to work for the life of me. Suggestions?
EDIT
Included html (Most of the css classes are from bootstrap btw)
<div style='background-color: #193048; width: 100%; height: 500px; background-repeat: no-repeat; background-position: center center; background-size: cover;'>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<h1 class="text-center login-title whiteFont">Sign in to continue</h1>
<div class="account-wall">
<div align='center'>
<img class="profile-img" align='center' src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
alt="">
</div>
<form id="loginform" class="form-signin" method="post" >
<input type="text" name='emailTxt' class="form-control" placeholder="Email" required autofocus>
<input type="password" name="passTxt" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit" value="login" id="loginBtn" >
Sign in</button>
<label class="checkbox pull-left">
<input type="checkbox" value="remember-me" >
<label class="whiteFont">Remember me</label>
</label>
<label class="whiteFont">Need Help?</label><span class="clearfix"></span>
</form>
</div>
</div>
</div>
</div>

Answer 1

.submit is most likely causing a postback, canceling out your JS. Add preventDefault to the beginning of your function:
e.preventDefault();

Answer 2

You need to pass the data returned from the server as an argument to your callback
var request;
$(document).ready(function() {
$('#loginform').submit(function(e) {
if (request)
request.abort();
var $inputs = $form.find("input, select, button");
$inputs.prop("disabled", true);
var $form = $(this);
var serializedData = $form.serialize();
request = $.ajax({
url: "/login.php",
type: "post",
data: serializedData,
timeout: 10000,
success: function(data, status, xhr) { // <---- changes made here
alert("success");
// $("#result").html('Submitted successfully');
},
error: function() {
alert("failure");
// $("#result").html('There is error while submit');
}
});
});