ajax and jquery display two different message on same div - php

Question

My problem is that I have two messages:
error message
success message
Here with the help of jQuery, I fetch the email field value and want to check whether email exits in the database or not.
If exits then show success message, otherwise show error message.
$('#email').blur(function(){
var err_msg_css={"background-color":"#FDE4E1","border":"1px solid #FBD3C6","border-radius":"10px 4px 4px 10px","color":"#CB4721","font-size": "14px","float":"left","font-family":"Arial, Helvetica, sans-serif","font-size":"small","font-style":"oblique","height":"22px","margin-left":"6px","padding":"3px","width":"196px"};
var sucess_msg_css={"background-color":"#D5FFC6","border":"1px solid #C0F0B9","border-radius":"10px 4px 4px 10px","color":"#48A41C","font-size": "14px","float":"left","font-family":"Arial, Helvetica, sans-serif","font-size":"small","font-style":"oblique","height":"22px","margin-left":"6px","padding":"3px","width":"196px"};
var text = /[a-z]$/;
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))#((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
var email=$('#email').val();
if(!$('#email').val()){
$('#err_msg_9').html('<img src="css/images/error.jpg">email field is empty').css(err_msg_css).show();
return false;
}else{
if(!pattern.test(email)){
//console.log('qwerty')
$('#err_msg_9').html('<img src="css/images/error.jpg">email is not valid').css(err_msg_css).show();
return false;
}else{
var Email=$("#email").val();
var datatype = 'email='+ Email;
$.ajax
({
type: "POST",
url: "ajax_centre.php",
data: datatype,
cache: false,
success: function(html)
{
$("#err_msg_9").html(html);
}
});
//$('#err_msg_9').html('<img src="css/images/success.jpg">sucessful').css(sucess_msg_css).show();
//
return false;
}
}
//$('#err_msg_1').hide();
return true;
});
PHP
if($_POST['email'])
{
$email=$_POST['email'];
$counter=0;
$sql=mysql_query("SELECT `email` FROM `form_value` WHERE `email`='$email'");
while($row = mysql_fetch_array($sql)){
if($email == $row['email']){
$counter = 1;
//echo "email is already in use";
}else{
//echo "email is unique";
}
}
}
//error message
$('#err_msg_9').html('<img src="css/images/error.jpg">email is not valid').css(err_msg_css).show();
//success message
$('#err_msg_8').html('<img src="css/images/success.jpg">sucessful').css(sucess_msg_css).show();

Answer 1

JSON is useful for this time.
Client code:
$.ajax
({
type: "POST",
url: "ajax_centre.php",
data: datatype,
cache: false,
success: function(html)
{
try{
json = $.parseJSON(html);
}catch(e){}
if( typeof json !== 'object' ){
alert(html);
return false;
}
if( ! json.success ){
var html = '<img src="css/images/error.jpg">' + json.message;
$("#err_msg_9").html(html).css(err_msg_css).show();
}else{
var html = '<img src="css/images/success.jpg">' + json.message;
$("#err_msg_8").html(html).css(sucess_msg_css).show();
}
}
});
Server Code:
$row = mysql_fetch_array($sql);
$response = array();
if( !empty($row) && $email === $row['email']){
$counter = 1;
$response['success'] = false;
$response['message'] = "email is already in use";
}else{
$response['success'] = true;
$response['message'] = "email is unique";
}
echo json_encode($response);