表单提交时触发回调答案

【问题标题】：Trigger callback on form submit表单提交时触发回调
【发布时间】：2019-04-27 08:34:08
【问题描述】：

我遇到了一个问题，我正在做的是有一个<form>，它有一个<textarea>。我想要实现的是当用户按下Enter 键时在textarea 上，然后提交表单。

默认表单附带eventListener submit 并执行回调函数。

但问题是我想在 Enter 键上执行该回调。

我知道我可以通过使用 JQuery .submit(callback) 方法来实现相同的行为。

但是有没有办法在 Vanilla javascript 中重新触发相同的回调函数。

const submitForm = (event) => {
  event.preventDefault();
  alert('form is submitted!');
};

// Form Event
document.getElementById('form').addEventListener('submit', submitForm, false);

// Key Event
document.getElementById('textarea').addEventListener('keypress', (event) => {
  if (event.which === 13 || event.keyCode === 13) {
    event.preventDefault();
    // Form submit
  }
}, false);

* {
  box-sizing: border-box;
}

textarea {
  width: 380px;
  min-height: 210px;
  padding: 18px;
  font-size: 26px;
  margin-bottom: 16px;
  resize: vertical;
}

<form id="form" name="form">
  <label>
    <textarea id="textarea" name="message" placeholder="Type Here"></textarea>
  </label>
</form>

【问题讨论】：

在textarea中的enter键表示换行，你可以覆盖默认行为，可以让shift + enter换行，这样就可以了enter 表单已提交。参考这个link

标签： javascript

【解决方案1】：

表单标签需要有一个action，否则form.submit() 不会做任何事情。

<form id="form" name="form" action="/action_page.php" method="get">
    <label>
    <textarea id="textarea" name="message" placeholder="Type Here"></textarea></label>
  <input type="submit">
</form>

这个JS会在回车时调用提交

let form = document.getElementById('form')
form.addEventListener('submit', submitForm);

document.getElementById('textarea').addEventListener('keypress', (event) => {
    if (event.which == 13 || event.keyCode == 13) {
        event.preventDefault()
        form.submit()
    }
});

但真正的问题是form.submit() 不会引发onSubmit 事件！因此，当您以编程方式汇总表单时，不会调用您的 eventHandler。

来自 MDN

提交事件仅在用户单击表单中的提交按钮（或）时触发。直接调用 form.submit() 方法时不会引发该事件。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

【讨论】：

form.submit() 将执行默认表单行为，即重定向到页面。我们会阻止默认行为吗？
由于form.submit() 不会触发事件，我们不能使用preventDefault()。但问题是，如果您不想提交表单，为什么还要使用提交？如果您不想提交表单，您可以只使用普通按钮而不是提交按钮，并在按下回车键时处理您想要的文本区域。
我建议完全省略表单标签，只使用 javascript 来处理文本字段中发生的事情。如果按下回车键，您可以调用 AJAX 函数将数据发送到某处。 developer.mozilla.org/en-US/docs/Web/API/Fetch_API

【解决方案2】：

试试这样：

document.getElementById('textarea').addEventListener("keyup", function(event) {

if (event.keyCode === 13) {

  event.preventDefault();

  // do your thing here
  document.getElementById('form').submit();

  document.getElementById('testId').innerHTML = "it works!!!!"; // test

}


});

<!DOCTYPE html>
<html>
<body>
  
<form id="form" name="form" action="/your_page.aspx">
   <label><textarea id="textarea" name="message" placeholder="Type Here"></textarea></label>
</form>
  
<p id="testId"> </p>

</body>
</html>

【讨论】：

我也知道。你是说我在按键上附加了 eventListener。
是的。缺什么？我不太确定您要达到什么目标@VenNilson
您在服务器端使用了哪些技术？

【解决方案3】：

您可以设置一个变量来确定是否允许提交表单。

var allow_submit = false;

并修改表单的提交事件处理程序，以便在 allow_submit 变量不是 true 时调用 event.preventDefault()：

document.getElementsByTagName("form")[0].addEventListener("submit", function(event) {
  if (allow_submit !== true) {
    event.preventDefault();
  }
  // the form is allowed to submit, do stuff
});

然后监听keyup事件（在文本区域），如果按下回车键（键码13），将allow_submit设置为true并提交表单：

document.getElementsByTagName("textarea")[0].addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    allow_submit = true;
    document.getElementsByTagName("form")[0].submit();
  }
  // enter key wasn't pressed, do other suff
});

注意：您可能需要将allow_submit 变量设为全局变量，您可以通过将var 替换为window. 来实现，如下所示：

window.allow_submit = true;

注意：如果您要经常使用它们，您应该将表单和 textarea 元素存储在一个变量中。

祝你好运。

【讨论】：

这不起作用，因为使用form.submit()时没有调用提交事件处理程序
看来我犯了一个错误，在我写的第二个代码块中：document.getElementsByTagName("textarea")[0].submit(); 而不是document.getElementsByTagName("form")[0].submit();。你改了吗？如果没有，我已经编辑了我的答案，你应该再试一次。
另外，您的示例代码不包含form 的变量声明，该变量的值是多少？你确定你选择了正确的元素吗？
你能用 Ajax 吗？如果是这样，您可以从表单中删除 textarea，当按下回车键时，您可以创建对表单操作的 GET/POST 请求。
是的，最好的解决方案是在文本区域中按下回车键时调用 AJAX 函数，并省略表单标签，完全表单操作。