title: How to ajax insert into value from Modal form result?
body: <p>I am building an Invoice form where the user must select a customer from thousands of records. In order to allow users to search &amp; select, I want to use a modal form to select the desired customer and then insert the customer id &amp; name into the original form. (I believe this method is a work around for the "no-nested-forms" rule.)</p>
  
  <p><strong>Invoice Form:</strong></p>
  
  <blockquote>
    <p>Customer : [Select Customer Button] - [Display Name after selected] [hidden: customer_id]</p>
    
    <p>Amount: [normal form stuff]</p>
  </blockquote>
  
  <p><strong>Modal Form:</strong></p>
  
  <blockquote>
    <p>Search [  ]</p>
    
    <p>[Table of Customers, filter by search] [select this customer button]</p>
  </blockquote>
  
  <p>I don't think I need to have a [http post] method to capture the Modal Form's selection - instead I just want to use javascript to update the Invoice Form's value for Customer ID (hidden) &amp; Customer Name.</p>
  
  <p>So far I have:</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>public ActionResult Modal()
  {
       return PartialView();
  }
  public ActionResult SaveInvoice()
  {
       return View();
  }
  [HttpPost]
  public ActionResult SaveInvoice(Invoice invoice)
  {
       dataManager.Save(invoice);
       return RedirectToAction("Index");
  }
  </code></pre>
  
  <p><strong>Modal Partial:</strong></p>
  
  <p>--have not implement search yet - for now trying to get insertion to work from number text box</p>
  
  <pre><code>@model Models.Customer
  &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt; Select Customer &lt;/div&gt;
      @using (Html.BeginForm())
      {
          @Html.ValidationSummary()
          @Html.AntiForgeryToken()
          &lt;div class="modal-body"&gt;
              &lt;div class="form-horizontal"&gt;
                  &lt;div class="form-group"&gt;
                      @Html.LabelFor(model =&gt; model.id, htmlAttributes: new { @class = "control-label col-md-2" })
                      &lt;div class="col-md-10"&gt;
                          @Html.EditorFor(model =&gt; model.id, new { htmlAttributes = new { @class = "form-control" } })
                          @Html.ValidationMessageFor(model =&gt; model.id, "", new { @class = "text-danger" })
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-offset-2 col-md-10"&gt;
                      &lt;input type="submit" value="Save" class="btn btn-default" id="save-customer-id" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      }
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Invoice View</strong></p>
  
  <pre><code>@model Models.Invoice
  &lt;div class="form-horizontal"&gt;
      &lt;hr /&gt;
      @Html.ValidationSummary(true, "", new { @class = "text-danger" })
      &lt;div class="form-group"&gt;
          @Html.LabelFor(model =&gt; model.customerId, htmlAttributes: new { @class = "control-label col-md-2" })
          &lt;div class="col-md-10"&gt;
              &lt;button id="CustomerBtn" class="btn btn-primary btn-lg" onclick="ShowModal()"&gt;Select Customer&lt;/button&gt;
              @Html.EditorFor(model =&gt; model.customerId, new { htmlAttributes = new { @class = "form-control", id= "customer-id" } })
              @Html.ValidationMessageFor(model =&gt; model.customerId, "", new { @class = "text-danger" })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;div class="col-md-offset-2 col-md-10"&gt;
              &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="CustomerModal" class="modal"&gt;
      &lt;div id="CustomerContainer" class="modal-dialog"&gt;
          @Html.Partial("Modal")
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function ShowModal() {
          $('#CustomerModal').modal('show');
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>Currently the code shows the form and the button opens the modal with form correctly.</p>
  
  <p>Thanks in advance! I've been searching around but haven't seen anything about inserting from the modal back to the "background page". (And I haven't used AJAX much).</p>
  
  <p>Using:</p>
  
  <ul>
  <li>Visual Studio 2015</li>
  <li>ASP.NET MVC Entity Framework</li>
  <li>Bootstrap (tried using TwitterBootstrapMVC without any luck)</li>
  </ul>