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

admin管理员组

文章数量:1321045

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.

• javascript
• forms
• dom-events

Share Improve this question Follow edited Apr 21, 2022 at 18:01 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 7, 2011 at 8:16 user502014user502014 2,33155 gold badges2424 silver badges3232 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

Sorted by: 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;

}

本文标签： javascriptCan you pause a form submission and then restartStack Overflow