Javascript 不会检测 HTML 文档中元素的 ID。返回"无法读取未定义的属性'submit'"

Question

我正在尝试在HTML中制作DIV元素，但是使用JavaScript提交表单，但是在编写函数并定义元素的ID之后，浏览器输出中的控制台无法读取财产"提交"不确定的。

<form action="recipe.html" id="recipeForm" name="chicken_recipe"> 
   <input type='hidden' name='recipename' value='Chicken Pot Pie'>
        <section class="col-4 popOut row-m-b" >
           <div class="card" style="max-width: 367px;" onclick="submitForm()">
               <img src="images/half-price-burgers.jpg" class="card-img-top absolute" alt="Card Image"/>
                   <div class="card-block" style="transform: scale(1);">
                     <h4 class="card-title" style="transform: scale(1);">Sample Title</h4>
                     <p class="card-text" style="transform: scale(1);">Sample Text Description Lorem Ipsum Do</p>
                   </div>
           </div>
        </section>
</form>

在getRecipe.js中，这是以下代码：

function submitForm() {
document.getElementById('recipeForm').submit();
}

我似乎无法弄清楚为什么这样做，因为我确定命名惯例是正确的。当我为其分配ID时，为什么对象为null？

我不确定是否值得一提，但清楚地运行代码" getElementById（recipeform）"返回null。我似乎不知道为什么。

这是带有我的HTML代码的Pastebin文件：https://pastebin.com/dcungccf

这是getRecipe.js文件中的内容：https://pastebin.com/rrgaylyh

Answer 1

javascript

function submitForm() {
    document.getElementById('recipeForm').submit();
}

或

以表格标签的 name属性。

html

<form action="recipe.html" id="recipeForm" name="chicken_recipe"> 
</form>

javascript

function submitForm() {
    document.chicken_recipe.submit();
}

jQuery

您可以使用jQuery直接在元素ID上调用submit()。

function submitForm() {
$('#recipeForm').submit();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="recipe.html" id="recipeForm" name="chicken_recipe"> 
   <input type='hidden' name='recipename' value='Chicken Pot Pie'>
        <section class="col-4 popOut row-m-b" >
           <div class="card" style="max-width: 367px;" onclick="submitForm()">
               <img src="images/half-price-burgers.jpg" class="card-img-top absolute" alt="Card Image"/>
                   <div class="card-block" style="transform: scale(1);">
                     <h4 class="card-title" style="transform: scale(1);">Sample Title</h4>
                     <p class="card-text" style="transform: scale(1);">Sample Text Description Lorem Ipsum Do</p>
                   </div>
           </div>
        </section>
</form>

Answer 2

您可以尝试以下代码。

function submitForm() {
document.getElementById('recipeForm')[0].submit();
}