收听表单提交 - Javascript答案

【问题标题】：Listengin to Form Submit - Javascript收听表单提交 - Javascript
【发布时间】：2020-10-24 01:34:54
【问题描述】：

我有一个表单，每当用户提交表单时我都会收听。我有两种提交表单的方式。

点击表单提交表单提交
当用户选择 li

当我点击表单按钮提交时，它被 File1.js 中的监听器检测到但是当用户点击 li 以执行函数 items_sold(event); 时，表单提交，但监听器不执行。

为什么会这样？

HTML

<form class="shop_form" id="shop_form" method="get">
  <input name="items" type="text" id="shop__items" />
  <ul class="list_of_items" id="list_of_items" onclick="items_sold(event);">
    <li>Nutella</li>
    <li>Sweet Jam</li>
  </ul>

  <button class="shop_btn" type="submit"></button>
</form>

File1.JS

document.getElementById('shop_form').addEventListener('submit', function(evt) {
  alert('Form Submitted')
})

File2.Js

function items_sold(event) {
  $('#shop_form').submit()
}

【问题讨论】：

改用function items_sold(event) { $('#shop_form .shop_btn').trigger('click'); }。
@CBroe ，当调用按钮时，这也适用于我

标签： javascript html jquery dom

【解决方案1】：

submit() 函数不会触发submit 事件，因此任何注册为在submit 事件上运行的回调函数都不会执行。

来自MDN - HTMLFormElement.submit():

此方法与激活表单的方法相似但不完全相同提交<button>。但是，当直接调用此方法时：

未引发提交事件。特别是，表单的 onsubmit 事件处理程序没有运行。

未触发约束验证。

使用requestSubmit() 函数代替submit() 函数。它将引发submit 事件。

更多详情请见HTMLFormElement.requestSubmit()

或者，您可以通过在 button 元素上调用 .click() 函数来提交表单

document.querySelector('.shop_btn').click();

.click()功能详情见HTMLElement.click()

【讨论】：

requestSubmit() 不再提交我的表单
谢谢。在按钮上调用 click() 可以正常工作。

【解决方案2】：

// convert this code 
        <ul class="list_of_items" id="list_of_items" onclick="items_sold(this.form);">

// then change the method defiantion like
function items_sold(form){
    form.submit();
}

//hope will help

【讨论】：