Sending html form data as JSON to PHP using JQuery/AJAX - php

Question

When i click my login button, it just reloads the page for some reason. it should alert the string i echo from my php page.
This is my login.js code:
$(document).ready(function(){
$('#login').click(function(){
$('#msgLoginStatus').show();
$('#msgLoginStatus').html("processing...");
$.post('login.php',{username:"bob",password:"pass"}, function(data){
alert(data);
});
});
});
my login.php:
<?php
echo "message";
?>
and my form:
<form id="loginForm" action="" method="post">
<fieldset id="body">
<fieldset>
<label for="username">Username</label>
<input type="text" name="username" id="username" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<button id="login">login</button>
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<br />
<p id="msgLoginStatus" style="display:none"></p>
</fieldset>
<span>Forgot your password?</span>
</form>
There are no errors in browser console. I tried this also using $.ajax, it returned an error, i tried putting the error variable in an alert, but when it alerted, it was an empty string. Anyone have an idea whats wrong?

Answer 1

Your login button has an ambiguous action - add type="submit" like this:
<button id="login" type="submit">Login</button>
Now if you really want to execute an explicit POST with JavaScript, call e.preventDefault so the browser's automatic "submit" action will be suppressed.
e.preventDefault();
$.post(...);
But it will probably be better to let the form submit itself. To do this specify the correct action="login.php" attribute in the form:
<form id="loginForm" action="/login.php" method="post">
Keep your existing "click" handler on the login button, just remove the "$.post" part and let the browser handle the posting. You'll still get the nice "processing..." text.
Even better, handle the "submit" event on the form instead of the "click" event on the button:
$('#loginForm').submit(function(e) {
$('#msgLoginStatus').show();
$('#msgLoginStatus').html("processing...");
});
This way you'll get the nice updates whether the user submits the form using the button or by pressing "enter" on the keyboard.

Answer 2

Try:
$('#login').click(function(e){
e.preventDefault();
$('#msgLoginStatus').show();
$('#msgLoginStatus').html("processing...");
$.post('login.php',{username:"bob",password:"pass"}, function(data){
alert(data);
});
});
That prevents a "normal" submit from happening (which, I take, is why you are not getting any errors).
See http://api.jquery.com/event.preventDefault/

Answer 3

Add e.preventDefault(); to the clck handler (and grab the event object in the handler as e).

Answer 4

Or you can Just set the button type = 'Button' and not Submit. THis will also run your code
<button id="login" type="button">Login</button>
In this way you don't have to halt the browser's event