为什么此按钮不提交我的表单？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)){&nbsp; &nbsp; <label id="CategoryDescriptionLabel">Description</label>&nbsp; &nbsp; <input id="CategoryDescription" type="text" name="categoryDescription" />&nbsp;&nbsp; &nbsp; <input type="button" value="submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" />&nbsp;}id要为生成的定义<form>，您可以使用以下命令：@using (Html.BeginForm("Category", "Category", FormMethod.Post, new { id = "bla" })){&nbsp; &nbsp; ...}