为什么这个按钮没有提交我的表单？ ASP.NET MVC

Question

我有一个模式，在单击按钮“submitBtn”（包含在表单中）时会提示，我的模式中的一个按钮 (btnSubmit) 应该使用 javascript 代码提交表单。但是，它没有这样做并引发错误；

" Uncaught TypeError: Cannot read property 'submit' of null at HTMLButtonElement. (Category:72)strong text "

我不确定它为什么这样做？警报按预期运行..

下面是我的表单，下面是我的脚本标签，其中包含必要的 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>

注意：两个代码 sn-ps 都在 cshtml 文件中..

Answer 1

您实际上定义了 2 个嵌套形式：第一个使用 Html.BeginForm()（这已经包含了 <form> 和 </form> 之间的所有内容）然后 另一个 em> 手动使用<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" /> 
}

要为生成的<form> 定义一个id，您可以使用这个：

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