最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Can you pause a form submission and then restart - Stack Overflow

programmeradmin7浏览0评论

Without using any JS libraries, is it possible to pause a form submission, run some code and then restart it?

Reason I ask is that I currently have a form that when it submits runs code that sends a request to my analytics provider. Works fine in Chrome/IE but in Firefox and Safari there is a drop out of these analytics of 60%.

The feeling is that the submission follows through before the scripts execute, hence why we are trying to pause the submit event.

Interested to hear any thoughts or insight.

Without using any JS libraries, is it possible to pause a form submission, run some code and then restart it?

Reason I ask is that I currently have a form that when it submits runs code that sends a request to my analytics provider. Works fine in Chrome/IE but in Firefox and Safari there is a drop out of these analytics of 60%.

The feeling is that the submission follows through before the scripts execute, hence why we are trying to pause the submit event.

Interested to hear any thoughts or insight.

Share Improve this question edited Apr 21, 2022 at 18:01 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Sep 7, 2011 at 8:16 user502014user502014 2,3315 gold badges24 silver badges32 bronze badges 1
  • A submit either fully succeeds or totally fails. It's a POST to the web server, if it doesn't arrive pletely, the server (as for Apache and IIS at least) won't process it. Can you explain the problem a bit clearer? – CodeCaster Commented Sep 7, 2011 at 8:18
Add a ment  | 

4 Answers 4

Reset to default 3

You can use the submit event to cancel the form submission, do your analytics ajax stuff, and then submit the form programmatically using the submit method on the form element.

For example (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 plete, submitting form");
        counter = undefined;
        form.submit();
      }
    }
  }

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

There I've used a count down timer rather than an ajax operation, but the principle is the same.


Off-topic: I've used the old DOM0 style of setting up an event handler there (form.onsubmit = ...). I don't remend it, but it keeps the example simple. Setting up event handlers is one of the places where a library like jQuery, Prototype, YUI, Closure, or any of several others can smooth over browser differences (and provide added functionality) for you, it's well worth considering using one.

Just place a button in place of the submit button that runs the analytics script as a function, then submit the form with

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

See this site How to submit a form through javascript.
Hope that helps.

You can listen to the submit event. Something like:

(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();
        }
    };
}());

You need to attach the function to run on event "onsubmit", return a false from the event handler if you want to cancel the form submission, or use below:

function onSubmitHandler(evnt){

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

}
发布评论

评论列表(0)

  1. 暂无评论