Problems using JQuery Mobile to send data to server using PHP, POST, and JSON

Question

I have thoroughly researched this topic, but cannot seem to find an answer due to the fragmented nature of the discussions and the very different use cases everyone seems to have.

I am using JQuery mobile to send data to a PHP login/registration script via $.ajax() call. It appears that the data I am trying to send never makes it to the server to be evaluated, and I am at a loss as to why.

I am trying to send the data from this form:

<div data-role="content">
    <form id="reg_form" data-ajax="false">
      <div data-role="fieldcontain">
        <label for="reg_email">Email:</label>
        <input type="email" name="reg_email" id="reg_email" value=""  />

        <label for="reg_pass">Password:</label>
        <input type="password" name="reg_pass" id="reg_pass" value=""  />

        <label for="reg_pass_conf">Password:</label>
        <input type="password" name="reg_pass_conf" id="reg_pass_conf" value=""  />

      <h4 id="reg_notification"><?php echo 'Notifications will appear here...';  ?></h4>
      <button data-theme="b" id="reg_submit" type="button">Register!</button>
      </div>
  </form>
</div>

Which is triggered by this javascript:

$(document).on('pageshow', '#reg_page', function() {
    $("#reg_notification").text("page loaded");

    $(document).on('click', '#reg_submit', function(){
        $("#reg_notification").text("button clicked");

        var formDataReg = $("#reg_form").serialize();

        $.ajax({
            type: "POST", // Method of sending data to server
            url: "php_scripts/reg_handle.php", // php script being sent to
            cache: false,  // requested pages won't be cached by server
            data: formDataReg, // data to be sent to server
            dataType: "json", // data type to be received back from server
            success: onRegSuccess, // function to call on success
            error: onError  // function to call on error
        });

        return false;

    });
});


function onRegSuccess(data, status)
{
    alert(data);
    $("#reg_notification").text(data.email + ' ' + data.pass + ' ' + data.pass_conf);   
}

Which is sent to this php script:

<?php

if (isset($_POST['formDataReg'])) {
    $reg_email = 'formData is set';
}else{
    $reg_email = 'formData is not set';
}

$formData = json_decode($_POST['formDataReg']); 

$reg_pass = $formData->{'reg_pass'};
$reg_pass_conf = $formData->{'reg_pass_conf'};

$output = array('email' => $reg_email, 'pass' => $reg_pass, 'pass_conf' =>     $reg_pass_conf);
echo json_encode($output);
?>

However, as stated earlier, the if/else block detects that $_POST['formDataReg'] is not even set. When I try to use it to assign values to variables, it obviously has no data to assign and I get null values.

I used alert to verify that indeed formDataReg did hold the proper form values before being passed to the server in the ajax call. It somehow gets lost in the ajax call, or I am not accessing it correctly.

If someone can point me in the right direction, I would very much appreciate it.

Answer 1

By this:

var formDataReg = $("#reg_form").serialize();

You serialized your form into the form. Now in formDataReg has such contents:

reg_email=xxx@gmail.com&reg_pass=yyy&reg_pass_conf=yyy

You have to parse this query in your php file:

$email = $_POST['reg_email'];
$pass = $_POST['reg_pass'];
$pass_conf = $_POST['reg_pass_conf'];

But you tried to work with $_POST['formDataReg'] which wasn't sent. So it is wrong. Yes, you had variable formDataReg in your JS, but it means nothing. You had sent serialized string (query) with your ajax-request and have to handle it.

So this code:

if (isset($_POST['formDataReg'])) {
    $reg_email = 'formData is set';
}else{
    $reg_email = 'formData is not set';
}

$formData = json_decode($_POST['formDataReg']); 

wouldn't work because you hadn't sent formDataReg and there are no value with this key in $_POST array.

This:

$reg_pass = $formData->{'reg_pass'};
$reg_pass_conf = $formData->{'reg_pass_conf'};

$output = array('email' => $reg_email, 'pass' => $reg_pass, 'pass_conf' =>     $reg_pass_conf);
echo json_encode($output);

should work properly.

Let me know is something is unclear.