单击模态按钮时页面会重新加载

Question

我现在有一个带有模态表单的表单，我计划在表单上安装另一个模态表单，但问题是，当我填写模态表单并单击提交时，它实际上触发了后面的代码，但模态表单关闭并重新加载页面。成功或错误消息只会在我重新打开模态时出现。

我希望模式保留，页面不应重新加载，以便我可以看到错误或成功消息。

下面的代码。

<!-- Modal starting Point -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:600px">
<div class="w3-center"><br/>
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
<div class="w3-content w3-purple w3-center" style="width:100%;"><h2 style="text-align:center;">Change User Password</h2></div>
</div>
<div class="w3-container">
<div class="w3-section w3-row-padding">
<div class="w3-half">
<label style="margin-left:0px">UserName:</label>
<asp:TextBox runat="server" ID="Username" CssClass="w3-input w3-border w3-animate-input" TextMode="singleline" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Username"
CssClass="text-danger" ErrorMessage="The UserName field is required." />
</div>
<div class="w3-half">  
<label>Password:</label> 
<asp:TextBox runat="server" ID="Password" CssClass="w3-input w3-border w3-animate-input" TextMode="Password" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password"
CssClass="text-danger" ErrorMessage="The Password field is required." />
</div>
<div class="w3-half">  
<label>Confirm Password:</label>
<asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" CssClass="w3-input w3-border w3-animate-input" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword" CssClass="text-danger" ErrorMessage="The Confirm Password field is required." />
<asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
CssClass="text-danger" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
</div> 
<asp:Button type="button" runat="server"  ID ="ChangeUserPassword"  Text="Change Password" CssClass="w3-button w3-block w3-section w3-padding w3-purple w3-hover-blue" />
<asp:Label ID="InvalidCredentialsMessage" runat="server" CssClass="w3-block" ForeColor="Red" Visible="False" Width="400"></asp:Label>
</div>
</div>
<div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
<button runat="server"  onclick="document.getElementById('id01').style.display='none'" type="button" class="w3-button w3-red w3-card-2">Cancel</button>
</div>
</div>

Answer 1

我不知道asp.net，但我可以看到你没有表单定义。通常，您定义表单和提交(按钮或输入(，然后您可以在提交之前执行某些操作。例如，如果你使用 Jquery：

$('#myform').submit(function() {
// return true or false depending of some validation
// returnig false the form isn't submitted
});

另一种方法是使用提交的"onlick"事件。

萨卢多斯，