為什么這個按鈕不提交我的表單？ 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" }))
{
    ...
}