I have a button that I'm using a bootstrap 3 modal. This is an ASP.NET Webforms application. When clicking on the button it attempts to submit the form, I can tell because validation summaries are being triggered. I've already set the button type to button. I've also tried e.preventDefault() on the onclick event. This happens for Button1
. How can I prevent the button from submitting the form while still having the server side click event postback?
<div id="verifiedApplicantAddress" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Validate Residence Address</h4>
</div>
<div class="modal-body">
<h2>
We've found a possible match in the USPS database.
</h2>
<p>Please select the best match</p>
<ul style="list-style:none; float:left;">
<li>
<b>
Corrected address:
</b>
</li>
<li>
<asp:Label runat="server" ID="verifiedLine1"></asp:Label>
</li>
<li>
<asp:Label runat="server" ID="verifiedLine2"></asp:Label>
</li>
<li>
<asp:Label runat="server" ID="verifiedCity"></asp:Label>
</li>
<li>
<asp:Label ID="verifiedState" runat="server"></asp:Label>
</li>
<li>
<asp:Label runat="server" ID="verifiedZip"></asp:Label>
</li>
</ul>
<ul style="list-style:none; float:left;">
<li>
<b>
Address as entered:
</b>
</li>
<li>
<asp:Label runat="server" ID="residenceEnteredLine1"></asp:Label>
</li>
<li>
<asp:Label runat="server" ID="residenceEnteredLine2"></asp:Label>
</li>
<li>
<asp:Label runat="server" ID="residenceEnteredCity"></asp:Label>
</li>
<li>
<asp:Label ID="residenceEnteredState" runat="server"></asp:Label>
</li>
<li>
<asp:Label runat="server" ID="residenceEnteredZip"></asp:Label>
</li>
</ul>
</div>
<div class="modal-footer" style="margin-top: 100px;">
<button type="button" class="btn btn-default" data-dismiss="modal">Use Address as Entered</button>
<button type="button" runat="server" ID="Button1" class="btn btn-primary" OnServerClick="Button1_Click">Accept Changes</button>
</div>
</div>
</div>
</div>
Protected Sub Button1_Click(sender As Object, e As EventArgs)
txtApplicantAddress1.Text = verifiedLine1.Text
txtApplicantAddress2.Text = verifiedLine2.Text
txtApplicantCity.Text = verifiedCity.Text
txtApplicantZip.Text = verifiedZip.Text
ScriptManager.RegisterStartupScript(Me, Me.GetType, "HideVerifiedApplicantAddress", "$('#verifiedApplicantAddress').modal('hide');$('.modal-backdrop').remove();$('body').removeClass('modal-open');", True)
End Sub
$('button:not([type=submit])').on('click',
function(e) {
e.preventDefault();
return true;
});
The solution was to set the CausesValidation attribute to false on the button.
<button type="button" runat="server" ID="Button1" class="btn btn-primary" OnServerClick="Button1_Click" CausesValidation="False">Accept Changes</button>