Display success message upon form submit
<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>