您可以暂停表单提交然后重新启动吗?

Can you pause a form submission and then restart

本文关键字：重新启动 然后 表单提交 暂停      更新时间：2023-09-26

不使用任何JS库，是否有可能暂停表单提交，运行一些代码，然后重新启动它?

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

给人的感觉是，在脚本执行之前，提交就已经完成了，这就是为什么我们要暂停提交事件。

有兴趣听听你的想法或见解

您可以使用submit事件来取消表单提交，做您的分析ajax的东西，然后使用form元素上的submit方法以编程方式提交表单。

例如(活拷贝):

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或其他几个库可以为您消除浏览器差异(并提供附加功能)的地方之一，因此非常值得考虑使用一个。

在提交按钮的位置放置一个按钮，该按钮将运行分析脚本作为一个函数，然后使用

提交表单
document.forms["myform"].submit();

查看这个网站如何通过javascript提交表单。

可以监听submit事件。比如:

(function() {
    var processed = false;
    form.onsubmit = function(event) {
        event = event || window.event;
        if(!processed) {
            if(event.preventDefault) {      // cancel default action
                event.preventDefault();
            }
            else {
                event.returnValue = false;
            }
            // run your code
            // execute the next two lines in a callback if necessary
            processed = true;
            form.submit();
        }
    };
}());

您需要附加该函数以在事件"onsubmit"上运行，如果您想取消表单提交，则从事件处理程序返回false，或者使用以下方法:

function onSubmitHandler(evnt){
//run some code set some flag
if(flag is set) evnt.preventDefault(); else return true;
}
相关文章：