asp.net form fields return empty when in a bootstrap modal

Question

I am trying to submit an asp.net form inside a bootstrap modal. for some reason all the fields return empty (if I try this with fields outside of the modal it works great). I have seen some posts about it but non of the solutions solved my issue.

<div class="modal fade" id="myModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">EDIT ADVERTISMENT</h4>
        </div>
        <div class="modal-body">

        <form id="updateadform" method="post" action="#" class="basic-form" >
          <label for="title">Ad Name</label>
            <asp:TextBox ID="modaltbadname" runat="server" placeholder="Ad Name"></asp:TextBox>
            <label for="title">Promotional Text</label>
            <asp:TextBox id="modaltbtbpromotional" TextMode="multiline"  Rows="3" runat="server" />
          <label for="description">Page</label>
            <asp:DropDownList ID="modalddpage" placeholder="Insert the page the ad refers to" runat="server"></asp:DropDownList>
          <label for="finish-date">Start Date</label>
            <asp:TextBox ID="modaltbstartdate" runat="server" placeholder="20/01/2014" CssClass="datepicker" onchange="Page_ClientValidate();"></asp:TextBox>
          <label for="finish-date">End Date</label>
            <asp:TextBox ID="modaltbenddate" runat="server" placeholder="20/01/2014" CssClass="datepicker" onchange="Page_ClientValidate();"></asp:TextBox>
               <asp:CompareValidator id="CompareValidator1" runat="server" ControlToCompare="modaltbstartdate" cultureinvariantvalues="true" display="Dynamic" enableclientscript="true"  ControlToValidate="modaltbenddate" ErrorMessage="Start date must be earlier than finish date" type="Date" setfocusonerror="true" Operator="GreaterThanEqual" text="Start date must be earlier than finish date"></asp:CompareValidator>

          <div class="right-side">
          </div>

          <div class="clearfix"></div>

        </form>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <asp:Button type="button" ID="savead"   CssClass="btn btn-primary" runat="server" Text="Save Changes" OnClick="savead_Click" OnClientClick="savevariables()" UseSubmitBehavior="false" />
        </div>
      </div>
    </div>
  </div>

Code behind:

protected void savead_Click(object sender, EventArgs e)
{
    string x = idtoupdate.Value; // this field is outside of the modal - returns its correct value
    string y = modaltbadname.Text; //returns ""

    DB.UpdateAd(modaltbadname.Text, modaltbtbpromotional.Text, modalddpage.SelectedValue, modaltbstartdate.Text, modaltbenddate.Text, int.Parse(idtoupdate.Value));
}

Answer 1

The modal will not affect the values sent to the server. However, you are manually specifying a <form> tag within your modal. I'm assuming that further above the mark-up you have posted or in your master page there is a <form runat="server"> somewhere and what you may have done is nested a form within a form accidentally.

Remove the form tag inside the modal and the values should save correctly.

Edit after comments:

Ensure the closing </form> tag which matches initial <form runat="server> tag surrounds the modal after it appended.

Other potential causes:

Your code behind Page_Load event does not set modaltbadname.Text property unless it is wrapped like so:

if(!Page.IsPostBack)
{
     modaltbadname.Text = "value";
}

Check that OnClientClick="savevariables()" function does not change the value before it is submitted to the server.