Unable to simultaneously POST and JSON with ajax jquery - php

Question

I suspect that this might be a server issue, but since I do not have access to our server, I was hoping maybe someone else had a fix or could explain to me exactly what is causing the problem.
The problem ....
Using JQuery AJAX I am unable to simultaneously POST data to a php file and receive json encoded data from the php file. If the json dataType is included I am unable to POST data from the form to the php file. If I do not specify the json dataType (i.e. comment it out) then I can POST data to the php file but cannot receive the json encoded data.
I've tried this with my own js/php code and for source code that I downloaded, in order to compare results in case it was just a mistake in my coding. Both are 'submit forms' and both exhibit the problems outlined above. In case its relevant, I include the downloaded source code below. My js/php code uses similar ajax requests.
javaScript:
<script type="text/javascript">
$(document).ready(function(){
$("#myForm").submit(function(){
dataString = $("#myForm").serialize();
$.ajax({
type: "POST",
url: "postForm_ajax.php",
data: $("#myForm").serialize(),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function(msg){
$("#formResponse").removeClass('error');
$("#formResponse").addClass(msg.status);
$("#formResponse").addClass(msg.status);
},
error: function(){
$("#formResponse").removeClass('success');
$("#formResponse").addClass('error');
$("#formResponse").html("There was an error submitting the form. Please try again.");
}
});
//make sure the form doens't post
return false;
});
});
</script>
the PHP:
<?php
//function to validate the email address
//returns false if email is invalid
function checkEmail($email){
if(!preg_match("/^[_\.0-9a-zA-Z-]+#([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z]{2,6}$/i", $email)) {
//if(eregi("^[a-zA-Z0-9_]+#[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$]", $email)){
return FALSE;
}
list($Username, $Domain) = explode("#",$email);
if(#getmxrr($Domain, $MXHost)){
return TRUE;
} else {
if(#fsockopen($Domain, 25, $errno, $errstr, 30)){
return TRUE;
} else {
return FALSE;
}
}
}
//response array with status code and message
$response_array = array();
//validate the post form
//$name = $_POST['name'];
//check the name field
if(empty($_POST['name'])){
//set the response
$response_array['status'] = 'error';
$response_array['message'] = 'Name is blank';
//check the email field
} elseif(!checkEmail($_POST['email'])) {
//set the response
$response_array['status'] = 'error';
$response_array['message'] = 'Email is blank or invalid';
//check the message field
} elseif(empty($_POST['message'])) {
//set the response
$response_array['status'] = 'error';
$response_array['message'] = 'Message is blank';
//form validated. send email
} else {
//send the email
$body = $_POST['name'] . " sent you a message\n";
$body .= "Details:\n\n" . $_POST['message'];
mail($_POST['email'], "SUBJECT LINE", $body);
//set the response
$response_array['status'] = 'success';
$response_array['message'] = 'Email sent!';
}
echo json_encode($response_array);
?>
EDIT....One Solution
Ok...so I found a hack that works. I don't specify the dataType:'json', i.e. comment that line and the contenType line out. Then I'm able to POST the data. Still have the php file echo the json_encode($response_array). Then put the following code in the success function
var obj = jQuery.parseJSON(msg);
$("#formResponse").addClass(obj.status);
$("#formResponse").html(obj.message);
This is not as nice as being able to specify the dataType:'json' in the ajax call. If anyone has a better solution or can explain why this problem is occurring, let me know.
Thanks

Answer 1

According to me you are doing nothing wrong... except you are specifying to many things...
For eg:
dataType: "json",
is sufficient for ajax call to work.... there is no need for
contentType: "application/json; charset=utf-8",
in your code, if you add this line it returns the empty array in return for some reason (not very sure about the actual reason)....
But moment I specify just
dataType: "json",
it works like a charm where in return I get the object, which I need not parse.
edit:
What I tried is as followring... just change the input name to fname from name and it worked very well
<form id="myForm" name="myForm" method="POST"
action="postform_ajax.php">
name: <input type="text" name="fname" /> <br /> email: <input
type="text" name="email" /> <br /> message: <input type="message"
name="message" /> <br /> <input type="submit" />
<div id="formResponse"></div>
</form>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myForm").submit(function() {
dataString = $("#myForm").serialize();
$.ajax({
type : "POST",
url : "postForm_ajax.php",
data : $("#myForm").serialize(),
dataType : "json",
success : function(msg) {
$("#formResponse").removeClass('error');
$("#formResponse").addClass(msg.status);
$("#formResponse").html(msg.status);
},
error : function() {
console.log('err', msg);
$("#formResponse").removeClass('success');
$("#formResponse").addClass('error');
$("#formResponse").html("There was an error submitting the form. Please try again.");
}
});
//make sure the form doens't post
return false;
});
});
</script>