I can't get to the success block of my jquery function - php

Question

I am a little stuck on my jquery function below.
Here is the situation:
1) My php returns valid JSON - I can test this when I change the $_POST into $_GET and manually pass through data with the url.
2) The function below works correctly right up to the $.ajax part.
3) The function always returns ready state 0
Let me know if you need anymore data. Days of going over Stack Overflow and other forums has helped with insight, but I can not seem to fix in my instance.
//HTML
<form class="login-form" method="POST">
<input type="text" id="name" name="name" value="" placeholder="Username" required="yes">
<input type="password" id="pwd" name="pwd" value="" placeholder="Password" required="yes">
<input type="submit" id="login" name="login" value="Login" class="loginbutton" >
</form>
//JavaScript
$('#login').click(function(event)
{
//event.preventDefault();
var u = $('#name').val();
var p = $('#pwd').val();
console.log(u, p);
console.log("I am seeing this function?");
$.ajax({
contentType: "application/json; charset=utf-8",
cache: false,
type: "POST",
url: "functions/login.php",
data: {name:u, pwd:p},
datatype: "json",
error: function(msg)
{
console.log("RS - "+msg.readyState);
console.log(msg);
},
success: function(msg)
{
console.log("RS - "+msg.readyState);
console.log(msg);
$.each( msg, function( i, val ) {
console.log(val[0].session); //session is a variable in the json string
});
console.log("Success block");
}
});
});

Answer 1

datatype -> dataType problem, and if it does not help try out the 'text' type.
Maybe the php server send out other lines that messes up things.

Answer 2

event.preventDefault() or return false is missing at the end of your event handler for the click. Citation from w3schools
The event.preventDefault() method stops the default action of an element from happening.
so in our case it prevents form from sending.
These two technics prevent an event from bubbling upper. Without them, the form is sent to itself (address of your script) which results into page refresh and stop executing the script.
You can see the result (readyState) from $.ajax() function because it is faster than page reload.