Update Button text on submit for long loading time

Question

I have a flask application, and I would like to update button text on submit. The function is generating a key & csr using openssl, so it takes some time. I would like to have a message of some sort alerting the user it is processing after the submit button is clicked. However, the way I have my function it renders the page after the csr/key is generated. Need some assistance.

I tried updating the label.text on submit, but again it wont render it till the csr/key are generated.

@app.route('/submit_csr', methods=['GET', 'POST'])
def submit_csr():
    form = RequestCSRForm()
        if form.validate_on_submit():
            form.submit.label.text = 'Generating...'
            os.system("openssl req -out {0}/{1}/{1}.csr -new -newkey rsa:4096 -nodes -keyout {0}/{1}/{1}.key -subj {2} > /dev/null 2>&1".format(...)
            return render_template("csr.html", content=content, message="Please copy your CSR below for: ", value=form.common_name.data)
    return render_template('index.html', title='Request CSR', form=form)

Answer 1

You can use JavaScript to change the button text when the form is submitted.

Example

index.html

<form action="/" method="post">
<input id="mybutton" value="submit" name="submit1" type="submit" onclick="return showloading();">
</form>
<script>
function showloading() {
  var button= document.getElementById('mybutton');
  button.value = 'loading..';
}
</script>

app.py

from flask import Flask,request,render_template
import time
app = Flask(__name__)
app.secret_key = b'yoursecret key/'

@app.route('/',methods=['GET','POST'])
def index():
    if request.method == 'POST' and 'submit1' in request.form:
        time.sleep(10)
        return "Done"
    return render_template('index.html')

When the submit button is pressed it calls the showloading function which changes the button value to loading...