javascriptpythonflask

Python Template overrides JavaScript Function


I have a button that submits a form to a flask server and runs a JS function. When the button is pressed the JS function runs, then it is overridden* by the flask render_template function. I need the form to be hidden after server-side proccessing is done and the analyse div to be unhidden.

HTML:

<div id="index">
    <form action="/analyse" method="post">
        <!-- Form and button --!>
        <input id="fileupload" type="file" accept=".xlsx, .xls" name="fileupload" />
        <input type="submit" class="button" value="Send to Server" onclick="hide()"/>
    </form>
</div>

<div id="analyse" class="hidden">
    <!-- The hidden items that will be visible after the submittion of the form --!>
</div>

JS Button Function:

// Function hides the form and unhides the 'analyse' div
// Another function reverses hide() function
function hide() {
    var index = document.getElementById('index');
    var analyse = document.getElementById('analyse');
    index.classList.add('hidden');
    analyse.classList.remove('hidden');
}

Server-side Python:

@app.route('/', methods=['GET','POST'])
def index():
    return render_template('index.html')

@app.route('/analyse', methods=['GET','POST'])
def analyse():
    # Validation and functions, etc.
    return render_template('index.html')

*The JS should hide the form but, the python makes it re-appear and hides the analyse div again (this is what I mean by override).


Solution

  • I created 2 files: index.html and analyse.html and each file will be displayed instead of hiding and showing a div, meaning there is no need for JavaScript.

    index.html:

    <div id="index">
        <form action="/analyse" method="post">
            <!-- Form and button --!>
            <input id="fileupload" type="file" accept=".xlsx, .xls" 
            name="fileupload" />
            <input type="submit" class="button" value="Send to Server" 
            onclick="hide()"/>
        </form>
    </div>
    

    analyse.html:

    <div id="analyse" class="hidden">
        <!-- The hidden items that will be visible after the submittion of the form --!>
    </div>
    

    Python:

    @app.route('/', methods=['GET','POST'])
    def index():
    return render_template('index.html')
    
    @app.route('/analyse', methods=['GET','POST'])
    def analyse():
    //Validation and functions, etc.
    return render_template('analyse.html')