htmltwitter-bootstrapformswebformsbootstrap-modal

Stop button from submitting form


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?

My Modal

<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">&times;</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>

server side click event

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

javascript

$('button:not([type=submit])').on('click',
        function(e) {
            e.preventDefault();
            return true;
        });

Solution

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