在Twig文件中显示Bootstrap Alert消息'onsubmit',可以通过以下步骤实现:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
请注意,这里使用的是Bootstrap 5版本的CDN链接,你可以根据需要选择其他版本。
{% if show_alert %}
<div class="alert alert-success" role="alert">
提交成功!
</div>
{% endif %}
<form action="/submit" method="post" onsubmit="showAlert()">
<!-- 表单内容 -->
<button type="submit" class="btn btn-primary">提交</button>
</form>
<script>
function showAlert() {
// 在提交表单时,设置show_alert变量为true,以显示Alert消息
document.getElementById('show_alert').value = true;
}
</script>
在上面的代码中,我们使用了一个名为show_alert
的变量来控制Alert消息的显示。当表单提交时,通过JavaScript函数showAlert()
将show_alert
变量设置为true
,从而显示Alert消息。
show_alert
变量传递给Twig模板。具体的实现方式取决于你使用的后端框架。以下是一个简单的示例代码:// 在后端处理表单提交的逻辑中,将show_alert变量传递给Twig模板
return $this->render('template.twig', ['show_alert' => $_POST['show_alert']]);
在上面的代码中,我们将show_alert
变量从表单的POST数据中获取,并将其传递给Twig模板。
这样,当你在Twig文件中提交表单时,如果show_alert
变量为true
,则会显示一个Bootstrap的成功Alert消息。你可以根据需要自定义Alert消息的样式和内容。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云