Question

jQuery doesn’t seem to be passing form variables or the http POST action when using the .ajax()

Doing a var_dump( $_POST ); results in an empty array.

Suggestions? What have I done wrong…. it’s a simple concept –
Someone esle posted a similar Q, but no one responded, his solution was adding an id to the form, mine already has that, so it’s not fixing my issue.

currently I’m viewing the return page contents in firebug – I’m not doing anything yet, because I can’t get the data to the server…(first things first).

My HTML

<script type="text/javascript">
$( document ).ready( function(){
    $( "#myform" ).submit( function () {
        $.ajax({
            type: "POST",
            dataType: "html",
            cache: false,
            url: "x.php",
            success: function( data ){              
                //...tell user there was success...
            },
            error: function( data ){
                //...tell user thre was a problem...
            }
        });
        return false;
    });     
});
</script>

<form name="myform" id="myform" action="" method="POST">
    <label for="name" id="name_label">x: </label>
    <input type="text" name="x" id="x" size="30" value=""/> 
    <input type="submit" name="submit" value="Submit"> 
</form>
<div id="results"><div>

And here is the (x.php) PHP code – very simple proof of concept…

<?php
var_dump( $_GET );
var_dump( $_POST );
var_dump( $_REQUEST );
?>

the response looks like this

array(0) {}
array(0) {}
array(1) {
  ["PHPSESSID"]=>
  string(26) "e1j18j..."
}

Answer 1

You didn’t pass any post data in the ajax call, try

    $.ajax({
        type: "POST",
        dataType: "html",
        cache: false,
        url: "x.php",
        data: $(this).serialize(),
        success: function( data ){              
            //...tell user there was success...
        },
        error: function( data ){
            //...tell user thre was a problem...
        }
    });