CODEWITHSUNDEEP
htmltwitter-bootstrapformswebformsbootstrap-modal
Antarr Byrd
Antarr Byrd

Reputation: 26061

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;
        });

Upvotes: 2

Views: 6593

Answers (4)

Mike
Mike

Reputation: 51

This was solved for me using the UseSubmitBehavior="false" attribute on my asp:Button elements

However, be careful with this because this transforms the HTML for your asp:Buttons from type="submit" to type="button". So in my case, I had to tweak some CSS to accommodate these changes.

I would have responded with a comment, but you have to have more rep to comment than to answer...not sure why.

Upvotes: 1

Joel
Joel

Reputation: 11

I had something similar where every button tag was submitting the form it was in. Probably not relevant to you but just for those who came across this page with the same search: every button tag is submitting the form it is in.

So I had: 

<button class="btn" role="button" onclick="javascript:loadAnotherPage();">Go</button>

And fixed the auto submit with:

<button class="btn" role="button" onclick="javascript:loadAnotherPage();return false;">Go</button>

Upvotes: 1

Antarr Byrd
Antarr Byrd

Reputation: 26061

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>

Upvotes: 1

user9598508
user9598508

Reputation:

you can use:

document.getElementById("Button").disabled = true;

or to enable:

document.getElementById("Button").disabled = false;

I do not understand why do you need postback thought?

Upvotes: 0

Related Questions