jQuery keeps putting post data into URL - php

Question

I'm having some trouble with Jquery as of late. I wanted to get a little more skillful with it and create a login form using Jquerys $.post method but I've hit a little snag.
For some reason When I click the button to submit, the data I want to post instead gets put into the URL of the current page I'm in. Furthermore, the Jquery will only work when this data is in the url.
I don't want to show the website visitors their username and password in the url. Why isn't it just posting the data as intended?
EDIT: IT seems even with all the changes i've made, I still need to submit the form twice for it to actually log me in.
// WHERE MY REQUEST IS MADE AND SENT
<script>
$( document ).ready(function() {
$( "#loginbtn" ).click(function() {
var u = $("#loginform input:text" ).val();
var p = $("#loginform input:password" ).val();
$.post( "http://www.gameandshame.com/auth/login.php", { username: u, password: p}).done(function( data ) {
//alert("Data Loaded: " + data);
location.href = "http://www.gameandshame.com/";
});
});
});
</script>
//DATA POSTED TO HERE
<?php
session_start();
include_once("".$_SERVER['DOCUMENT_ROOT']."/auth/class_loader.php");
echo "STARTING LOGIN";
$login = new login();
$login = $login->startLogin($_POST['username'],$_POST['password']);
?>
//END OF MY STARTLOGIN FUNCTION
$_SESSION['t'] = $t;
$_SESSION['u'] = $u;
echo "SUCCESS";
return;
// The Login Form
<form method="post" id="loginform">
<table>
<tr>
<td><input name="username" type="text" maxlength="24" placeholder="Username"></td>
</tr>
<tr>
<td><input name="password" type="password" maxlength="24" placeholder="Password"></td>
</tr>
<tr>
<td><input id="loginbtn" type="submit" name="submit" value="Go!" /></td>
</tr>
</table>
</form>
I'm honestly at a miss as to why it would stick the arguments in the URL. there seems to be no logical reason for it, even more .
NOTE: The "STARTING LOGIN" only gets returned when I try to login and all the form data is in the url. The login script isn't even ran if there is no data in the url. very weird... :S

Answer 1

I see two problems.
[NO LONGER VALID AFTER FULL CODE ADDED BY POSTER] Check your javascript console. None of your javascript is getting executed because you're msising a }); to close your .click.
[HTML CODE ADDED BY POSTER, STILL VALID POINT BUT NOT THE SOURCE OF ERROR] Without your html, I'm talking a guess here. But I see a problem with the absence of e.preventDefault() in your click event. If your button is type="submit", your form will submit normally.
Wrap everything in
$(document).ready(function(){ [ALL YOUR JS CODE ] });
Otherwise jQuery tries to attach your click event before the DOM is fully loaded.

Answer 2

I found the problem.
In my form i had
<input id="loginbtn" type="submit" name="submit" value="Go!" />
when what I really needed to do was take out the submit from the button, and just grab the form details on-click. Because this type="submit" was still in there, it was posting the form normally, then attempting to post again from the JS, and as a result completely screwed up the ajax request.