How to ajax insert into value from Modal form result?

Question

I am building an Invoice form where the user must select a customer from thousands of records. In order to allow users to search & select, I want to use a modal form to select the desired customer and then insert the customer id & name into the original form. (I believe this method is a work around for the "no-nested-forms" rule.)

Invoice Form:

Customer : [Select Customer Button] - [Display Name after selected] [hidden: customer_id]

Amount: [normal form stuff]

Modal Form:

Search [ ]

[Table of Customers, filter by search] [select this customer button]

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) & Customer Name.

So far I have:

Controller:

public ActionResult Modal()
{
     return PartialView();
}
public ActionResult SaveInvoice()
{
     return View();
}
[HttpPost]
public ActionResult SaveInvoice(Invoice invoice)
{
     dataManager.Save(invoice);
     return RedirectToAction("Index");
}

Modal Partial:

--have not implement search yet - for now trying to get insertion to work from number text box

@model Models.Customer
<div class="modal-content">
    <div class="modal-header"> Select Customer </div>
    @using (Html.BeginForm())
    {
        @Html.ValidationSummary()
        @Html.AntiForgeryToken()
        <div class="modal-body">
            <div class="form-horizontal">
                <div class="form-group">
                    @Html.LabelFor(model => model.id, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.id, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.id, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" id="save-customer-id" />
                </div>
            </div>
        </div>
    }
</div>

Invoice View

@model Models.Invoice
<div class="form-horizontal">
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.customerId, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <button id="CustomerBtn" class="btn btn-primary btn-lg" onclick="ShowModal()">Select Customer</button>
            @Html.EditorFor(model => model.customerId, new { htmlAttributes = new { @class = "form-control", id= "customer-id" } })
            @Html.ValidationMessageFor(model => model.customerId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>


<div id="CustomerModal" class="modal">
    <div id="CustomerContainer" class="modal-dialog">
        @Html.Partial("Modal")
    </div>
</div>

Javascript

<script type="text/javascript">
    function ShowModal() {
        $('#CustomerModal').modal('show');
    };
</script>

Currently the code shows the form and the button opens the modal with form correctly.

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).

Using:

• Visual Studio 2015
• ASP.NET MVC Entity Framework
• Bootstrap (tried using TwitterBootstrapMVC without any luck)

Answer 1

You can insert value of the selected customer from modal to the background form using the bootstrap event 'hidden.bs.modal' or 'hide.bs.modal'.

DEMO

 $('#myModal').on('hidden.bs.modal', function () { $("#customerName").val($("#searchCustomer").val()); }); 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <form> <label> Customer</label>&nbsp;&nbsp;<input type="text" id="customerName"> <button type="button" class="btn btn-link btn-xs" data-toggle="modal" data-target="#myModal">Search Customer</button> <br/> <button type="submit" class="btn btn-default">Save</button> </form> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Search Customer</h4> </div> <div class="modal-body"> Customer <input type="text" id="searchCustomer" value="Anil Panwar or id here"> <button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Select</button> </div> <div class="modal-footer"> </div> </div> </div> </div> </div>