javascript - How to add rows to jquery datatable inside a form?

Question

I hope everyone had good holidays.

I need to add rows to my datatable inside a modal window(partial view). This modal window basically has a form for various fields and a datatable, together with two inputs and a button.

My idea was to fill the two input fields and when the button is pressed a new row is created in the table, with the values inserted in the two input fields. But for some reason, when I click the button the values in the input fields are empty. The information on the table would very likely be stringified and sent, for example, to the field asp-for="test". So far this was what I thought.

Is this logic possible within a partial view? Do I need an additional form to receive data from my two inputs? I'm already inside another form and I know HTML5 doesn't allow for form nesting, but I get the nagging feeling that I would need an additional form for this logic. Here is the code:

(js)

$(document).ready(function () {
    $('#AddProdBtn').click(function () {
        $('#returnLinesGrid').dataTable().fnAddData( [
    $('#prodId').val(), $('#prodQty').val()] );
    });
});

(cshtml)

 <div id="return-edition-modal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content white-box white-box--lblreset">
            <div class="modal-header">
                <h5 class="modal-title create" style="display:none;">@TitleResource.ReturnCreate</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
                <div asp-validation-summary="ModelOnly"></div>
                <a hidden id="create-url" asp-action="Create" asp-controller="Returns"></a>
                <input type="hidden" value="@Guid.NewGuid()" asp-for="Id" />
                <div class="modal-body row">
                    <div class="md-form col-6 create-only row">
                        <select asp-for="ReturnType" asp-items="Html.GetEnumSelectList<OrderReturnTypeEnum>()" required class="form-control" selectpicker>
                            <option value="">@LabelResource.SelectReturnType</option>
                        </select>
                        <span asp-validation-for="ReturnType"></span>
                    </div>

                    <div class="md-form col-6 create-only" id="ReturnMotivePlaceholder" style="margin-top: 6px">
                        <select disabled selectpicker>
                            <option value="">@LabelResource.SelectReturnMotive</option>
                        </select>
                    </div>

                    <div class="md-form col-6 create-only" data-dependency="@((int)OrderReturnTypeEnum.Recall)" style="margin-top:6px">
                        <select asp-for="ReturnMotive" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumRecall>()" required class="form-control" selectpicker>
                            <option value="">@LabelResource.SelectReturnMotive</option>
                        </select>
                        <span asp-validation-for="ReturnMotive"></span>
                    </div>
                    <div class="md-form col-6 create-only" data-dependency="@((int)OrderReturnTypeEnum.Daily)" style="margin-top:6px">
                        <select asp-for="ReturnMotiveAux" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumDaily>()" required class="form-control" selectpicker>
                            <option value="">@LabelResource.SelectReturnMotive</option>
                        </select>
                        <span asp-validation-for="ReturnMotiveAux"></span>
                    </div>
                </div>
                <div class="modal-body row">
                    <div class="md-form col-6 create-only" data-dependency="@((int)OrderReturnTypeEnum.Daily)">
                        <input type="number" value="" asp-for="InvoiceNumber" class="form-control" required placeholder="@LabelResource.SelectReturnInvoiceNumber" />
                    </div>
                    <div class="md-form col-6 create-only">
                        <input type="text" value="" asp-for="ClientReturnNumber" placeholder="@LabelResource.SelectClientReturnNumber" class="form-control" />
                    </div>
                </div>

                <div class="md-form col-3 create-only">
                    <input type="number" value="" id="prodId" placeholder="@LabelResource.SelectProdId" />
                </div>
                <div class="md-form col-3 create-only">
                    <input type="text" value="" id="prodQty" placeholder="@LabelResource.SelectProdQuantity" />
                </div>
                <div class="col-6>
                    <button type="button" id="AddProdBtn">@ButtonResource.AddProduct</button>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <table class="dataTable" id="returnLinesGrid" asp-for="ReturnLines">
                                <thead>
                                    <tr>
                                        <th>@Html.Raw(LabelResource.ProductId)</th>
                                        <th>@Html.Raw(LabelResource.Quantity)</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="row modal-footer message-footer pr-5">
                    <div class=" mr-md-0">
                        <a data-dismiss="modal" class="btn btn-danger w-100">@ButtonResource.Cancel</a>
                    </div>
                    <div class=" ml-3">
                        <button type="submit" class="btn btn-primary w-100">@ButtonResource.Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

But the value of "prodId" and "prodQty" is always empty when I click the "AddProdBtn" button. Almost as if it never. I have no idea what to do.. Thank you for any and all help.

Pictures

Modal window

Main window, modal is called by pressing "Nova devolu??o" button

Answer 1

You should add the js to the main view. Below is a working demo:

Main View:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#return-edition-modal">
    Create
</button>

@await Html.PartialAsync("_ProductPartial")

@section scripts{
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
    <script>
        $(document).ready(function () {
            var datatable = $('#returnLinesGrid').dataTable();
            $('#AddProdBtn').click(function () {
                datatable.fnAddData([
                    $('#prodId').val(), $('#prodQty').val()]);
            });
        });
    </script>
}

Partial View:

<div id="return-edition-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
                    <div asp-validation-summary="ModelOnly"></div>

                    <div class="md-form col-3 create-only">
                        <input type="number" value="" id="prodId" placeholder="SelectProdId" />
                    </div>
                    <div class="md-form col-3 create-only">
                        <input type="text" value="" id="prodQty" placeholder="SelectProdQuantity" />
                    </div>
                    <div class="col-6">
                        <button type="button" id="AddProdBtn">AddProduct</button>
                    </div>

                    <table id="returnLinesGrid">
                        <thead>
                            <tr>
                                <th>@Html.Raw("ProductId")</th>
                                <th>@Html.Raw("Quantity")</th>
                            </tr>
                        </thead>
                    </table>

                    <div class="modal-footer">
                        <div class="mr-md-0">
                            <a data-dismiss="modal" class="btn btn-danger">Cancel</a>
                        </div>
                        <div class=" ml-3">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Result: