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

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”事件。

萨卢多斯，