The second Modal in my ASPX file doesn’t Post when clicking submit button

I have an ASPX file that contains two modals (myModal and addModal) and a gridview that has buttons calling each of these. I am having trouble with the second modal when opening and clicking its Submit button as it won’t fire a PostBack. Its only a problem with the second one. If I change the sequence of these Modals within the ASPX file, then I again have trouble only with the second one in the file.

Is there something additional needed when having two modals in the same ASPX page to get it to fire a PostBack?

Here are the ASPX and C# files:

C# file:

protected void Page_Load(object sender, EventArgs e)
{                
try{
    if (IsPostBack)
    {
        Control control = null;         
        string controlName = Request.Params["__EVENTTARGET"];
        if (!String.IsNullOrEmpty(controlName))
        {
            control = FindControl(controlName);
            GridViewRow gvRow1 = (GridViewRow)control.Parent.Parent;
            string controlID = control.ID.ToString();
        }
    }
    if(!IsPostBack)
    {
            DataGrid_Load(DAL.reg(HeadText.Text, OrgText.Text), "reg");
            ErrorText.Text = "NO POSTBACK";
    }   
}
catch{}
}

ASPX file:

<div id="myModal" class="modal fade">
<script type="text/javascript">
        function openModal() {
            $('[id*=myModal]').modal('show');
        } 
</script>
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h2 class="modal-title">Update Data</h2>
        </div>
        <div class="modal-body">        
            <form class="form-inline" role="form" method="POST" action="" >
                <div class="control-group">
                    <div class="controls controls-row">
                        <label for="lblnameid" class="col-sm-2 control-label">Name</label>
                        <div class="col-sm-6">
                            <asp:TextBox ID="lblnameid" runat="server" Text="" CssClass="form-control" ></asp:TextBox>
                        </div>
                        <label for="rankid" class="col-sm-1 control-label">Rank</label>
                        <div class="col-sm-3">
                            <asp:DropDownList id="rankid" runat="server" CssClass="form-control"
                                SelectedValue='<%# Eval("rank") %>' TabIndex='<%# TabIndex %>'>
                                <asp:ListItem Value=""> </asp:ListItem>
                                <asp:ListItem Value="a"> A </asp:ListItem>
                                <asp:ListItem Value="b"> B </asp:ListItem>
                                <asp:ListItem Value="c"> C </asp:ListItem>
                            </asp:DropDownList>
                        </div>
                    </div>
                </div>
                    <p> </p>

                <div class="control-group">
                    <div class="col-sm-10">
                        <asp:TextBox ID="id" type="hidden" runat="server" Text="" CssClass="form-control" ></asp:TextBox>
                    </div>
                </div>                  

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <div class="pull-right">
                        <button type="submit" class="btn btn-default">Cancel</button>
                        <!-- <button type="submit" class="btn btn-primary">Save</button> -->
                        <asp:Button ID="btnUpdate" OnClientClick="<% %>" class="btn btn-default" runat="server" Text="Save" CommandArgument='<%# Eval("Id") %>' OnCommand="btnUpdate_Click" />
                      </div>
                    </div>
                </div>
            </form>
        </div><!-- /.modal-body -->
        <form role="form" action="">
        <div class="modal-footer">
        </div>
        </form>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div id="addModal" class="modal fade" tabindex="-1" method="POST" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<script type="text/javascript">

    $('#addModal').on('hidden.bs.modal', function () {
        $(this).find('form').trigger('reset');
    })
</script>
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">
                <div class="col-md-12">
                    <form class="form-horizontal" role="form">
                        <fieldset>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="textinput">Name</label>
                                <div class="col-sm-6">
                                  <input type="text" id="lblnameid" class="form-control">
                                </div>
                            </div> 
                        </fieldset>
                    <div class="modal-footer">
                        <asp:Button ID="btnSubmit" OnClientClick="<% %>" class="btn btn-primary" runat="server" Text="Save" CommandArgument='<%# Eval("Id") %>' OnCommand="btnSubmit_Click" />
                    </div>
                    </form>
                </div>  
            </div>  
        </div>  <!-- /.modal-body -->
    </div>  <!-- /.modal-content -->
</div>  <!-- /.modal-dialog -->

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The problem was I had 3 sets of form tags in my page. One for the overall page and one each for the two Bootstrap Modals I had that opened up from button clicks. The solution came when I removed the form tags from the bootstrap modals. Then all button clicks from the modals worked properly and submitted the data.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0