我的网站上有此表格。表单发送数据,但未正确重置表单。它将清除表单中的值,但不会重置“提交”按钮,因此该按钮保持在“正在加载...”状态。
我仔细检查了代码和引用以及php和js验证文件的调用,它们是相同的。
这是HTML标记
<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>
这是php标记
<?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);
}
?>
这是验证脚本
/* 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
我无法弄清楚为什么发送,但没有重置按钮。如果有人可以帮助我解决问题,我将不胜感激。