0

Does any browser support a JS API to query the status of submitting a form? I would like to add generic code to our application that monitors any submitted form and displays a progress bar for the form. Origin server cannot report the status if there's buffering reverse proxy between client and the origin server (e.g. Cloudflare) so I would need something supported by the client.

Assume that I run code document.getElementById("myForm").submit();. Is there any way to figure out how much of the form has been submitted? The client obviously knows the exact byte count it will be sending so it should be able to report how much (count of bytes or a percentage) of the full transfer has been pushed to net socket. I understand that this is not the same as getting the data to the origin server but I'm not interested on that. I would like to support long forms (lots of text over very slow internet connection) and forms with huge files (files bigger than 2 GB over fast internet connection).

Update: I asked about this on WHATWG mailing list. I believe the best answer this far is https://stackoverflow.com/a/28386477/334451 which does not deal great with HTTP 303 but should be otherwise okay.

Community
  • 1
  • 1
Mikko Rantalainen
  • 11,523
  • 10
  • 66
  • 98
  • Are you using AJAX or normal form submit ? – Shakti Phartiyal Apr 11 '17 at 06:17
  • Possible duplicate of [Displaying a progress bar showing the progress of a form submission](http://stackoverflow.com/questions/21902385/displaying-a-progress-bar-showing-the-progress-of-a-form-submission) – Arg0n Apr 11 '17 at 06:20
  • https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress – jeremiah.trein Apr 11 '17 at 06:21
  • @ShaktiPhartiyal I'd prefer normal form submit but still follow the progress. However, I'm willing to implement this with AJAX if that's the only way to make it work. – Mikko Rantalainen Apr 11 '17 at 11:27
  • @Arg0n: I don't think this is a duplicate because I'm trying to specifically send a native `
    ` element. I'd like to use JS only to improve the UI but be able to submit the form without server modifications. In practice, I'd need to be able to submit files, too. And correctly handle any possible HTTP 303 responses. I believe that Ajax/XHR does not handle the HTTP 303 very well.
     – Mikko Rantalainen Apr 18 '17 at 12:52

0 Answers0