title: Submit form in React.js using Ajax
body: <p>Creating my first application in React.js and want to submit contact form to a email with Ajax. I've used this solution as guideline: <a href="https://liusashmily.wordpress.com/author/liusashmily/" rel="noreferrer">https://liusashmily.wordpress.com/author/liusashmily/</a> but the full component file is not available, only parts and I cant reach the author. </p>
  
  <h2>Contact component</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Create Component
  class Contact extends React.Component {
      constructor(props){
          super(props);
          this.state = {
              contactEmail: '',
              contactMessage: ''
          };
  
          this.handleSubmit = this.handleSubmit.bind(this);
          this.handleChange = this.handleChange.bind(this);
          this.handleChangeMsg = this.handleChangeMsg.bind(this);
      }
  
      handleChange(event) {
          this.setState({
              contactEmail: event.target.value,
          });
      }
  
      handleChangeMsg(event) {
          this.setState({
              contactMessage: event.target.value
          });
      }
  
      handleSubmit(event) {
  
          event.preventDefault();
          this.setState({
              type: 'info',
              message: 'Sending…'
          });
  
          $.ajax({
  
              url: 'php/mailer.php',
              type: 'POST',
              data: {
                  'form_email': this.state.contactEmail,
                  'form_msg': this.state.contactMessage
              },
              cache: false,
              success: function(data) {
                  // Success..
                  this.setState({
                      type: 'success',
                      message: 'We have received your message and will get in touch shortly. Thanks!'
                  });
              }.bind(this),
              error: function(xhr, status, err) {
                  this.setState({
                      type: 'danger',
                      message: 'Sorry, there has been an error.  Please try again later or visit us at SZB 438.'
                  });
              }.bind(this)
  
          });
      }
  
      render() {
          return (
              &lt;div className="contact"&gt;
                  &lt;form className="form" onSubmit={this.handleSubmit} id="formContact"&gt;
                      &lt;label&gt;Email&lt;/label&gt;
                      &lt;input id="formEmail" type="email" name="formEmail" value={this.state.contactEmail} onChange={this.handleChange} required /&gt;
                      &lt;label&gt;Meddelande&lt;/label&gt;
                      &lt;textarea id="formMsg" name="formMsg" rows="8" cols="40" value={this.state.contactMessage} onChange={this.handleChangeMsg} required&gt;&lt;/textarea&gt;
                      &lt;input type="submit" value="Submit" className="btn--cta" id="btn-submit" /&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <h2>My PHP file mailer.php</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;?php
  
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
      // $name = strip_tags(trim($_POST[“form_name”]));
      // $name = str_replace(array(“\r”,”\n”),array(” “,” “),$name);
      $email = filter_var(trim($_POST["formEmail"]), FILTER_SANITIZE_EMAIL);
      $message = trim($_POST["formMsg"]);
  
      // Check that data was sent to the mailer.
      if ( empty($message) OR !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 = "mimilundberg@icloud.com";
  
      // Set the email subject.
      $subject = "New message from $email Via React Site";
  
      // Build the email content.
      $email_content .= "Email: $email\n\n";
      $email_content .= "Message: \n$message\n";
  
      // Build the email headers.
      $email_headers = "From: &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>
  </div>
  </div>
  </p>
  
  <p>Getting following error in console log:</p>
  
  <p>POST <a href="http://localhost:8080/php/mailer.php" rel="noreferrer">http://localhost:8080/php/mailer.php</a> 404 (Not Found)  </p>
  
  <p>..and it says that error is in the "jquery-3.2.1.min.js:4" file. </p>
  
  <p>I'm including jQuery script in html doc:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!Doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;!-- &lt;link rel="stylesheet" href="dist/styles.css"&gt; --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;script src="dist/bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So incredibly grateful for any input!</p>