JQuery $ .post，PHP返回空白的POST变量

I cannot seem to get this to work. I have been researching this all day on Stack overflow and on the JQuery doc website itself, and no matter what i do, i cannot seem to get this to work.

Here is the HTML form (and the javascript for the JQuery post function):

<script>
function checkForm(){
// variable to hold request
var request;
// bind to the submit event of our form
$("#rchar").submit(function(event){
    // abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);
    // let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");
    // serialize the data in the form
    var serializedData = $form.serialize();

    // fire off the request to /form.php
    request = $.ajax({
    url: 'postregister.php',
    type: "POST",
    data: serializedData,
    success: function(result){
        console.log(result);
    },
    error: function(){
        console.log('error');
    }   
});

    // callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
    $("#navigation").html(serializedData);
    });

    // callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // log the error to the console
        console.error(
            "The following error occured: "+
            textStatus, errorThrown
        );
    });

    // prevent default posting of form
    event.preventDefault();
});
}
</script>
<form id="rchar" method="POST" action="postrenamecharacter.php">
<h3>Test Form!</h3>
<table id="leftalignment1">
<tbody>
<tr><td>Name: </td><td><input type="text" size="35px" id="name" value="" placeholder="Name" name="name"><input type="hidden" value="Test" id="hidden" name="hidden"></td></tr>
<tr><td>Password:</td><td><input type="password" size="35px" placeholder="Password" id="password" name="password"></td><td></td></tr>
</tbody>
</table><br><br>
<input action="submit" value="  Register  " id="submit" type="submit"><br>
</form>

So the response will be posted in the Java terminal and the JQuery POST variables will be loaded into the navigation bar. The navigation bar has the correct variables by reading this:

"name=Jeremy&hidden=Test&password=thisisatest"

Here is the PHP function called "postregister.php"

<?php
$oldname = $mysqli->real_escape_string($_POST['hidden']);
$password = $mysqli->real_escape_string($_POST['password']);
$title = "Your password is: ";
echo $title . "<br>" . $password . "<br>Your old name was: <br>" . $oldname;
?>

The issue is that the PHP code only returns this:

"Your password is: <br><br>Your old name was: <br>"

So obviously, the PHP variables are not being passed on to the PHP POST form from JQuery. Any help guys? I would really, REALLY appreciate it!

Thanks ^_^

You did not even call the function checkForm() method so I am not sure how your code works but I used $(document).ready(function()

The following is the script:

$(document).ready(function() {
    $("#rchar").submit(function(event){
        alert("hahahaha");
        var request;
        // abort any pending request
        if (request) {
            request.abort();
        }
        // setup some local variables
        var $form = $(this);
        // let's select and cache all the fields
        var $inputs = $form.find("input, select, button, textarea");
        // serialize the data in the form
        var serializedData = $form.serialize();

        // fire off the request to /form.php
        request = $.ajax({
        url: 'postregister.php',
        type: "POST",
        data: serializedData,
        success: function(result){
            console.log(result);
        },
        error: function(){
            console.log('error');
        }   
    });

        // callback handler that will be called on success
        request.done(function (response, textStatus, jqXHR){
        $("#navigation").html(serializedData);
        });

        // callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown){
            // log the error to the console
            console.error(
                "The following error occured: "+
                textStatus, errorThrown
            );
        });

        // prevent default posting of form
        event.preventDefault();
    });
});

The following is the html:

 <body>
    <form id="rchar" method="POST" action="postregister.php">
    <h3>Test Form!</h3>
    <table id="leftalignment1">
    <tbody>
    <tr><td>Name: </td><td><input type="text" size="35px" id="name" value="" placeholder="Name" name="name"><input type="hidden" value="Test" id="hidden" name="hidden"></td></tr>
    <tr><td>Password:</td><td><input type="password" size="35px" placeholder="Password" id="password" name="password"></td><td></td></tr>
    </tbody>
    </table><br><br>
    <input action="submit" value="  Register  " id="submit" type="submit"><br>
    </form>
</body>

The following is the php script:

<?php
  $oldname = $_POST['hidden'];
  $password = $_POST['password'];
  $title = "Your password is: ";
  echo $title . "<br>" . $password . "<br>Your old name was: <br>" . $oldname;
?>

I tested it and I am able to get the value from ajax to the php page