I have a simple <form action='/a/url' method='POST' onSubmit='setInterval(update_progress, 1000)'.

The POST triggers a ~40 second operation, so update_progress 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 (Linux)
• my laptop's Chrome (Mac)
• my laptop's Edge (Windows)

But it won't increment on:

• my phone's Firefox (iPhone)
• my phone's Safari (iPhone)
• my laptop's Safari (Mac)

I've observed the same failure to update with simpler code, like this:

var update_progress = function(){
    console.log("here");
    document.getElementById("info").insertAdjacentHTML("afterend", "<h3>foo</h3>");
}

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?

*** UPDATE: Code to reproduce ***

<!--- templates/form.html --->

<script type="text/javascript">
    var update_progress = function(){
        var new_html = "<p>...</p>";
        document.getElementById("progress").insertAdjacentHTML("afterend", new_html);
    };
</script>

<form action="/long_request" method="POST" onsubmit="setInterval(update_progress, 1000)">
    <button type="submit">submit</button>
</form>

<div id="progress"></div>

# ==> app.py <==

import time
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/long_request", methods=["POST"])
def long_request():
    time.sleep(5) # 5 seconds
    return "im done"

@app.route("/form", methods=["GET"])
def page_form():
    return render_template("form.html")