表单提交后自动关闭引导警报
表单提交后自动关闭引导警报
提问于 2018-05-16 07:56:58
我有一个ajax表单，它向数据库提交数据，它使用引导警报，当它成功的时候，我希望警报在一段时间过去之后关闭，但是每次都需要这样做。
例如，如果我加载表单并进行一些更改并按submit，它将显示成功警报，然后关闭；如果我再次提交表单--例如，我忘记更改什么--它将再次显示警报，但这一次它没有关闭。
我怎样才能每次都显示和关闭警报呢？
我在页面中提供了一个带有硬编码警报的示例，但是这是使用javascript写入页面的，但我想不出如何用工作的ajax代码提供一个完整的示例，显示没有后端PHP的成功警报。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Alerts</title>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body class="bg-dark text-white">
<div id="wrap">
<div class="container-fluid mt-4">
<p>Example Form</p>
<div class="col-sm-6">
<form action="process_add_task.php" method="post" class="row form-horizontal align-items-start" role="form">
<input name="task_id" type="hidden" value="1" class="form-control input-sm" />
<div class="col-sm-12">
<div id="name-group" class="form-group">
<label for="name" class="control-label">Name</label>
<input name="name" type="text" class="form-control input-sm" />
</div>
</div>
<div class="col-sm-12 mx-auto text-center">
<button type="submit" class="btn btn-md btn-primary">Submit <span class="fa fa-arrow-right"></span></button>
</div>
</form>
<div class="col-sm-12 mx-auto"><div class="alert alert-success" role="alert">Success</div></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="static/js/bootstrap/bootstrap.js"></script>
<script src="static/js/bootstrap/bootstrap.notify.js"></script>
<script type="text/javascript">
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function() {
$(this).remove();
});
}, 1000);
</script>
</body>
</html>回答 1
Stack Overflow用户
发布于 2018-05-16 08:03:22
$(this).hide();
<script type="text/javascript">
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function() {
$(this).hide();
});
}, 1000);
</script> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50365291
复制相关文章
相似问题
腾讯云开发者
