Question

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

我问的原因是我目前有一个表单，当它提交运行代码时，会向我的分析提供商发送请求。在chrome / IE中运行良好，但在FF和Safari中，这些分析的丢失率为60％。

感觉是在脚本执行之前提交了提交，因此我们试图暂停提交事件的原因。

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

提前致谢

Answer 1

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

例如（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等库可以平滑浏览器差异的地方之一（以及为您提供附加功能），值得考虑使用它。

Answer 2

只需放置一个按钮代替将分析脚本作为函数运行的提交按钮，然后使用

提交表单

document.forms["myform"].submit();

查看此网站How to submit a form through javascript 希望有所帮助。

Answer 3

您可以收听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();
        }
    };
}());

Answer 4

您需要附加要在事件"onsubmit"上运行的函数，如果要取消表单提交，请从事件处理程序返回false，或使用以下内容：

function onSubmitHandler(evnt){

//run some code set some flag
if(flag is set) evnt.preventDefault(); else return true;

}

Javascript - 您可以暂停表单提交然后重新启动

4 个答案: