Can you pause a form submission and then restart

Question

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.

Answer 1

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 complete, 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 recommend 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.

Answer 2

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.

Answer 3

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

Answer 4

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;

}