I have this form on my site. The form sends the data but does not reset the form properly. It clears the values in the form, but it does not reset the "submit" button so the button remains in the "loading..." pressed state.
I have double checked the code and references and the calls for the php and js validation files and they are the same.
This is the HTML markup
<div class="contact-form">
<form id="ortho-form" role="form">
<div class="form-group has-feedback">
<label for="name">Patient Name*</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Patient's Full Name">
<i class="fa fa-user form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label for="dob">Date of Birth</label>
<input type="text" class="form-control" id="dob" name="dob" placeholder="dd/mm/yyyy">
<i class="fa fa-birthday-cake form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" name="address" placeholder="Patient's Address">
<i class="fa fa-home form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label for="pcontact">Contact Number</label>
<input type="text" class="form-control" id="pcontact" name="pcontact" placeholder="xxxxxxxxxx">
<i class="fa fa-phone form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label for="mhx">Relevant Medical History</label>
<textarea class="form-control" rows="6" id="mhx" name="mhx" placeholder=""></textarea>
<i class="fa fa-medkit form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label for="RFR">Reason for Referral</label>
<textarea class="form-control" rows="6" id="RFR" name="RFR" placeholder="e.g. Open bite, Deep bite, Cross bite"></textarea>
<i class="fa fa-medkit form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label for="addc">Additional Comments</label>
<textarea class="form-control" rows="6" id="addc" name="addc" placeholder=""></textarea>
<i class="fa fa-pencil form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label for="refdr">Referring Person*</label>
<input type="text" class="form-control" id="refdr" name="refdr" placeholder="Dentist Name">
<i class="fa fa-user-md form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label for="dcontact">Contact Number*</label>
<input type="text" class="form-control" id="dcontact" name="dcontact" placeholder="xxxxxxxxxx">
<i class="fa fa-phone form-control-feedback"></i>
</div>
<div class="form-group has-feedback">
<label for="refemail">Email*</label>
<input type="text" class="form-control" id="refemail" name="refemail" placeholder="person@surgery.com">
<i class="fa fa-envelope form-control-feedback"></i>
</div>
<input type="submit" value="Submit" class="btn btn-default btn-lg margin-clear">
</form>
This is the php markup
<?php
session_cache_limiter('nocache');
header('Expires: ' . gmdate('r', 0));
header('Content-type: application/json');
// Enter your email address below.
$to = 'email@email.com';
$subject = 'Advantage Access Request';
if($to) {
$name = $_POST['name'];
$email = $_POST['email'];
$fields = array(
0 => array(
'text' => 'Name',
'val' => $_POST['name']
),
1 => array(
'text' => 'Email address',
'val' => $_POST['email']
),
2 => array(
'text' => 'Contact Number',
'val' => $_POST['phone']
),
3 => array(
'text' => 'Subject',
'val' => $_POST['subject']
),
4 => array(
'text' => 'Message',
'val' => $_POST['message']
)
);
$message = "";
foreach($fields as $field) {
$message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br><br>\n";
}
$headers = '';
$headers .= 'From: ' . $name . '<' . $email . '>' . "\r\n";
$headers .= "Reply-To: " . $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
if (mail($to, $subject, $message, $headers)){
$arrResult = array ('response'=>'success');
} else{
$arrResult = array ('response'=>'error');
}
echo json_encode($arrResult);
} else {
$arrResult = array ('response'=>'error');
echo json_encode($arrResult);
}
?>
This is the validation script
/* Contact Forms
*/
if($("#ortho-form").length>0) {
$("#ortho-form").validate({
submitHandler: function(form) {
var submitButton = $(this.submitButton);
submitButton.button("loading");
$.ajax({
type: "POST",
url: "ortho-form.php",
data: {
"name": $("#ortho-form #name").val(),
"dob": $("#ortho-form #dob").val(),
"address": $("#ortho-form #address").val(),
"pcontact": $("#ortho-form #pcontact").val(),
"mhx": $("#ortho-form #mhx").val(),
"RFR": $("#ortho-form #RFR").val(),
"addc": $("#ortho-form #addc").val(),
"refdr": $("#ortho-form #refdr").val(),
"dcontact": $("#ortho-form #dcontact").val(),
"refemail": $("#ortho-form #refemail").val()
},
dataType: "json",
success: function (data) {
if (data.response == "success") {
$("#contactSuccess").removeClass("hidden");
$("#contactError").addClass("hidden");
// Reset Form
$("#ortho-form .form-control")
.val("")
.blur()
.parent()
.removeClass("has-success")
.removeClass("has-error")
.find("label")
.removeClass("hide")
.parent()
.find("span.error")
.remove();
if(($("#contactSuccess").position().top - 80) < $(window).scrollTop()){
$("html, body").animate({
scrollTop: $("#contactSuccess").offset().top - 80
}, 300);
}
} else {
$("#contactError").removeClass("hidden");
$("#contactSuccess").addClass("hidden");
if(($("#contactError").position().top - 80) < $(window).scrollTop()){
$("html, body").animate({
scrollTop: $("#contactError").offset().top - 80
}, 300);
}
}
},
complete: function () {
submitButton.button("reset");
}
});
},
// debug: true,
errorPlacement: function(error, element) {
error.insertBefore( element );
},
onkeyup: false,
onclick: false,
rules: {
name: {
required: true,
minlength: 2
},
refemail: {
required: true,
email: true
},
refdr: {
required: true
},
dcontact: {
required: true,
minlength: 8
}
},
messages: {
name: {
required: "Please specify patient name",
minlength: "Your name must be longer than 2 characters"
},
refemail: {
required: "We need your email address to contact you",
email: "Please enter a valid email address e.g. name@domain.com"
},
refdr: {
required: "Please provide your name so we can contact you"
},
dcontact: {
required: "Please enter a correct number",
minlength: "Your message must be longer than 10 characters"
}
},
errorElement: "span",
highlight: function (element) {
$(element).parent().removeClass("has-success").addClass("has-error");
$(element).siblings("label").addClass("hide");
},
success: function (element) {
$(element).parent().removeClass("has-error").addClass("has-success");
$(element).siblings("label").removeClass("hide");
}
});
};
// End Ortho Form
I cannot figure out why it sends but does not reset the button. If someone could help me figure it out, I would be most appreciative.