title: Display success message upon form submit
body: <p>I would like to display a success message on the same page, instead of redirecting the user to the .php file. </p>
  
  <p><strong>I would prefer not to over complicate by using AJAX &amp; jQuery and I would like to keep the PHP file seperate from my form's HTML file.</strong> </p>
  
  <p>Is it possible to use a small amount of Javascript for this? </p>
  
  <p>Here is my code;</p>
  
  <p>HTML Form</p>
  
  <pre><code>&lt;div id="viewing-container"&gt;
      &lt;div id="viewing-header"&gt;
          &lt;h3 class="form-header"&gt;Request a Viewing&lt;/h3&gt;&lt;button type="button" id="close" class="button-primary close-form" onclick="openClose()"&gt;&amp;#735;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="viewing-content"&gt;
          &lt;div id="success"&gt;
              &lt;p class="form"&gt;Thank you for contacting us. We will be in touch soon.&lt;/p&gt;
          &lt;/div&gt;
          &lt;p class="form"&gt;Please text or call Alex on &lt;a href=""&gt;0123456789&lt;/a&gt; for fastest response or enter your contact details below and we will call you back as soon as we can.&lt;/p&gt;
          &lt;form action="" method="post" autocomplete="on"&gt;
              &lt;label for="name"&gt;Name &lt;i&gt;&amp;#42;&lt;/i&gt;&lt;/label&gt;&lt;input type="text" name="name" autofocus required&gt;&lt;br /&gt;
              &lt;label for="number"&gt;Contact Number &lt;i&gt;&amp;#42;&lt;/i&gt;&lt;/label&gt;&lt;input type="tel" name="number" required&gt;&lt;br /&gt;
              &lt;label for="message"&gt;Message &lt;i&gt;&amp;#42;&lt;/i&gt;&lt;/label&gt;&lt;textarea type="textarea" name="message" rows="5" required&gt;Please call me to arrange a viewing of one of your properties.&lt;/textarea&gt;&lt;br /&gt;
              &lt;div class="g-recaptcha" data-sitekey="###"&gt;&lt;/div&gt;
                      &lt;br /&gt;
              &lt;button type="submit" name="contactSubmit" id="contactSubmit" class="button-primary"&gt;Send&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>PHP submit code</p>
  
  <pre><code>$name = $number = $message = "";
  
  if(isset($_POST['contactSubmit'])){
      $name = $_POST["name"];
      $number = $_POST["number"];
      $message = $_POST["message"];
  
  
      $msg = "Name: " . $name . "\n" . "Number: " . $number "\n" . "Message:" . $message;
      $msg = wordwrap($msg,70);
  
      $subject = "Viewing Request";
  
      mail("me@mysite.co.uk", $subject, $msg)
      header("Location: /index.htm");
  }
  
  exit;
  </code></pre>
  
  <p>I have tried using an onclick() Javascript function to display the success , but the form redirects to the PHP file before the Javascript function can be displayed. The only thing I have been able to get to work is a javascript alert function, but this is not very attractive or user friendly. I would like to display the success message and run the external php file without reloading the HTML page. </p>
  
  <p>Please help!! I'm not extremely proficient in PHP or Javascript :( 
  Thanks in advance.</p>