javascript - 你能暂停表单提交然后重新启动吗

Question

在不使用任何 JS 库的情况下，是否可以暂停表单提交，运行一些代码然后重新启动它？

我问的原因是我目前有一个表单，当它提交时运行代码向我的分析提供商发送请求。在 Chrome/IE 中运行良好，但在 Firefox 和 Safari 中，这些分析结果下降了 60%。

感觉是提交在脚本执行之前完成，因此我们尝试暂停提交事件。

有兴趣听取任何想法或见解。

Answer 1

您可以使用 submit 事件取消表单提交，执行您的分析 ajax 操作，然后使用 上的 submit 方法以编程方式提交表单表单元素。

例如 ( live copy ):

HTML:

<form id="theForm" action="#" method="GET">
  <label>Field: <input type="text" name="theField"></label>
  <br><input type="submit" value="Submit">
</form>

JavaScript:

window.onload = function() {
  var form, counter;

  form = document.getElementById("theForm");
  form.onsubmit = function() {
    if (typeof counter === "undefined") {
      display("Starting count down (" + counter + ")");
      counter = 3;
      setTimeout(delayedSubmit, 1000);
    }
    display("Cancelling form submit");
    return false;
  };

  function delayedSubmit() {
    if (typeof counter === "number") {
      --counter;
      if (counter > 0) {
        display("Continuing count down (" + counter + ")");
        setTimeout(delayedSubmit, 1000);
      }
      else {
        display("Count down complete, submitting form");
        counter = undefined;
        form.submit();
      }
    }
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
};

这里我使用了倒数计时器而不是 ajax 操作，但原理是一样的。

---

题外话:我使用旧的 DOM0 样式在那里设置事件处理程序 (form.onsubmit = ...)。我不推荐它，但它使示例保持简单。设置事件处理程序是像 jQuery 这样的库的地方之一。 , Prototype , YUI , Closure , 或 any of several others可以为您消除浏览器差异(并提供附加功能)，非常值得考虑使用一个。