I'm trying to work out how to prevent my form from redirecting upon submission. I have it to where it successfully sends emails, but it redirects to /cvg2/contact-submit.php upon submission. I don't want it to do that. I want it to inject the success/failure message into the "messages" div that is found at the bottom of the form.
Any help?
index.php
<form id="contact-form" method="post" action="/cvg2/contact-submit.php" role="form">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<input name="name" id="name" placeholder="Name" data-validation="alphanumeric" required="required"></input>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<input name="practice" id="practice" placeholder="Practice name"></input>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<input name="city-state" id="city-state" placeholder="City, State" required="required" data-validation="alphanumeric"></input>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="styled-select">
<select name="position-select">
<option value="administrative">Administrative</option>
<option value="physician-shareholder">Physician Shareholder</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-12 two-up">
<input name="phone" id="phone" placeholder="(555)555-5555" required="required" data-validation="custom" data-validation-regexp="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$" data-validation-error-msg="Invalid Phone Number"></input>
</div>
<div class="col-md-6 col-xs-12 col-sm-12 two-up">
<input name="email" id="email" placeholder="Email" data-validation="email" required="required"></input>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12">
<input type="submit" value="SUBMIT" id="submit">
</div>
</div>
<div class="messages"></div>
</form>
contact-submit.php
<?php
// an email address that will be in the From field of the email.
$from = 'email@domain.com';
// an email address that will receive the email with the output of the form
$sendTo = 'contact@domain.com';
// subject of the email
$subject = 'New Message Received';
// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'phone' => 'Phone', 'email' => 'Email', 'city-state' => 'Location', 'practice' => 'Practice', 'position-select' => 'Position');
// message that will be displayed when everything is OK :)
$okMessage = 'Contact form successfully submitted!';
// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later.';
/*
* LET'S DO THE SENDING
*/
// if you are not debugging and don't need error reporting, turn this off by error_reporting(0);
error_reporting(0);
try
{
if(count($_POST) == 0) throw new \Exception('Form is empty');
$emailText = "You have a new message from your contact form\n=============================\n";
foreach ($_POST as $key => $value) {
// If the field exists in the $fields array, include it in the email
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
// All the neccessary headers for the email.
$headers = array('Content-Type: text/plain; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);
// Send email
mail($sendTo, $subject, $emailText, implode("\n", $headers));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
// else just display the message
else {
echo $responseArray['message'];
}
?>
scripts.js
//Form validation
$.validate({
validateOnBlur : true,
showHelpOnFocus : false
});
// when the form is submitted
$.on('submit', function (e) {
// if the validator does not prevent form submit
if (!e.isDefaultPrevented()) {
var url = "../cvg2/contact-submit.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
// data = JSON object that contact-submit.php returns
data: $(this).serialize(),
success: function (data)
{
// receive the type of the message: success x danger and apply it
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// Alert box html
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable">' + messageText + '</div>';
// If have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contact-form').find('.messages').html(alertBox);
// empty the form
$('#contact-form')[0].reset();
}
}
});
return false;
}
});
