Not reloading page after php form submit

Posted on 16th Feb 2014 by admin

Hello helpful souls out there. You guys have come through for me in the recent past and I'm hoping someone out there can either help me or point me in the right direction.

I have the following site, www.chrismdesign.com/test/index.php. I am waiting to launch the site until I get a few more bugs fixed. The problem I am facing is that the site is all contained on one page and each section is hidden in an accordion type thing. When a visitor opens the contact section and decides to send me an email through my contact form there is a small problem. When the user clicks submit, the page reloads, therefore sending the page back to the default open accordion section (which isn't the contact section). So, when the the form dsplays the success or error message, the user might not even see it unless they reopen the contact accordion section.

My question to you all is... Can I control my form to where the page doesn't reload when the form is submitted? That was the same accordion section will remain open and not risk the chance of confusing my viewers. I dont really have any code to post, you can find it on my site. I guess I can post my php form.

<?php
if (isset($_POST['Name'])){
$emailTo = 'cm@chrismdesign.com';
$emailName = $_POST['Name'];
$emailFrom = $_POST['Email'];
$emailSubject = $_POST['Subject'];
$emailMessage = "---- Message ----n" . $_POST['Message'];
$emailMessage .= "nnn---- Sender's Name ----n" . $_POST['Name'];
$emailMessage .= "nn---- Email Address ----n" . $_POST['Email'];
$emailMessage .= "nn---- Survey Answer ----n" . $_POST['Survey'];


if (!preg_match('/^([A-Z0-9.-_]+)@([A-Z0-9.-_]+)?([.]{1})([A-Z]{2,6})$/i', $emailFrom) || empty($emailFrom)) {
print '<div class="email-err"><h3>Error!</h3><p class="err">Please enter a valid email address.</p></div>';
} elseif (empty($emailName)) {
echo '<div class="email-err"><h3>Error!</h3><p class="err">Please enter your name.</p></div>';
} elseif (empty($emailSubject)) {
echo '<div class="email-err"><h3>Error!</h3><p class="err">Please enter a subject.</p></div>';
} elseif (empty($_POST['Message'])) {
echo '<div class="email-err"><h3>Error!</h3><p class="err">Please enter a message.</p></div>';
} else {
if (!empty($emailFrom)) {
$emailHeaders = 'FROM: <cm@chrismdesign.com>';
}

/* Send Email */
if (mail($emailTo, $emailSubject, $emailMessage, $emailHeaders)) {
echo '<div class="email-suc"><h4>Thanks!</h4><p class="err">Your message has been sent!</p></div>';
} else {
echo '<div class="email-err"><h3>Error</h3><p class="err">There was an internal error while sending your email.</p><p>Please try again.</p></div>';
}
}
}
?>

<div id="form-area">
<form method="post" action="index.php">
<h1>Send Me An Email</h1>
<p>Name:<br />
<input type="text" name="Name"></p>
<p>Email Address:<br />
<input type="text" name="Email"></p>
<p>Subject:<br />
<input type="text" name="Subject"></p>
<p>How did you find my site? <em>(optional)</em><br />
<textarea name="Survey" cols="30" rows="2"></textarea></p>
<p>Message:<br />
<textarea name="Message" cols="30" rows="5"></textarea></p>
<p><input id="button" type="submit" name="submit" value="Send Email"></p>
</form>
</div><!-- End div#form-area -->