在php中捕获ajax发布的值

Question

I have a form that uses jquery form validation to change the email of a user. The problem that im having is when the user submits the values are posted but i cant capture it in my php file. It always prints empty

Below is my code

$("#change_email").validate({
    rules: {
        "new_email": {
            required:true,
            email: true
        },
        "confirm_email": {
            required: true,
            equalTo : "#email"
        }
    },
    messages: {
        "new_email": {
            required: "required",
            email: "invalid"
        },
        "confirm_email": {
            required: "not match",

        }
    },
    submitHandler: function (form) { 
        var formd = $(form).serialize();
        $.ajax({
            url: 'http://localhost/secular/change_email',
            type: 'POST',
            data: formd,
            async: false,
            success: function(data) {
                alert(data);
            },
            error: function(data){
                console.log("error");
            });
         return false;
    }
});

HTML

<form id="change_email">
    <div class="form-group">
        <label class="control-label col-sm-3">New Email :</label>
        <div class="col-sm-4">
            <input type="text" name="new_email" id="email" class="form-control" required>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">Confirm Email:</label>
        <div class="col-sm-4">
            <input type="text" name="confirm_email"  class="form-control" required>
        </div>
    </div>
    <input class="btn btn-primary" value="Save" type="submit">
</form>

PHP

function change_email()
{
    echo $email = $this->input->post('new_email');
}

When I check on firebug it posts as below

new_email=test%40test.com&confirm_email=test%40test.com

Can someone tell me what am I doing wrong here?

EDIT: Look here in Firebug, especially the response: