如何将按钮替换为加载gif图像当单击提交按钮,然后在成功删除表单上,并替换为成功消息时
How to replace button with loading gif image when the submit button is clicked then on success remove form and replace with a success message
我有一个html表单,并使用以下代码来处理它和验证输入字段。
sendmail.php:
if($_POST) {
// Enter the email where you want to receive the message
$emailTo = 'example@gmail.com';
// 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 <boss@gmail.co.za>' . "'r'n";
// Send mail
mail($emailTo, $subject, $sendMessage, $headers);
} else {
//echo the error messages
echo json_encode($array);
}
} else {
header ('location: index.html#contact');
}
?>
scripts.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图像,如果电子邮件发送成功,我想删除表单并替换为成功消息。如果表单不是出于任何原因,我希望表单的say按钮恢复到它的初始状态。我该怎么做?
修改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有很多方法可以实现这一点。以下是一些类似问题的参考链接
使用jquery 将提交按钮更改为加载图像
用加载gif 替换提交按钮
http://www.willmaster.com/library/manage-forms/replacing-submit-button-with-loading-image.php
function LoadData(){
$("#loading-image").show();
$.ajax({
url: yourURL,
cache: false,
success: function(html){
$("Your div id").append(html);
},
complete: function(){
$("#loading-image").hide();
}
});
}
<div id="loading-image"><img src="give your gif umage path"/></div>
如果按钮使用<button>
标记,则可以设置其.innerHTML
。
$('.contact-form form').submit(function(e) {
// ...
button.innerHTML = "<img src='' />";
$.ajax({
// ...
button.innerHTML = "Click me"; // reset to original content
});
});
或者,您可以将其替换为css和display:block;
/display:none
。有很多方法可以实际处理显示和隐藏加载图标,但这应该让您开始。
您可以通过这个轻松做到这一点
$('#gif_image').show();
$.ajax({
url: uri,
success: function(){
$('#message').html('<div id="alertFadeOut">Record has been added!</div>'); // Diplay message with a fadeout
$('#alertFadeOut').fadeOut(1000, function () {
$('#alertFadeOut').text('');
});
},
complete: function(){
$('#gif_image').hide();
}
});
<div id="gif_image"><img src="path/tp/image"></div>
<div id="message"></div>
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 我如何找到一个句子中的所有空格并替换忽略它们
- 尽管链接成功并已成功下载,但未找到NPM模块
- 如何用更合适的内容替换document.write
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 在DOM中查找一个模式并替换它's的内容使用jquery
- 用空格替换下划线PHP
- str.split(someString).join(someOtherString)是否等效于替换
- 在另一个函数成功结束后调用该函数
- 在ajax成功后,cluetip不适用于首次点击活动元素
- 使用javascript的图像替换循环
- AJAX/JS/PHP:如何替换发送到PHP文件的文件中的文本,并传递成功属性
- 在表单提交将DOM的一部分替换为分部之后,我应该将ajax成功绑定到什么来使我的javascript工作
- 为什么我'我无法替换AJAX成功响应中的HTML内容
- 将ajax错误和成功函数替换为传递给父函数的替代函数
- 在提交后用成功消息替换HTML表单,表单使用单独的php文件发送邮件
- 在成功加载和错误处理后替换AJAX
- Javascript Ajax成功图像替换
- 试图替换(),但没有成功
- 如何将按钮替换为加载gif图像当单击提交按钮,然后在成功删除表单上,并替换为成功消息时