为什么这个按钮不提交我的表单？ 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 个嵌套的 forms ：第一个使用Html.BeginForm() （这已经包装了<form>和</form>之间的任何内容），然后使用<form>和</form>手动定义了另一个标签。

在HTML中嵌套了forms是不合法的，手工创建的<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" }))
{
    ...
}