我有一个 html 表单,并使用以下代码来处理它并验证输入字段。
sendmail.php:
if($_POST) {
// Enter the email where you want to receive the message
$emailTo = '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a4b9a0acb1ada481a6aca0a8adefa2aeac" rel="noreferrer noopener nofollow">[email protected]</a>';
// Form fields
$clientName = addslashes(trim($_POST['name']));
$clientEmail = addslashes(trim($_POST['email']));
$number = addslashes(trim($_POST['number']));
$message = addslashes(trim($_POST['message']));
// Email Ssubject
$subject = 'Query from My Domain';
// Compose message to send
$sendMessage = 'Hi' . "\n\n";
$sendMessage .= $message . "\n\n";
$sendMessage .= 'From: ' . $clientName . "\n";
$sendMessage .= 'Email: ' . $clientEmail . "\n";
$sendMessage .= 'Contact number: ' . $number . "\n";
$array = array();
$array['nameMessage'] = '';
$array['emailMessage'] = '';
$array['numberMessage'] = '';
$array['messageMessage'] = '';
if($clientName == '') {
$array['nameMessage'] = 'Please enter your full name.';
}
if (filter_var($clientEmail, FILTER_VALIDATE_EMAIL) == false) {
$array['emailMessage'] = 'Please insert a valid email address.';
}
if (!preg_match('/^(\+?)+([0-9]{10,})$/', $number)) {
$array['numberMessage'] = 'Please enter a valid contact number.';
}
if($message == '') {
$array['messageMessage'] = 'Please enter your message.';
}
$isValid = empty($array['nameMessage']) && empty($array['emailMessage']) &&
empty($array['numberMessage']) && empty($array['messageMessage']);
if($isValid) {
// build headers and send mail
// Headers
$headers = "From: " . $clientName . ' <' . $clientEmail . '>' . "\r\n";
$headers .= "CC: " . 'My Boss <<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2fefecdeae0ece4e1a3eee2a3f7ec" rel="noreferrer noopener nofollow">[email protected]</a>>' . "\r\n";
// Send mail
mail($emailTo, $subject, $sendMessage, $headers);
} else {
//echo the error messages
echo json_encode($array);
}
} else {
header ('location: index.html#contact');
}
?>
脚本.js:
$('.contact-form form').submit(function(e) {
e.preventDefault();
var form = $(this);
var nameLabel = form.find('label[for="contact-name"]');
var emailLabel = form.find('label[for="contact-email"]');
var numberLabel = form.find('label[for="contact-number"]');
var messageLabel = form.find('label[for="contact-message"]');
nameLabel.html('Full name');
emailLabel.html('Email');
numberLabel.html('Contact number');
messageLabel.html('Message');
var postdata = form.serialize();
$.ajax({
type: 'POST',
url: 'sendmail.php',
data: postdata,
dataType: 'json',
success: function(json) {
if(json.nameMessage !== '') {
nameLabel.append(' - <span class="red error-label"> ' + json.nameMessage + '</span>');
}
if(json.emailMessage !== '') {
emailLabel.append(' - <span class="red error-label"> ' + json.emailMessage + '</span>');
}
if(json.numberMessage !== '') {
numberLabel.append(' - <span class="red error-label"> ' + json.numberMessage + '</span>');
}
if(json.messageMessage !== '') {
messageLabel.append(' - <span class="red error-label"> ' + json.messageMessage + '</span>');
}
}
});
});
表单工作得很好,我收到了电子邮件,我想做的就是向表单添加另外两个行为,当您单击提交按钮时,按钮内必须显示正在加载的 gif 图像,如果电子邮件发送成功,我想要删除表单并替换为成功消息。如果表单不是出于任何原因,我希望表单显示按钮以恢复到其初始状态。我该怎么做呢?
最佳答案
修改您的 script.js 代码,如下所示:
$('.contact-form form').submit(function(e) {
e.preventDefault();
$("#div-id").html('<img src="/images/loading.gif" />');
var form = $(this);
var nameLabel = form.find('label[for="contact-name"]');
var emailLabel = form.find('label[for="contact-email"]');
var numberLabel = form.find('label[for="contact-number"]');
var messageLabel = form.find('label[for="contact-message"]');
nameLabel.html('Full name');
emailLabel.html('Email');
numberLabel.html('Contact number');
messageLabel.html('Message');
var postdata = form.serialize();
$.ajax({
type: 'POST',
url: 'sendmail.php',
data: postdata,
dataType: 'json',
complete: function(){
$("#div-id").html('<input type="submit" name="submit" value="submit">');
},
success: function(json) {
if(json.nameMessage !== '') {
nameLabel.append(' - <span class="red error-label"> ' + json.nameMessage + '</span>');
}
if(json.emailMessage !== '') {
emailLabel.append(' - <span class="red error-label"> ' + json.emailMessage + '</span>');
}
if(json.numberMessage !== '') {
numberLabel.append(' - <span class="red error-label"> ' + json.numberMessage + '</span>');
}
if(json.messageMessage !== '') {
messageLabel.append(' - <span class="red error-label"> ' + json.messageMessage + '</span>');
}
}
});
});
其中 div-id 是 HTML 模板中设置按钮的 div 元素的 id。
仅供您引用,有很多方法可以使用 jQuery 实现此目的。下面是一些引用文献。类似问题的链接
Change submit button to a loading image with jquery
Replace submit button with loading gif
http://www.willmaster.com/library/manage-forms/replacing-submit-button-with-loading-image.php
关于javascript - 如何在单击提交按钮时将按钮替换为加载 gif 图像,然后成功删除表单并替换为成功消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38501412/