I have a simple <form action='/a/url' method='POST' onSubmit='setInterval(my_func, 1000)'.
The POST triggers a ~40 second operation, so my_func is updating an HTML progress bar with the estimated time remaining, to keep it simple.
When I visit the site in production, the progress bar works fine on:
- my laptop’s Firefox
- my laptop’s Chrome
But it won’t increment on:
- my phone’s Firefox
- my phone’s Safari
- my laptop’s Safari
In Safari, for example, I can confirm that a console.log is firing 1x per second, so the JS is running. I thought it might be an issue with progress bar compatibility, so I just used a_div.insertAdjacentHTML('afterend', '<h3>foo</h3>'). Again, this works in Firefox/Chrome, but not in the others.
In all browsers, the form submits and the user is eventually brought to the next page.
Do some browsers not allow updating elements after submitting the form?