javascript: Internet Explorer not sending ajax call before form submit/page unload

Question

Trying to send AJAX POST on form submit. Already have a code working in all browsers except IE.

Working code (except IE)

$('form').one("submit", function(e) {                   
    $.ajax(
     {
       url : url,
       type: "POST",
       data : data,
       async: false,
       complete: function() {  
       return true;
      }
     });  
    });

Tried almost everything I can, like onunload and onbeforeunload, and obviously the general onsubmit (both native Javascript and jQuery methods). But IE won't wait for AJAX calls to finish and loads the form action page.

onbeforeunload would make it wait, but bring a dialogue confirmation box (which I am not willing to show).

Also, async:false doesn't work on IE. I can't use HTTPRequest as the request is cross domain. Again, XDomainRequest is asynchronous, so even that is not useful.

Other ways, like event.preventDefault() won't submit the form after callback.

Note: The form on the page is submitted after successful validation with native submit function. I can't mess that code because it belongs to our client, and we are loading our code asynchronously.

Already checked links: using onbefore unload onbeforeunload with timeout

EduSanCon · Answer 1 · 2014-07-21T07:15:30.227

1

change the submit and put a button instead. and change the event:

$('#submitbuttonid').on("click", function(e) {  
    e.preventDefault()                 
    $.ajax(
    {
         url : url,
         type: "POST",
         data : data
         complete: function() {  
             $('form').submit();
         }
    });  
});

edited Jul 21 '14 at 07:15

answered Jul 20 '14 at 20:37

EduSanCon

1,021
8
9

Hi, thanks for the answer. Issue is not with the event. async:false is not working in IE. Please check at your end too. – Utkarsh Mishra Jul 20 '14 at 20:49
But with this, you don't have to set async to false. The form won't submit until ajax get a response. making sure that the button is not a sumbit button – EduSanCon Jul 20 '14 at 22:00
Thing is, my code is loaded asynchronously over the client's end, like google does. So I won't be able to change it to button. Although that can be done using javascript, but it won't be a solution for me. – Utkarsh Mishra Jul 21 '14 at 04:41
And what about preventDefault() on click, and submit on complete callback? I've edited my solution – EduSanCon Jul 21 '14 at 07:14
This would work in Chrome, FF, but not in IE. I have created a [fiddle](http://jsfiddle.net/Bt2V9/23/), you may cross check in IE. – Utkarsh Mishra Jul 21 '14 at 09:52
Also, I haven't added e.preventDefault(), as it disabling submit completely. Funny thing, the ajax's complete: function() {} is getting called, but the request is not sent. Tried the success: function() too. No success! (pun intended) – Utkarsh Mishra Jul 21 '14 at 10:02
Used a workaround, added the method as answer. Thanks for help. – Utkarsh Mishra Jul 21 '14 at 20:44

score 1 · Accepted Answer · answered Jul 21 '14 at 20:43

Had to ditch the general onsubmit/onclick based callback events. Used a workaround. Browsers can save data over the same window/tab using localStorage global object.

Therefore, on submit button click, saving data in localStorage object

$('input:image').click(function() {
//Yes, my client is using image as submit button. No biggie! 
//form data collection code here
localStorage.lc = JSON.stringify(data);
});

On next page (form's action page, my JS is again loaded). Therefore, I can check for the localStorage object, and send the POST data (Using XDomainRequest() due to Cross domain data transfer. Also note the XDomainRequest() needs to be written with all parameters, otherwise request may fail erratically - XDomainRequest Fix.

window.onload = function() {
 if(localStorage.hasOwnProperty('lc'))
 {
  if(localStorage.lc.length > 0)
  {     
    dataStr = "";
    var lcData = JSON.parse(localStorage.lc);           
    for(var prop in lcData)
    {
      dataStr += "&" + prop + "=" + lcData[prop];
    }
    var url = "https://www.leadscapture.com/lead/track/trackId/" + lcData.trackId;
    var xdr = new XDomainRequest(); 
    xdr.open("POST", url);
    xdr.onload = function() {
      delete localStorage.lc;
    };
    xdr.onprogress = function(){ };
    xdr.ontimeout = function(){ };
    xdr.onerror = function () { };
    setTimeout(function(){
        xdr.send(dataStr.substring(1));
    }, 0);          
  }
}

byc · Answer 3 · 2014-07-20T20:49:54.130

0

Have you tried doing this:

$('#submitbuttonid').click(function() {                   
    $.ajax(
     {
       url : url,
       type: "POST",
       data : data,
       async: false,
       complete: function() {  
       return true;
      }
     });  
    });

It's not the prettiest solution, but it should work. Also, you misspelled on (one), and I don't see what the e in function(e) is doing.

EDIT Try this

$('form').submit(function() {                   
    $.ajax(
     {
       url : url,
       type: "POST",
       data : data,
       async: false,
       complete: function() {  
       return true;
      }
     });  
    });

edited Jul 20 '14 at 20:49

answered Jul 20 '14 at 20:37

byc

66
9

Hi, thanks for the answer. Using one instead of on, as the submit event was getting run repeatedly. Please ignore the e, was trying e.preventDefault() – Utkarsh Mishra Jul 20 '14 at 20:47
Tried button click event too, submit is not waiting for the event. Please note that event:false doesn't work in IE – Utkarsh Mishra Jul 20 '14 at 20:47
Have you read this? http://stackoverflow.com/questions/11487216/cors-with-jquery-and-xdomainrequest-in-ie8-9 – byc Jul 20 '14 at 20:51
Thanks, but unfortunately no results. Event is getting fired, but page won't wait for AJAX request. I can't even see the request in the network log. – Utkarsh Mishra Jul 20 '14 at 20:56

javascript: Internet Explorer not sending ajax call before form submit/page unload

3 Answers3