这是我的剧本:
<div id ="success-message">
</div>
<script>
$('form.subscribe').on('submit', function() {
var that = $(this),
url = that.attr('action'),
method = that.attr('method'),
data ={};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type:method,
data: data,
success: function(response){
$('#success-message').html(response)
}
});
return false;
});
setTimeout(function() {
$('#success-message').fadeOut('slow');
}, 2000); // <-- time in milliseconds
</script>
我有一个ajax函数,它根据您在表单上的输入提供错误消息或成功消息。
我得到的消息来自这个PHP脚本:
<?php
header("Refresh:7; url=contact.php");
$email = $_POST['subscribefield'];
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Dit emailadres klopt niet";
die();
}
$to = "flash1996mph@hotmail.com";
$subject = "Abonee voor de nieuwsbrief";
$body = "$email \n Heeft zich aangemeld voor de nieuwsbrief";
mail($to, $subject, $body);
echo "U heeft zich zojuist aangemeld voor de vandenberg nieuwsbrief";
?>
我现在正在一个名为success-message的div中输出php文件中的2个echo,到目前为止一直很好。但我想在一段时间后让消息消失,所以我添加了这个功能:
setTimeout(function() {
$('#success-message').fadeOut('slow');
}, 2000); // <-- time in milliseconds
但现在它只显示错误,例如,当出现错误时,现在它只在表单未正确填写时显示一条消息。当它正确填充时,我什么也得不到。
答案 0 :(得分:1)
在您将回复写入div后,如果您已将其隐藏,请务必再次显示div。
类似的东西:
$('#success-message').html(response).show();
答案 1 :(得分:1)
将setTimeout()
代码块放在success函数中。当您运行代码时,它会立即#success-message
css到display:none
。
所以,你可以解决它:
$.ajax({
url: url,
type:method,
data: data,
success: function(response){
$('#success-message').html(response);
setTimeout(function() {
$('#success-message').fadeOut('slow');
}, 2000);
}
});