如何在具有多种形式的视图中获取输入值答案

【问题标题】：How do i get input values in a view that has multiple forms如何在具有多种形式的视图中获取输入值
【发布时间】：2022-01-09 18:55:23
【问题描述】：

我有一个视图，该视图将根据模型中的文档数量具有多种形式。每个表单都将包含隐藏输入和用于上传文件的文件控件以及用于上传文件的提交按钮。

我希望使用 ajax 调用来提交表单，但是我在使用 javascript 获取输入值时遇到了问题。

我的观点

  @if (Model.Count > 0)
    {
        int i = 1;
        foreach (var document in Model)
        {
            var formId = i;
            var documentTypeIdInput = formId + "_documentTypeId";
            var accreditationApplicationIdInput = formId + "_accreditationApplicationId";
            var actionInput = formId + "_action";


            <div class="card mb-3">
                <div class="card-header text-left">
                    <b> @($"{i} . {document.TypeDocumentDescription}")  </b>

                </div>
                <div class="card-body">
                    <div>
                        <table class="table  table-sm  text-left">
                            <thead>
                                <tr>

                                    <th>Upload Date</th>
                                    <th>File </th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>

                                @foreach (var uploadDoc in document.UploadedDocuments)
                                {
                                    <tr>

                                        <td>@uploadDoc.CreateDate</td>
                                        <td>@uploadDoc.FileName</td>
                                        <td>
                                            <a class="accordion-edit-btn" title="download file" target="_blank" asp-action="Download" asp-route-id="@uploadDoc.Id"><i class="fas fa-file-download"></i></a>
                                            <a class="accordion-delist-btn" title="delete file" target="_blank" asp-action="DeleteFile" asp-route-id="@uploadDoc.Id" asp-route-actionOfOrigin="AddDocuments"><i class="fas fa-trash-alt"></i></a>
                                        </td>
                                    </tr>
                                }
                                <tr>
                                    <td colspan="3">

                                        <form id="@formId" class="form" action="UploadDocument" enctype="multipart/form-data" method="post">
                                            <input type="hidden" name="documentTypeId" id="@documentTypeIdInput" asp-for="@document.DocumentTypeId" />
                                            <input type="hidden" name="accreditationApplicationId" id="@accreditationApplicationIdInput" asp-for="@document.AccreditationApplicationId" />
                                            <input type="hidden" name="action" id="@actionInput" value="AddDocuments" />
                                            <div class="form-group">
                                                <input name="file" type="file" multiple />
                                                @* add validation summary per document *@
                                                <button type="submit" title="upload document" class="btn btn-primary rounded submit"><i class="fas fa-file-upload"></i> &nbsp; Upload File</button>
                                                @*  *@
                                            </div>
                                        </form>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>


                </div>
            </div>
            i++;


        }
    }

还有我的 javascript 示例

  $(".submit").on("click", (e) => {
            var $form = $(this).closest(".form");
            var formId = $(this).closest('form').attr("id");

            $form.addEventListener("submit", function (event) {
                event.preventDefault();
                
                alert($("#" + formId + "_documentTypeId").val());
                
            }) 
        })

在我的 javascript 上，我无法从我提交的表单中获取表单的 ID 或输入的值，我该如何完成此操作

提前致谢

【问题讨论】：

标签： javascript jquery asp.net model-view-controller asp.net-core-mvc

【解决方案1】：

在提交按钮的点击事件中添加submit事件监听器似乎很奇怪。

为什么不简单：

$(".form").on("submit", function(event){
    event.preventDefault();
    
    const formData = new FormData(this);
    alert(formData.get("documentTypeId");
});

您可以通过 jQuery 的ajax 方法或使用the fetch API 轻松发送the FormData object。

【讨论】：