javascript - 将事件监听器添加到表单中的提交按钮

Question

我有一个带有提交按钮的表单，用于将表单数据发送到下一页。到目前为止，一切都很好。但现在当用户提交表单时应该执行一些 javascript 代码(出于跟踪原因)。所以我尝试设置一个事件监听器。问题是:有时代码会执行，有时会被忽略。

我设置了一个超时，发现所有大于 15 毫秒的超时都不会执行代码，并且浏览器已经在 form_test.html 页面上。

//secTimeout = 15;
button = document.getElementById('submitbutton');
button.addEventListener("click", function() {
  // setTimeout(function(){
  //   console.log('log after ' + secTimeout + 'ms');
  // }, secTimeout);

  // execute tracking tool
});

<form id="form1" action="form_test.html">
  <input type="text" name="text1">
  <input type="text" name="text2">
  <input type="text" name="text3">
  <input type="submit" id="submitbutton">
</form>

确保 js 代码每次都能运行的好方法是什么？

Answer 1

添加跟踪功能的最佳方法是以编程方式处理提交。因此，使用 a 并从 this 中获得灵感。通过以编程方式发送表单，您可以在发送之前运行您想要的任何代码。

一个小例子:

<form id="form1" action="form_test.html">
  <input type="text" name="text1">
  <input type="text" name="text2">
  <input type="text" name="text3">
  <button id="submitbutton">
</form>


button = document.getElementById('submitbutton');
button.addEventListener("click", function() {
  // execute tracking tool
  document.form1.submit();
});