Page Reloads when Button is clicked on Modal

Question

I have a form with a modal form for now, I plan to have another modal form on the form but issue is, when i fill the modal form and click on Submit, It actually fires the code behind but the modal form closes and the page reloads. The success or error message will only appear when i reopen the modal.

I want the modal to remain and the page should not reload so that i can see the error or success message.

Code below.

<!-- 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

I don't know about asp.net, but i can see you don't have a form definition. Usually you define the form and a submit (button or input) and then you could do something before the submit. For example, if you use Jquery:

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

Other way is using the "onlick" event of the submit.

Saludos,