通过javascript提交HTML表单并防止默认答案

【问题标题】：Submit an HTML form by javascript and prevent default通过javascript提交HTML表单并防止默认
【发布时间】：2021-01-30 00:02:08
【问题描述】：

我正在使用一个用 javascript 构建的虚拟键盘，用于在嵌入式系统上运行的用户界面。

虚拟键盘的源代码可以在这里找到：https://codepen.io/dcode-software/pen/KYYKxP

我只更改了源代码中的一个部分。 Keyboard.js 文件第 141-151 行：

case "enter":
          keyElement.classList.add("keyboard__key--wide");
          keyElement.innerHTML = createIconHTML("Enter");

          keyElement.addEventListener("click", () => {
            this.properties.value += "\n";
            this._triggerEvent("oninput");
            /**
             * The part that i modified
             */
            document.querySelector("form").submit();
          });

          break;

基本上，我在这里要做的是在虚拟键盘上按下“enter”键时在当前页面上提交表单。（效果很好）

但我也想阻止这个提交事件的默认值。 (e.preventDefault()) 那么我该如何实现呢？感谢您的帮助。

编辑：我已经在提交函数中添加了e.preventDefault()。这是我处理登录表单提交的代码：

//Login
const loginForm = document.querySelector("#login-form");
loginForm.addEventListener("submit", async (e) => {
  e.preventDefault();

  const errorContainer = document.querySelector("#login-form-message");

  errorContainer.innerHTML = "";

  try {
    //Submitting form
  } catch (error) {
    //Handle error
  }
});

【问题讨论】：

尝试删除此行this.properties.value += "\n";
@firatozcevahir 我已经尝试过了，但这没关系。谢谢你

标签： javascript html forms dom events

【解决方案1】：

我是在阅读 MDN 文档后找到的。

这是HTMLFormElement.submit() 文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

这篇文档很好地解释了我为什么会遇到这个问题。

总而言之，我需要使用requestSubmit () 函数而不是submit () 函数，因为submit() 函数不会触发submit 事件。

HTMLFormElement.requestSubmit() 文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit

【讨论】：