Sending User Input to Flask with JavaScript Fetch

The Problem with Standard HTML Forms

By default, when you put a text area and a button inside an HTML <form> tag, clicking the button will package up all the form's data and send it to the server. The problem? The browser then navigates away from the current page and waits for a brand new page from the server as a response. This full-page refresh is exactly what we want to avoid.

The Solution: Asynchronous Communication with fetch

To create a smoother experience, we can use JavaScript to take control of the submission process. Instead of letting the browser do its default refresh, we'll intercept the user's click, grab the data ourselves, and send it to the server quietly in the background.

The tool for this job is the fetch API. It's a modern feature built into all browsers that lets you make HTTP requests (like the ones we discussed in the last lesson) directly from your JavaScript code.

Let's walk through the three main parts of this process:

1. Client-Side (JavaScript): Capture the user's input.
2. Client-Side (JavaScript): Send the input to the server using fetch.
3. Server-Side (Flask): Receive and process the data.

Part 1: Capturing User Input with JavaScript

First, we need our JavaScript to run when the user clicks the submit button. We also need to tell the browser not to do its default page reload.

The following video explains this first step perfectly. It shows how to listen for a form's "submit" event and how to use event.preventDefault() to stop the refresh.

Once we've stopped the default refresh, we can grab the text from our text area. If our HTML text area has an ID like <textarea id="user-text"></textarea>, we can get its content in JavaScript like this:

const textArea = document.getElementById('user-text');
const userText = textArea.value;

Part 2: Sending Data to the Server with fetch

Now for the main event. With the user's text in a variable, we can use fetch to send it to a specific URL on our Flask server. Since we are sending data to create or process something, we'll use the POST method.

The fetch call for sending data looks like this:

// A JavaScript object to hold our data
const data = { 
    text: userText 
};

// The fetch request
fetch('/api/analyze', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
});

This might look complex, but each part has a clear purpose. The following article provides an excellent text-based breakdown of what each line does.

Here is a summary of those key fetch options:

• /api/analyze: This is the URL (or "endpoint") on our server that we are sending the data to. We will create this in Flask next.
• method: 'POST': We're telling the server that we are sending data, not just requesting a page.
• headers: { 'Content-Type': 'application/json' }: This is like a label on a package. It tells our Flask server that the data in the body is in JSON format. This is very important!
• body: JSON.stringify(data): The body contains the actual data. We must convert our JavaScript object into a JSON string before sending it over the network.

Part 3: Receiving Data in Flask

Our JavaScript is now sending data, but our Flask server doesn't know how to catch it yet. We need to create the /api/analyze endpoint and tell it to accept POST requests.

Inside our app.py, we can add a new route:

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# ... (our existing @app.route('/') route) ...

@app.route('/api/analyze', methods=['POST'])
def analyze_text():
    # 1. Get the JSON data sent from the JavaScript
    data = request.get_json()
    
    # 2. Extract the text from the data
    text_from_user = data['text']
    
    # For now, let's just print it to our terminal to see if it worked
    print(f"Received text: {text_from_user}")
    
    # 3. Send a confirmation response back to the client
    return jsonify({'status': 'success', 'message': 'Text received!'})

The key parts here are:

1. methods=['POST']: This explicitly allows this route to handle POST requests.
2. request.get_json(): Flask's request object has a handy .get_json() method that automatically parses the JSON data sent by our fetch call into a Python dictionary.

To see the official pattern for this, you can check Flask's own documentation.

Putting It All Together

Let's combine everything into a working example. Update your project with the following files.

1. app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# Route to serve the main HTML page
@app.route('/')
def home():
    return render_template('index.html')

# API endpoint to handle the text analysis
@app.route('/api/analyze', methods=['POST'])
def analyze_text():
    data = request.get_json()
    text_from_user = data.get('text', '') # Use .get for safety

    print(f"Received text: {text_from_user}")

    # For now, just send a simple success message back
    response_data = {
        'status': 'success',
        'received_text': text_from_user
    }
    return jsonify(response_data)

if __name__ == '__main__':
    app.run(debug=True)

2. templates/index.html
Make sure you have a form with an id, a textarea, a button, and a <script> tag to link your JavaScript file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Writing Assistant</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
    <main>
        <h1>AI Writing Assistant</h1>
        <form id="text-form">
            <textarea id="user-text" placeholder="Enter your text here..."></textarea>
            <button type="submit">Analyze Text</button>
        </form>
    </main>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>

3. static/js/script.js
Create a new folder named js inside your static folder, and inside js, create a file named script.js.

document.addEventListener('DOMContentLoaded', () => {
    const textForm = document.getElementById('text-form');

    textForm.addEventListener('submit', (event) => {
        // Prevent the default form submission (page reload)
        event.preventDefault();

        // Get the text from the textarea
        const userText = document.getElementById('user-text').value;

        // Prepare the data to be sent
        const data = { text: userText };

        // Send the data to the Flask backend
        fetch('/api/analyze', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            // Log the response from the server to the browser's console
            console.log('Success:', data);
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    });
});

How to Check If It Works

Now, run your app.py file and open your browser to http://127.0.0.1:5000. How can you tell if the client and server are talking?

1. Check the Server Terminal: Type something in the text box and click "Analyze Text". Look at the terminal where you ran python app.py. You should see the print() message showing the text you entered.
2. Use Browser Dev Tools: In your browser, open the Developer Tools (usually by pressing F12 or right-clicking and selecting "Inspect"). Go to the Network tab. Now, click the "Analyze Text" button again. You should see a new entry appear named analyze. Click on it. You can inspect its "Payload" to see the JSON data you sent.

This video gives a quick visual guide on using the Network tab.

@app.route('/api/analyze', methods=['POST'])
def analyze_text():
    data = request.get_json()
    text_from_user = data.get('text', '')

    # Convert the text to uppercase
    processed_text = text_from_user.upper()

    print(f"Received: '{text_from_user}', Sent back: '{processed_text}'")

    response_data = {
        'status': 'success',
        'processed_text': processed_text  # Send the new uppercase text
    }
    return jsonify(response_data)

Conclusion

Fantastic work! This was a huge step. You've successfully built a communication channel between your user's browser and your Python backend.

Key Takeaways:

• You can prevent a form's default page-reloading behavior using event.preventDefault() in JavaScript.
• The fetch API allows you to send HTTP requests from the browser to the server in the background.
• To send data, you use the POST method and include your data in the body of the request.
• Data sent over the network should be in a universal format like JSON. You use JSON.stringify() in JavaScript to create it.
• In Flask, you define an endpoint with methods=['POST'] and use request.get_json() to receive and parse the data.

You have now built the most critical piece of infrastructure for our web application. In the next lesson, we will complete the loop. You'll learn how to take the JSON response from Flask and use it to dynamically update the webpage with the results, without ever needing a page refresh.