jQuery Mobile Ajax Form Submission / Insert Data into MySQL DB - php

Question

I am having a problem with the $_POST array that comes from my form.
Here is the code for my form:
<form id="form-add-client" method="post" data-ajax="false">
<input type="text" name="companyName" id="companyName" value="" placeholder="Company Name" />
<input type="text" name="email" id="email" value="" placeholder="Email" />
<br />
<input type="text" name="firstName" id="firstName" value="" placeholder="First Name" />
<input type="text" name="lastName" id="lastName" value="" placeholder="Last Name" />
<input type="tel" name="workPhone" id="workPhone" value="" placeholder="Work Phone" />
<input type="tel" name="mobilePhone" id="mobilePhone" value="" placeholder="Mobile Phone" />
<br />
<input type="text" name="streetAddress" id="streetAddress" value="" placeholder="Street Address" />
<input type="text" name="city" id="city" value="" placeholder="City" />
<input type="text" name="postalCode" id="postalCode" value="" placeholder="Postal Code" />
<br />
<input type="button" data-theme="b" name="submit" id="submit-add-client" value="Add Client" />
</form>
Here is the jQuery ajax code:
// Add Client
$(document).on('pagebeforeshow', '#add-client', function(){
$(document).on('click', '#submit-add-client', function() { // catch the form's submit event
if($('#companyName').val().length > 0 && $('#email').val().length > 0){
// Send data to server through the ajax call
// action is functionality we want to call and outputJSON is our data
// fetch the data for the form
var data = $('#form-add-client').serialize();
$.ajax({url: 'http://www.website.co.nz/goflowdata/addclient.php',
data: data,
type: 'post',
async: 'true',
dataType: 'json',
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.loading('show'); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.loading('hide'); // This will hide ajax spinner
},
success: function (result) {
if(result.status) {
$.mobile.changePage("#add-client-success");
} else {
alert('Add client unsuccessful!');
}
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Network error has occurred please try again!');
}
});
} else {
alert('Please fill all necessary fields');
}
return false; // cancel original event to prevent form submitting
});
});
Here is the code from the addclient.php file:
<?php
header("Access-Control-Allow-Origin: *");
require_once("debug/chromephp.php");
$formData = $_POST;
ChromePhp::log($_POST);
require_once("config.php");
$companyName = $formData['companyName'];
$email = $formData['email'];
$firstName = $formData['firstName'];
$lastName = $formData['lastName'];
$workPhone = $formData['workPhone'];
$mobilePhone = $formData['mobilePhone'];
$streetAddress = $formData['streetAddress'];
$city = $formData['city'];
$postalCode = $formData['postalCode'];
$sql="INSERT INTO clients (companyName, email, firstName, lastName, workPhone, mobilePhone, streetAddress, city, postalCode) VALUES ('$companyName', '$email', '$firstName', '$lastName', '$workPhone', '$mobilePhone', '$streetAddress', '$city', '$postalCode')";
$result = mysql_query($sql);
if($result) {
// Success
$output = array('status' => true, 'massage' => 'Success!');
echo json_encode($output);
} else {
// Failed
$output = array('status' => false, 'massage' => 'Failed!');
echo json_encode($output);
}
?>
My problem is with the $formData['postalCode']; variable. It seems to be emtpy. I have used ChromePHP to try debug the issue and it returns the form data before being posted via ajax. In the serialized string the postalCode is there as you can see the console screenshot below. Can anyone see why this is happening? Any help is much appreciated.
When I use ChromePHP to log the contents of $_POST to the console I get this twice:
Object {companyName: "TestCompany", email: "test#email.com", firstName: "John", lastName: "Doe", workPhone: "01234567"…} city: "Testcity" companyName: "TestCompany" email: "test#email.com" firstName: "John" lastName: "Doe" mobilePhone: "012345678" postalCode: "" streetAddress: "7 Test Street" workPhone: "01234567" proto: Object
Screenshot:
Screenshot of MySQL table row:
Screenshot of console logged variables: