为什么此按钮不提交我的表单？ASP.NET MVC

Question

我有一个模式，在单击按钮“submitBtn”（包含在表单中）时出现提示，我的模式中的一个按钮（btnSubmit）应该使用 javascript 代码提交表单。但是，它没有这样做并抛出错误；“未捕获类型错误：无法读取 HTMLButtonElement 处 null 的属性“提交”。（类别：72）强文本”我不确定它为什么这样做？警报按预期运行。下面是我的表单，下面是我的脚本标签，其中包含必要的 javascript 代码。任何帮助将不胜感激，谢谢:)表单 HTML：（链接到“CategoryController”）@using (Html.BeginForm("Category", "Category", FormMethod.Post)){    <form id="formField">        <label id="CategoryDescriptionLabel">Description</label>        <input id="CategoryDescription" type="text" name="categoryDescription" />         <input type="button" value="submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" />     </form>}JavaScript：<script>    document.getElementById("btnSubmit").addEventListener("click", function () {        alert("Submitting!");        document.getElementById("formField").submit()    });</script>注意：两个代码片段都在 cshtml 文件中。

Answer 1

事实上，您已经定义了2 个嵌套形式：第一个使用Html.BeginForm()（这已经将其中的任何内容包装在 和 之间<form>）</form>，然后使用和标签手动定义了另一个形式。<form></form>

在 HTML 中嵌套表单是非法的。最好省略手动创建的<form>，将其更改为：

@using (Html.BeginForm("Category", "Category", FormMethod.Post))

{

    <label id="CategoryDescriptionLabel">Description</label>

    <input id="CategoryDescription" type="text" name="categoryDescription" /> 

    <input type="button" value="submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" /> 

}

id要为生成的定义<form>，您可以使用以下命令：

@using (Html.BeginForm("Category", "Category", FormMethod.Post, new { id = "bla" }))

{

    ...

}