AJAX form not sending and has no error codes

Question

This is a problem that is really quite frustrating, I was using the iFrame method of sending a form to a hidden iFrame so data can be sent without leaving a page, that all worked but sometimes the form just wouldn't send. This happens from all network locations and is seemingly random.

So I have just changed the code to use the AJAX method of sending a form and exactly the same thing is happening, I can send form after form and about 1 in 20 just don't work.

var formElement = document.querySelector("#myform");
var request = new XMLHttpRequest();
request.open("POST", "php/upload.html");

request.send(new FormData(formElement));

request.onreadystatechange = function() {
console.log(request.readyState);
console.log(request.status);

};

So the code is very simple, for a successful upload all the statuses are reported but when it goes wrong absolutely nothing is logged. I have also put an e-mail notification on the form destination page and this doesn't get sent when the problem occurs. So I know when it goes wrong the page is not called at all.

What would be the best solution here, with no feedback from the AJAX request it is pretty difficult to work with, is the only solution to use a timer a keep checking a connection has been made?

Answer 1

You need to put onreadystatechange before send . Otherwise readystate might change before your handler is defined, so it will not detect the event. A successful send is likely to take at least a tiny bit of time to complete asynchronously, but a send which fails locally might fail synchronously, so you don't see the error.