Form Shows and hides again: jQuery

Question

I am trying to show a form when a button is clicked. But it shows for a second or so and then hides again. i have tried to debug it with console.log() but my jQuery is not reaching in the anonymous function in click event in chrome console it is showing me this error "Failed to load resource: the server responded with a status of 400 (Bad Request)" Here is my code

        <asp:Panel id="dynamicSubForm" class="container"  runat="server" DefaultButton="btnAdd" DefaultFocus="txtSegment">
            <div class="subForm">
                <div id="subHeader" class="divRow">
                    <div class="headCol">
                        <asp:Label ID="Label1" runat="server" 
                            Text="Sources"></asp:Label>
                    </div>
                </div>
                <div class="subFormRow">
                    <div>&nbsp</div>
                </div>
                <div class="subFormRow">
                    <div class="subFormFstCol">

                        <asp:Label ID="lblSource" runat="server" Text="Source:"></asp:Label>

                    </div>
                    <div class="subFormScndCol">
                        <asp:DropDownList ID="ddlSource" runat="server" 
                            CssClass="whiteCtrl" DataSourceID="dsIrrigationSource" 
                            DataTextField="title" DataValueField="id">
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsIrrigationSource" runat="server" 
                            ConnectionString="<%$ ConnectionStrings:MIS4BOSConnectionString %>" 
                            SelectCommand="SELECT [id], [title] FROM [IrrigationSource]">
                        </asp:SqlDataSource>
                    </div>
                </div>
                <div class="subFormRow">
                    <div class="subFormFstCol">

                        <asp:Label ID="lblSegment" runat="server" Text="Area Segment:"></asp:Label>

                    </div>
                    <div class="subFormScndCol">
                        <asp:TextBox ID="txtSegment" runat="server" CssClass="whiteCtrl"></asp:TextBox>
                        %<br />
                        <asp:RegularExpressionValidator ID="revArea0" runat="server" 
                            ControlToValidate="txtSegment" Display="Dynamic" 
                            ErrorMessage="Percentage must be all digits." ValidationExpression="^[0-9]+$"></asp:RegularExpressionValidator>
                    </div>
                </div>
                <div class="subFormRow">
                    <div class="subFormFstCol">

                        <asp:Label ID="lblDesc" runat="server" Text="Description:"></asp:Label>

                    </div>
                    <div class="subFormScndCol">
                        <asp:TextBox ID="txtDesc" runat="server" Height="70px" TextMode="MultiLine" 
                            CssClass="whiteCtrl"></asp:TextBox>
                    </div>
                </div>
                <div class="subFormRow">
                    <div class="subFormFstCol">

                    </div>
                    <div class="subFormScndCol">
                        <asp:Button ID="btnAdd" runat="server" CssClass="blueBtn" Text="Add" 
                            onclick="btnAdd_Click" />
                        <asp:Button ID="btnAddCancel" runat="server" CssClass="whiteBtn" 
                            Text="Cancel" onclick="btnAddCancel_Click" />
                        <br />
                        <asp:Label ID="lblSubMsg" runat="server" CssClass="usrMsg" Text="Label" 
                            Visible="False"></asp:Label>
                    </div>
                </div>
            </div>
        </asp:Panel>
enter code here
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        var subForm = $("#MainContent_dynamicSubForm");
        var addBtn = $("#irrAdd");

        console.log("before hide");
        subForm.hide();
        console.log("after hide");
        addBtn.on("click", function () {
            console.log('in anonymous func');
            subForm.show();
        });
    });
</script>

Answer 1

Use jquery toggle(); function

$(document).ready(function () {
        var subForm = $("#MainContent_dynamicSubForm");
        var addBtn = $("#irrAdd");

        console.log("before hide");
        subForm.hide();
        console.log("after hide");
        addBtn.on("click", function () {
            console.log('in anonymous func');
            subForm.toggle();
        });
    });

Answer 2

The form is probably submitting, do it like this

addBtn.on("click", function (e) {
    e.preventDefault();
    console.log('in anonymous func');
    subForm.show();
});

Note that the id irrAdd does not seem to exist in the markup, and that you could also change the buttons type to button