Hi I have a contact form using PHP AJAX but filling the form, it is successful but when I try to fillup again the form it is not submitting unless I refresh the page, it will go back to normal again. What will be the problem of this?
Thanks
HTML Code
<form role="form" id="feedbackForm" method="POST">
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="textinput">First Name<span class="required">*</span></label>
<input type="text" class="form-control required" id="first_name" name="first_name" placeholder="Enter your First Name"/>
<span class="help-block" style="display: none;">Please enter your first name.</span>
</div>
<div class="form-group">
<label class="control-label" for="textinput">Last Name<span class="required">*</span></label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Enter your Last Name"/>
<span class="help-block" style="display: none;">Please enter your last name.</span>
</div>
<div class="form-group">
<label class="control-label" for="textinput">Email Address<span class="required">*</span></label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email address"/>
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
</div>
<div id="companyname_con" class="form-group">
<label class="control-label" for="textinput">Company Name</label>
<input type="text" class="form-control" id="company_name" name="company_name" placeholder="Enter your company name">
</div>
<div class="form-group">
<label class="control-label" for="textinput">Message<span class="required">*</span></label>
<textarea rows="10" cols="100" class="form-control" id="contact_message" name="contact_message" placeholder="Enter your message"></textarea>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="selectbasic">How did you hear about us?</label>
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="None">Select</option>
<option value="Search Engine">Search engine</option>
<option value="Microsoft DPE">Microsoft DPE</option>
<option value="Microsoft Event">Microsoft event</option>
<option value="Social Media">Social media</option>
<option value="Word of Mouth">Word of mouth</option>
<option value="Other">Other</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="emailUpdates" name="emailUpdates" value="Yes"> Please keep me informed of kinectAPI product updates and news
</label>
</div>
<img id="captcha" src="library/vender/securimage/securimage_show.php" alt="CAPTCHA Image" />
<a href="#" onclick="document.getElementById('captcha').src = 'library/vender/securimage/securimage_show.php?' + Math.random(); return false" class="btn btn-green btn-sm">Show a Different Image</a><br/>
<div class="form-group" style="margin-top: 10px;">
<input type="text" class="form-control" name="captcha_code" id="captcha_code" placeholder="For security, please enter the code displayed in the box." />
<span class="help-block" style="display: none;">Please enter the code displayed within the image.</span>
</div>
<span class="help-block" style="display: none;">Please enter a the security code.</span>
<button type="submit" id="feedbackSubmit" class="btn btn-purple btn-md message-btn">Submit Message</button>
</div>
</form>
PHP Code
<?php
//start a session -- needed for Securimage Captcha check
session_start();
//add you e-mail address here
define("MY_EMAIL", "dummy@email.com");
/**
* Sets error header and json error message response.
*
* @param String $messsage error message of response
* @return void
*/
function errorResponse ($contact_message) {
header('HTTP/1.1 500 Internal Server Error');
die(json_encode(array('message' => $contact_message)));
}
/**
* Return a formatted message body of the form:
* Name: <name of submitter>
* Comment: <message/comment submitted by user>
*
* @param String $name name of submitter
* @param String $messsage message/comment submitted
*/
function setMessageBody ($first_name, $last_name, $email, $company_name,
$contact_message, $selectbasic) {
$message_body .= "First Name: " . $first_name."
";
$message_body .= "Last Name: " . $last_name."
";
$message_body .= "Email: " . $email."
";
$message_body .= "Company Name:" . $company_name."
";
$message_body .= "Message:" . $contact_message. "
";
$message_body .= "How did you hear about us?" . $selectbasic."
";
return $message_body;
}
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
$company_name = $_POST['company_name'];
$contact_message = $_POST['contact_message'];
$selectbasic = $_POST['selectbasic'];
header('Content-type: application/json');
//do some simple validation. this should have been validated on the client-side also
if (empty($email) || empty($contact_message)) {
errorResponse('Email or message is empty.');
}
//do Captcha check, make sure the submitter is not a robot:)...
include_once './vender/securimage/securimage.php';
$securimage = new Securimage();
if (!$securimage->check($_POST['captcha_code'])) {
errorResponse('Invalid Security Code');
}
//try to send the message
if(mail(MY_EMAIL, "Contact Form Results", setMessageBody($_POST["first_name"],
$_POST["last_name"], $_POST["email"], $_POST["company_name"], $_POST["contact_message"],
$_POST["selectbasic"]), "From: $email")) {
echo json_encode(array('message' => 'Your message was successfully sent'));
} else {
header('HTTP/1.1 500 Internal Server Error');
echo json_encode(array('message' => 'Unexpected error while attempting to send e-
mail.'));
}
?>
JS code
$(document).ready(function() {
$("#feedbackSubmit").click(function() {
//clear any errors
contactForm.clearErrors();
//do a little client-side validation -- check that each field has a value and e-mail field is in proper format
var hasErrors = false;
$('#feedbackForm input,textarea').each(function() {
if (!$(this).val()) {
hasErrors = true;
contactForm.addError($(this));
}
});
var $email = $('#email');
if (!contactForm.isValidEmail($email.val())) {
hasErrors = true;
contactForm.addError($email);
}
//if there are any errors return without sending e-mail
if (hasErrors) {
return false;
}
//mailchimp trigger
if($('#emailUpdates').prop('checked')) {
$.ajax({
type: "POST",
url: 'subscribe.php',
data: 'ajax=true&email=' + escape($('#email').val())
});
}
//send the feedback e-mail
$.ajax({
type: "POST",
url: "library/sendmail.php",
data: $("#feedbackForm").serialize(),
success: function(data)
{
contactForm.addAjaxMessage(data.message, false);
//get new Captcha on success
$('#captcha').attr('src', 'library/vender/securimage/securimage_show.php?' +
Math.random());
},
error: function(response)
{
contactForm.addAjaxMessage(response.responseJSON.message, true);
}
});
$('#feedbackForm input,textarea,select').val('');
return false;
});
});
//namespace as not to pollute global namespace
var contactForm = {
isValidEmail: function (email) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
},
clearErrors: function () {
$('#emailAlert').remove();
$('#feedbackForm .help-block').hide();
$('#feedbackForm .form-group').removeClass('has-error');
},
addError: function ($input) {
$input.siblings('.help-block').show();
$input.parent('.form-group').addClass('has-error');
},
addAjaxMessage: function(msg, isError) {
$("#feedbackSubmit").after('<div id="emailAlert" class="alert alert-' + (isError ?
'danger' : 'success') + '" style="margin-top: 5px;">' + $('<div/>').text(msg).html() +
'</div>');
}
};
