How to hide a email form when it gets response from JSON

I am trying to create an email form with the fields validation, but I'm having trouble with my jQuery script. The script gets message response from a PHP script where I use json_encode(). When PHP response appears, the email form should disappear and reappear in the case that the it gets an error or definitely disappear in the case that email is sent.

Can someone help me please? I don't understand where I made a mistake. Thank you.

p.s. Sorry for my English, it's a bit rusty.

JavaScript:

jQuery(document).ready(function(){  
jQuery("#contactform").submit(function(){  
    jQuery.ajax({  
        type: "POST",
            url: "email.php",  
            data: jQuery("#contactform").serialize(),  
            dataType: "json",  
            success: function(msg){
            jQuery("#load").fadeIn();
            jQuery("#contactform").hide();
            jQuery("#result").removeClass('error');  
            jQuery("#result").addClass('success');  
            jQuery("#result").addClass(msg.status);  
            jQuery("#result").html(msg.message);  
            },  
            error: function(){  
            jQuery("#result").removeClass('success');  
            jQuery("#result").addClass('error');  
            jQuery("#result").html("There was an error submitting the form. Please try again.");  
        }  
        });  
return false;  
});  });    

PHP:

<?php
session_cache_limiter('nocache');
header('Expires: ' . gmdate('r', 0));
header('Content-type: application/json');

include ('lang.php');

$name = $_POST['name'];

$email = $_POST['email'];

$comment = $_POST['message'];

    if ((isset($_POST['name']) && !empty($_POST['name'])) && 

    (isset($_POST['email']) && !empty($_POST['email'])) && 

    (isset($_POST['message']) && !empty($_POST['message']))) {

            $email_exp = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i"; 

        if(preg_match($email_exp,$email)) {

        // Send Email

        $to = ' ';

        $subject = ' '; 

        $message = " $comment ";

        $headers = "From: " . $email . "\r\n";

        'Reply-To: noreply@ localhost' . "\r\n" .

        'X-Mailer: PHP/' . phpversion();

        mail($to, $subject, $message, $headers);        

        $lang['status'] = 'success';

        $lang['message'] = $lang['sendmail'];

        $lang['message'];

        } else {

        $lang['status'] = 'error';

        $lang['message'] = $lang['errormail'];

        $lang['message'];

        }

    } else {        

     $lang['error'] = 'error';

     $lang['message'] = $lang['errorform'];

     $lang['message'];  

    }

//send the response back

echo json_encode($lang);

?>

Maybe something like this?

    jQuery.ajax({  
        type: "POST",
            url: "email.php",  
            data: jQuery("#contactform").serialize(),  
            dataType: "json",  
            success: function(msg){
                if (msg == success) {
                    jQuery("#load").fadeIn();
                    jQuery("#contactform").hide();
                    jQuery("#result").removeClass('error');  
                    jQuery("#result").addClass('success');  
                    jQuery("#result").addClass(msg.status);  
                    jQuery("#result").html(msg.message);  
                } else {
                    jQuery("#load").fadeIn();
                    jQuery("#contactform").show();
                    jQuery("#result").removeClass('error');  
                    jQuery("#result").addClass('success');  
                    jQuery("#result").addClass(msg.status);  
                    jQuery("#result").html(msg.message);
                }
            }
)};

---

Hi, thank you for your reply. I just solved my problem for myself!

It works, but I'm sure that my code might be improved. Please let me know if you see any mistake or if you have advices to give me. Thank you!

jQuery(document).ready(function(){  
    jQuery("#contactform").submit(function(){ 
        jQuery(this).fadeOut();
        jQuery("#load").fadeIn();

        jQuery.ajax({  
            type: "POST",
                url: "email.php",  
                data: jQuery("#contactform").serialize(),  
                dataType: "json",
                success: function(msg){
           开发者_StackOverflow中文版     if (msg.status == 'success') {
                    jQuery("#load").hide();
                        jQuery("#result").removeClass('error');  
                    jQuery("#result").addClass('success');  
                    jQuery("#result").addClass(msg.status);  
                    jQuery("#result").html(msg.message); 
                } else {
                        jQuery("#load").hide();
                    jQuery("#contactform").fadeIn();
                        jQuery("#result").removeClass('success');  
                    jQuery("#result").addClass('error');  
                    jQuery("#result").addClass(msg.status);  
                    jQuery("#result").html(msg.message); 
                }   
                },  
                error: function(){  
                jQuery("#result").removeClass('success');  
                jQuery("#result").addClass('error');  
                jQuery("#result").html("There was an error submitting the form. Please try again.");  
            }  
        });  
    return false;  
    });     
});

---

I would imagine that you could call a jQuery getJSON() call. This might work, though you'll probably have to update your version of jQuery if you're still using the jQuery(selector) nomenclature.

$(document).ready(function(){
  $.getJSON('email.php', $('#contactform').serialize(), function(data){
    // This part completely depends on the format of your returned data.
    // I personally would return error codes.
    // Maybe something like this.
    if(data.status==='error'){
      $('#contactform').hide();
      setTimeout(function(){$('#contactform').show()}, 1000);
    }else if(data.status==='success'){
      $('#contactform').hide();
    }
  });
});