View Full Version : jQuery Form in header not sending POST-data

02-13-2011, 06:18 PM
Hello, I am trying to make my login-system which is in the header of my page work.

Before I used JavaScript it worked perfectly, but I'm currently making a page where an mp3 plays in the footer, and I want to be able to login without disturbing the music.

This is what I've tried:

<form name="login" action="javascript:getLogin('#login', 'include/login.php');" method="post">
<div style="position:absolute;top:10px;right:142px;text-align:right">
E-mail: <input type="text" name="email" /><br>
Wachtwoord: <input type="password" name="password" /></div>
<div style="position:absolute;top:6px;right:5px;width:120px;">
Onthouden:<input type="checkbox" name="remember" /><br>
<input type="hidden" name="redirect" value="/index.php" />
<input type="image" name="submit" src="/images/loginbutton.png" width="82" height="24" onClick="document.login.submit();">

the getLogin() function is:

function getLogin(elementSelector, sourceUrl) {

now, when I try to log in, you see the box dissapear for a second, means it's send to the login.php file, and then the form pops up again, without any cookies or sessions made, which it should do in login.php, but login.php did redirect it back to the normal header..

neither does any error pop up, which normally get send if the login fails, which will get echo'ed in the header.. but now the login box just get's back

so I'm pretty sure it's not sending the POSTdata of the form along, what can I do to fix this?

02-13-2011, 06:41 PM
I suppose that's jQuery you are using there?

Looking at your AJAX function, there's no mention of any form data, so obviously it's not being sent along.

You will want to use .post() instead of .load() for that (see here: http://api.jquery.com/jQuery.post/), and in order to get the from data in the first place, so you can pass it to .post(), you will want to look into .serialize(): http://api.jquery.com/serialize/

Also, in order to access the form with an id selector, you actually have to give it an id (not just a name).

And you definitely don't want to put that Javascript function into the action attribute of the form. You have to put the real submission URL in there, so people can log in without Javascript. Then you use something like this

$('#login').submit(function (event) {
// Put the AJAX call here

02-13-2011, 06:52 PM
I'm not really into this stuff yet, I tried working with it since yesterday,
and I'm reading through the pages now you linked.

But does this prevent, the whole page from reloading while logging in?
'cause the content & footer on my site shouldn't reload during the whole login process, else the music would restart again.

and yeah I forgot the add, the form is inside a <div id="login">
didn't show that 'cause there are other if statements in the same div..
the login just pops up when your session doesn't exist.

But where should I put that code you posted?