Flask and Fetch() - keep loading a new blank html instead of updating current page

I am trying to write a text-based Pokemon game using Python and Flask. I would like the user to be able to choose their Pokemon by clicking a button on the webpage, this user_pokemon_name variable to be sent to the backend and then update the webpage with various stats about the Pokemon. The game would then continue, with new buttons and new messages being displayed.

The problem I am facing is that once the user clicks the button, a new HTML page is loaded at the same url with the response in the body.

Here is my app.py code:

from flask import Flask, render_template, request

app = Flask(__name__ ,
            static_url_path='',
            static_folder='../frontend/static',
            template_folder='../frontend/templates')

@app.route("/battle")
def battle_page():
    return render_template('battle.html')

@app.route("/battle", methods=['POST'])
def get_user_choice():
    user_pokemon_name = request.form['userPokemonChoice']
    print(user_pokemon_name)
    user_choice = f"You have chosen {user_pokemon_name.capitalize()}."
    return user_choice

Here is my battle.html code:

<body>
        <section id= "userPokemonChoice">
            <p>Now, which Pokemon do you want? The three available Pokemon are Bulbasaur, Charmander, and Squirtle.</p>
            <form class = "userinput" method ="POST" action="/battle" id = "form"> 
                <button type = "submit" name = "userPokemonChoice" value="bulbasaur" id="choosePokemon" onclick="getUserChoice()">Bulbasaur</button>
                <button type = "submit" name = "userPokemonChoice" value="charmander" id="choosePokemon" onclick="getUserChoice()">Charmander</button>
                <button type = "submit" name = "userPokemonChoice" value="squirtle" id="choosePokemon" onclick="getUserChoice()">Squirtle</button>    
            </form>
        </section>

        <section id="stats"></section>

Here is my battle.js code

// const form = document.getElementById('form')
// form.addEventListener('submit', (e) => {
//     e.preventDefault()
//     
// })


function getUserChoice() {
    const url = 'http://127.0.0.1:5001/battle'
    fetch(url)
    .then(response => response)  
    .then(data => {
        
        console.log(data.text);
        document.getElementById("stats").innerHTML = data
    })    
}

When I run the code as it is, I get the following screen displayed:

blank html page with the response

If I uncomment the form event listener, I receive an [object Response] where I would like to see the response: object Response

Any help would be much appreciated - I have been going round in circles with this!

Solution

By default, the entire page is reloaded when you submit the form. Your commented out code prevents the form from being submitted so that you can do this yourself using the Fetch call.

Fetch can send both a GET and a POST request. Your route expects a POST request with form data. However, you are currently sending a GET request without data. If the request is made correctly, the client receives a response, which can be in various formats. In your case, it is a text. So after receiving it, the text must be read from the response.

The following code should send the content of the pressed button in a form and display the received text within the page.

/** 
 *  battle.js
 */

const form = document.getElementById('form')
form.addEventListener('submit', function(e) {
    e.preventDefault();

    // Create a form with user input.
    const formData = new FormData(this); 
    // Add the name and value of the pressed button to the form.
    formData.append(e.submitter.name, e.submitter.value); 

    // Send a fetch request of type POST.
    const url = '/battle';
    fetch(url, { 
        method: 'post', 
        body: formData
    })
        .then(response => response.text()) // Read the response as text.
        .then(data => {
            console.log(data);
            document.getElementById('stats').innerText = data
        });

});