jQuery not sending POST data

Question

So I have a really simple form on a website that's entirely AJAX based for loading its pages. The only way for this form to work would be for it to do some AJAX magic as well, so I set about doing it. I had the form tested so I knew it all worked.

Here's the javascript for my form. The variable "fullpath" just tells me what page is loaded at the moment, all of the pages are stored in the local "pages" directory. It serializes the form and sends it to the server, with some debugging alerts.

$(document).ready(function() {
$("#regForm").submit(function(event) {
    alert($(this).serialize());
        $.post("pages/" + fullpath, $(this).serialize(), function(data){
            alert(data);                      
        });
        return false;
  });
});

Here's the form itself

<form name="input" id="regForm">
<div class="form-field"><label>Username</label> <input type="text" name="username"/></div>
<div class="form-field"><label>Password</label> <input type="password" name="password"/></div>
<div class="form-field"><label>Confirm Password</label> <input type="password"  name="password2"/></div>
<div class="form-field"><label>Screen Name</label> <input type="text" name="screenname"/></div>
<div class="form-field"><label>Email Address</label> <input type="text" name="address"/></div>
<div class="form-field"><label>Group</label> <select name="usergroup"> 
<option value="0">Superuser</option>
<option value="1">Admin</option>
<option value="2">Moderator</option>
<option value="3">Advmember</option>
<option value="4">Member</option>
<option value="5">Guest</option>
</select> <br />
<label>Submit: </label><input type="submit" value="Submit" />
</div>
</form>

And here's some PHP I put at the beginning of the page

print_r($_POST);

So I fill the form with some bogus info, and I press submit. All of the data is displayed with the

alert($(this).serialize());

And then the call is successful and I see the loaded form with my

alert(data);

But, where I ask to print the $_POST array in PHP, this is all I get

Array ()

So jQuery is sending the data, it's getting the page back, but for some reason the POST variables aren't going through. Anyone care to lend a hand?

Answer 1

This works in a Fiddle.

Are you sure that fullpath is defined globally ? I don't see any other possible source of errors in your code.

Edit: I can see the actual problem from your comments: 301 redirects don't work through POST:

If the 301 status code is received in response to a request other than GET or HEAD, the user agent MUST NOT automatically redirect the request unless it can be confirmed by the user, since this might change the conditions under which the request was issued.

You need remove this redirect thing, so "pages/" + fullpath directly points to the PHP script. This could also be a problem with your server configuration.

In case of Apache, you might also want to have a look at this SO question.

Answer 2

I packed your snippets together in an html-file and it worked for me so the problem has to be somewhere else in your code. (source: http://pastebin.com/y4Dfsepv)

Answer 3

you need to chance your direct link."pages/" + fullpath. That is a problem, ajax can't recognize your link when you post

Answer 4

You have not specified method="post" in your form. If you do not specify, it becomes method="get" by default. So there is no values in the $_POST, you can print_R($_GET) and you will see values there.

Change the below line from:

<form name="input" id="regForm">

to:

 <form name="input" id="regForm" method="post">

Update:

Updating the answer as per the comment. The "pages/" + fullpath in $.post might be pointing to the wrong page, try alerting it and check server response in firebug. Make sure it is pointing to the page you want else use the full path to the php script like below:

$.post("http://localhost/pages/" + fullpath, $(this).serialize(), function(data)

Answer 5

** Editing because we've learned that there is a 301 Redirect code being returned by the server **

See this: https://mdk.fr/blog/post-data-lost-on-301-moved-permanently.html

301 Redirects lose contents of the POST. So jQuery is sending it along, but the server redirects it to the right location of the script without the POST data. You need to figure out where the right location of the script is and specify that in your jquery call to avoid the redirect.

Answer 6

You don't have method="POST" in your form.