title: Php form ajax "success & fail" message
body: <p>The form on my website is a simple contact form.
  I would like the form to show a "success &amp; failed" message on the same page when the form is sent/failed without reloading the page. I understand that I should use Ajax to do this but I can't get it to work because my knowledge about it is very little.</p>
  
  <p>Here is the code I'm working with.</p>
  
  <p>Html (single page design):</p>
  
  <pre><code>    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"&gt;&lt;/script&gt;
  
  &lt;form class="form" id="contactus" action="" method="post" accept-charset="UTF-8"&gt;
  
  
  
  
                          &lt;label for="nametag"&gt;Namn&lt;FONT COLOR="#FF0060"&gt;*&lt;/FONT&gt;&lt;/label&gt;
  
                          &lt;input name="name" type="text" id="name"  value="" /&gt;
  
  
  
  
                          &lt;label for="emailtag"&gt;Email&lt;FONT COLOR="#FF0060"&gt;*&lt;/FONT&gt;&lt;/label&gt;
  
                          &lt;input name="email" type="text" id="email"  value="" /&gt;
  
  
                          &lt;label for="phonetag"&gt;Telefon&lt;/label&gt;
  
                          &lt;input name="phone" type="text" id="phone"  value="" /&gt;
  
  
                          &lt;label for="messagetag"&gt;Meddelande&lt;FONT COLOR="#FF0060"&gt;*&lt;/FONT&gt;&lt;/label&gt;&lt;/br&gt;
  
                          &lt;textarea name="message" id="message" style="width: 87%; height: 200px;"&gt;&lt;/textarea&gt;
  
  
  
  
  
  
  &lt;label class="placeholder"&gt;&amp;nbsp;&lt;/label&gt;
  
                          &lt;button class="submit" name="submit"&gt;Skicka&lt;/button&gt;
  
  
  
                  &lt;/form&gt; 
  
  
  
  &lt;script&gt;        
      $(function() {
              $('#contactus').submit(function (event) {
                  event.preventDefault();
                  event.returnValue = false;
                  $.ajax({
                      type: 'POST',
                      url: 'php/mail.php',
                      data: $('#contactus').serialize(),
                      success: function(res) {alert(res);
                          if (res == 'successful') {
                              $('#status').html('Sent').slideDown();
                          }
                          else {
                              $('#status').html('Failed').slideDown();
                          } 
                      },
                      error: function () {
                          $('#status').html('Failed').slideDown();
                      }
                  });
              });
          });
      &lt;/script&gt;   
  </code></pre>
  
  <p>Php:</p>
  
  <pre><code>&lt;?php
      $name = $_POST['name'];
      $email = $_POST['email'];
      $phone = $_POST['phone'];
      $message = $_POST['message'];
      $recipient = "info@mydomain.com";
      $subject = "Webbkontakt";
      $formcontent = "Från: $name &lt;br/&gt; Email: $email &lt;br/&gt; Telefon: $phone &lt;br/&gt; Meddelande: $message";
  
      $headers = "From: " ."CAMAXON&lt;info@mydomain.com&gt;" . "\r\n";
      $headers .= "Reply-To: ". "no-reply@mydomain.com" . "\r\n";
      $headers .= "MIME-Version: 1.0\r\n";
      $headers .= "Content-Type: text/html; charset=utf-8\r\n";
  
      if(mail($recipient, $subject, $formcontent, $headers))
      {
          echo "successful";
      }
      else
      {
          echo "error";
      }
  ?&gt;
  </code></pre>