在模態上單擊按鈕時頁面重新加載

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

薩盧多斯，