title: Can't explain 400 bad request error from php/ajax form
body: <p>I always get an unexplained 400 error when submitting an email through my form and i cannot understand why this is.</p>
  
  <p>This worked on my local server, but when i uploaded it on the live <a href="http://kindredbay.co.uk" rel="nofollow">website</a></p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;form method="post" id="ajax-contact" class="clearfix" action="js/mailer.php"&gt;
      &lt;input class="sb-search-input" placeholder="I want your freebies!" type="email" id="email" name="name" &gt;
      &lt;input class="sb-search-submit" type="submit"&gt;
      &lt;button class="formbutton" type="submit"&gt;
          &lt;span class="fa fa-check"&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is my AJAX</p>
  
  <pre><code>$(function() {
  
  // Get the form.
  var form = $('#ajax-contact');
  
  // Get the messages div.
  var formMessages = $('#form-messages');
  
  // Set up an event listener for the contact form.
  $(form).submit(function(e) {
      // Stop the browser from submitting the form.
      e.preventDefault();
  
      // Serialize the form data.
      var formData = $(form).serialize();
  
      // Submit the form using AJAX.
      $.ajax({
          type: 'POST',
          url: $(form).attr('action'),
          data: formData
      })
      .done(function(response) {
          // Make sure that the formMessages div has the 'success' class.
          $(formMessages).removeClass('error');
          $(formMessages).addClass('success');
  
          // Set the message text.
          $(formMessages).text(response);
  
          // Clear the form.
          $('#email').val('');
  
      })
      .fail(function(data) {
          // Make sure that the formMessages div has the 'error' class.
          $(formMessages).removeClass('success');
          $(formMessages).addClass('error');
  
          // Set the message text.
          if (data.responseText !== '') {
              $(formMessages).text(data.responseText);
          } else {
              $(formMessages).text('Oops! An error occured and your message could not be sent.');
          }
      });
  
  });
  
  });
  </code></pre>
  
  <p>Here is my PHP</p>
  
  <pre><code>&lt;?php
  
  // Only process POST reqeusts.
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
      // Get the form fields and remove whitespace.
      $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
  
      echo "$email";
  
      // Check that data was sent to the mailer.
      if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
          // Set a 400 (bad request) response code and exit.
          http_response_code(400);
          echo "Oops! There was a problem with your submission. Please complete the form and try again.";
          exit;
      }
  
      // Set the recipient email address.
      $recipient = "ahamdan@kindredbay.co.uk, aemmadi@kindredbay.co.uk";
  
      // Set the email subject.
      $subject = "New enquiry from $email";
  
      // Build the email content.
      $email_content .= "Email: $email\n\n";
  
  
      // Build the email headers.
      $email_headers = "From: $email &lt;$email&gt;";
  
      // Send the email.
      if (mail($recipient, $subject, $email_content, $email_headers)) {
          // Set a 200 (okay) response code.
          http_response_code(200);
          echo "Thank You! Your message has been sent.";
      } else {
          // Set a 500 (internal server error) response code.
          http_response_code(500);
          echo "Oops! Something went wrong and we couldn't send your message.";
      }
  
  } else {
      // Not a POST request, set a 403 (forbidden) response code.
      http_response_code(403);
      echo "There was a problem with your submission, please try again.";
  }
  
  ?&gt;
  </code></pre>