如何通过 Javascript / jQuery 在按钮单击时显示引导警报？
Posted
技术标签:
【中文标题】如何通过 Javascript / jQuery 在按钮单击时显示引导警报？【英文标题】：How to show Bootstrap Alert on Button Click via Javascript / jQuery? 【发布时间】：2020-01-23 07:38:29 【问题描述】：我在 asp.net 上创建了一个注册表单页面。
当用户点击提交按钮时，我想在页面顶部显示一条引导警报消息 5 秒钟，上面写着“注册成功”。。 p>
如果用户点击提交并且用户没有填写必填字段，则在填写所有字段并提交之前不应显示警报消息。
我尝试了以下代码，但填写所有字段并提交后没有任何反应。
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<link href="Styles/styles.css" rel="stylesheet" type="text/css" />
<link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="messages" class="hide" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="messages_content"></div>
</div>
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<div class="form">
<label for="FN">
<br />
<br />
First Name:</label>
<input type="text" id="txtFirstname" runat="server" />
<br />
<br />
<label for="LN">Last Name:</label>
<input type="text" id="txtLastname" runat="server" />
<br />
<br />
Password<span style="color: red">*</span>:
<asp:TextBox ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox>
<label for="BT">
<asp:RequiredFieldValidator ID="Pw" runat="server" ControlToValidate="txtPassword" ErrorMessage="Please Provide a password !">Required</asp:RequiredFieldValidator>
</label>
<br />
<br />
E-mail<span style="color: red">*</span>:
<asp:TextBox ID="txtEmail" TextMode="Email" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="EM" runat="server" ControlToValidate="txtEmail" ErrorMessage="Please Provide an Email">Required</asp:RequiredFieldValidator>
<br />
<br />
<asp:Literal ID="ltrTable" runat="server"></asp:Literal>
<label for="BT">Blood Type:</label>
<telerik:RadComboBox runat="server" Skin="Telerik">
<Items>
<telerik:RadComboBoxItem Value="1" Text="A+" />
<telerik:RadComboBoxItem Value="2" Text="A-" />
<telerik:RadComboBoxItem Value="3" Text="B+" />
<telerik:RadComboBoxItem Value="4" Text="O" />
<telerik:RadComboBoxItem Value="5" Text="O+" />
</Items>
</telerik:RadComboBox>
<button class="btn btn-default" id="btnSubmit" onclick="insertData()">Submit</button>
<asp:Button ID="btnCancel" runat="server" CausesValidation="False" OnClick="Button1_Click" Text="Cancel" />
</form>
</div>
<script type="text/javascript">
$('#form').submit(function(e)
$('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show();
$('#messages_content').html('<h4>registration successful message </h4>');
$('#modal').modal('show');
e.preventDefault();
);
</script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function ()
//insertData();
fill_table();
)
function insertData()
var firstname = document.getElementById("txtFirstname").value;
var lastname = document.getElementById("txtLastname").value;
var password = document.getElementById("txtPassword").value;
var email = document.getElementById("txtEmail").value;
if (firstname == "")
alert("fails");
else
$.ajax(
type: "POST",
contentType: "application/json;charset=utf-8",
url: "Home.aspx/test",
data: "firstname: '" + firstname + "',lastname: '" + lastname + "', email: '" + email + "' , password: '" + password + "'",
dataType: "json",
async: false,
success: function (resdata)
);
</script>
我做错了什么？
谢谢！
【问题讨论】：
<form id="form1" ...> 与 $('#form').submit(...)
【参考方案1】：
<div id="messages" class="hidden" >
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="messages_content"></div>
</div>
$.ajax(
type: "POST",
contentType: "application/json;charset=utf-8",
url: "Home.aspx/test",
data: "firstname: '" + firstname + "',lastname: '" + lastname + "', email: '" + email + "' , password: '" + password + "'",
dataType: "json",
async: false,
success: function (resdata)
$('#messages').removeClass('hidden').addClass('alert alert-success ');
$('#messages_content').html('registration successful message ');
);
【讨论】：
请检查一次@SmithBZ 即使有了这个，提交后的更改消息也会很快消失......这很奇怪 你是在成功后重新加载相同的页面吗？ .如果您可以分享实际的代码和 API .. 我可以调查这个问题 不，每次我调试页面再次测试它。所以从第一次它就消失得如此之快。 看这里：pastebin.com/p6jH02uS页面的完整代码@Ronanki Viswanadham【参考方案2】： <button type="submit" class="btn btn-danger float-right" onclick="return confirmDel();"><i class="fa fa-remove mr-5"></i> Firma Sil</button>
<script language="javascript">
function confirmDel()
var agree = confirm("Are you sure you can delete this company?\nBu işlem geri alınamaz!");
if (agree)
return true;
else
return false;
</script>
【讨论】：
你好埃内斯！我测试了您的代码，但我需要的是使用引导警报设计而不是默认设计来显示 警报消息。在您的代码中，只有按钮是使用 BS4 而不是警报消息设计的。【参考方案3】：You need to add the message alert enable script on the ajax success method as below
$.ajax(
type: "POST",
contentType: "application/json;charset=utf-8",
url: "Home.aspx/test",
data: "firstname: '" + firstname + "',lastname: '" + lastname + "', email: '" + email + "' , password: '" + password + "'",
dataType: "json",
async: false,
success: function (resdata)
$('#messages').removeClass('hide').addClass('alert alert-success ').slideDown().show();
$('#messages_content').html('注册成功消息'); );
【讨论】：
你好@Ronanki Viswanadham！哦，那是我的错误，我在 ajax 成功之外添加了脚本。但是，当我现在单击提交时，消息出现和消失的速度如此之快，我无法尝试阅读。如何在此消息中添加时间以显示 5 秒。 更新后的代码不再显示警报消息，点击提交@Ronanki Viswanadham 后没有任何反应 尝试上面更新的代码。旧代码通过删除我认为的可关闭类来工作 我尝试了更新的代码，警报消息一直消失得如此之快。我还删除了可解雇的课程，并尝试使用超时功能没有任何反应。感谢您跟进我的问题...@Ronanki Viswanadham以上是关于如何通过 Javascript / jQuery 在按钮单击时显示引导警报？的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 javascript/jquery 事件控制 youtube iframe 声音
如何调试通过 AJAX（特别是 jQuery）加载的 Javascript
如何区分手动滚动（通过鼠标滚轮/滚动条）和 Javascript/jQuery 滚动？
如何通过javascript或jquery更改href？ [复制]