如何在具有多个 forms 的视图中获取输入值

Question

根据 model 中的文档数量，我有一个视图将有多个 forms。 每个表单将包含隐藏输入和用于上传文件的文件控件和用于上传文件的提交按钮。

我希望使用 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 或输入的值，我该如何做到这一点

提前致谢

Answer 1

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

为什么不简单：

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

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