Ajax & PHP email with JSON return - php

Question

I have a simple contact form. I got the invalid email and fill all the fields error messages correctly, but I don't get the success message. Hence it's sending the email twice without giving any returning success messages (I just click once, I'm sure about that).
The JS part:
<script language="javascript" type="text/javascript" >
$(function(){
$("#ContactForm").submit(function(){
$("#submitf").value='Sending...';
$.post("send.php", $("#ContactForm").serialize(),
function(data){
if(data.frm_check == 'error'){
$("#message_post").html("<div class='errorMessage'>Error: " + data.msg + "!</div>");
document.ContactForm.submitf.value='Send Again >>';
document.ContactForm.submitf.disabled=false;
} else if(data.frm_check == 'done') {
$("#message_post").html("<div class='successMessage'>Thanks, " + data.msg + "!</div>");
}
}, "json");
return false;
});
});
</script>
The PHP part:
$return_arr = array();
$email = $_POST["email"];
$message= $_POST["message"];
$name= xss_protect(sacarXss($_POST["name"]));
if(!empty($email) && !empty($name) && !empty($message)) {
if(isValidEmail($email)){
$return_arr["frm_check"] = 'done';
$return_arr["msg"] = "Success";
send_mail($email, $name, $message);
}
else{
$return_arr["frm_check"] = 'error';
$return_arr["msg"] = "Invalid email";
}
} else {
$return_arr["frm_check"] = 'error';
$return_arr["msg"] = "Fill all the fields.";
}
echo json_encode($return_arr); ?>
The HTML part:
<form method="post" id="ContactForm">
<div class="element">
<input type="text" name="name" class="text" placeholder="name" /><br />
<input type="text" name="email" placeholder="email" class="text" /><br />
<textarea name="message" class="textarea" rows="3" placeholder="message"></textarea><br />
<input type="submit" name="submitf" id="submitf" value="send!"/>
</div>
<div id='message_post'></div>
</form>

Answer 1

I think the form is sent twice to the php script: via the javascript and the submit button of the form. If you change the type of the submit button from 'submit' to 'button', the form will be sent only once.
You must parse the JSON response, so the javascript function becomes:
<script language="javascript" type="text/javascript" >
$(function(){
$("#ContactForm").submit(function(){
$("#submitf").value='Sending...';
$.post("send.php", $("#ContactForm").serialize(),
function(data){
data = jQuery.parseJSON(data);
if(data['frm_check'] == 'error'){
$("#message_post").html("<div class='errorMessage'>Error: " + data['msg'] + "!</div>");
document.ContactForm.submitf.value='Send Again >>';
document.ContactForm.submitf.disabled=false;
} else if(data['frm_check'] == 'done') {
$("#message_post").html("<div class='successMessage'>Thanks, " + data['msg'] + "!</div>");
}
}, "json");
return false;
});
});
</script>