title: How to hide a email form when it gets response from JSON
body: <p>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 <code>json_encode()</code>. 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.</p>
  
  <p>Can someone help me please? I don't understand where I made a mistake. Thank you.</p>
  
  <p>p.s. Sorry for my English, it's a bit rusty.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>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;  
  });  });    
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>&lt;?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']) &amp;&amp; !empty($_POST['name'])) &amp;&amp; 
  
      (isset($_POST['email']) &amp;&amp; !empty($_POST['email'])) &amp;&amp; 
  
      (isset($_POST['message']) &amp;&amp; !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);
  
  ?&gt;
  </code></pre>
  
  <p>Maybe something like this?</p>
  
  <pre><code>    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);
                  }
              }
  )};
  </code></pre>
  
  <hr>
  
  <p>Hi, thank you for your reply. I just solved my problem for myself!</p>
  
  <p>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!</p>
  
  <pre><code>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){
                  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;  
      });     
  });
  </code></pre>