Flask wtforms, get data from the form, using it in a function and displaying the function result on the page

I'm very new in flask and I try to drag my app to web, I need help for this. Please explain how I can use my function( get_result() ) to then return and display the result on the page.

main.py:

from flask import Flask, render_template, request
from form import SetsForm
from main_functions.get_res import get_result

import os
from dotenv import load_dotenv

load_dotenv()
KEY = os.getenv("KEY")

app = Flask(__name__)
app.config\['SECRET_KEY'\] = KEY

@app.route('/', methods=\['GET', 'POST'\])
def index():
form = SetsForm()
print('Before get result')  # This is printing

    if request.method == 'POST' and form.validate_on_submit():
        a = form.user_a_value.data
        b = form.user_b_value.data
    
        res_merge_a_b, res_intersection_a_b, res_difference_a_b, res_symm_diff_a_b = get_result(a, b)
    
        print(res_merge_a_b, res_intersection_a_b, res_difference_a_b,
              res_symm_diff_a_b)  # This isn't printing(idk why)
    
        return render_template('index.html', form=form,
                               res_merge_a_b=res_merge_a_b,
                               res_intersection_a_b=res_intersection_a_b,
                               res_difference_a_b=res_difference_a_b,
                               res_symm_diff_a_b=res_symm_diff_a_b)
    
    return render_template('index.html', form=form)

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

get_res.py:

from operations_functions.a_merge_b import merge_a_b
from operations_functions.a_intersection_b import intersection_a_b
from operations_functions.a_difference_b import difference_a_b
from operations_functions.a_symmetrical_difference_b import symmetrical_difference_a_b


def get_result(a, b):
    res_merge_a_b = merge_a_b(a, b)
    res_intersection_a_b = intersection_a_b(a, b)
    res_difference_a_b = difference_a_b(a, b)
    res_symm_diff_a_b = symmetrical_difference_a_b(a, b)

    res_merge_a_b = ', '.join(str(x) for x in res_merge_a_b)
    res_intersection_a_b = ', '.join(str(x) for x in res_intersection_a_b)
    res_difference_a_b = ', '.join(str(x) for x in res_difference_a_b)
    res_symm_diff_a_b = ', '.join(str(x) for x in res_symm_diff_a_b)

    return res_merge_a_b, res_intersection_a_b, res_difference_a_b, res_symm_diff_a_b

form.py:

from wtforms import IntegerField, StringField, FloatField, SubmitField


class SetsForm(FlaskForm):
    user_a_value = FloatField('A = ')
    user_b_value = FloatField('B = ')

    user_submit_btn = SubmitField('Get Res')

index.html:

{% extends 'base.html' %}

{% block body %}
<section class="main_section">

    <div class="container">

        <!-- Title -->
        <div class="main_title">
            <h1>Enter Sets</h1>
        </div>

        <!-- Form With User Data and Submit Btn, like user input a/b -->
        <form action="{{ url_for('index') }}" method="post">

            <!-- Button -->
            <div class="user_submit">
                {{form.user_submit_btn()}} <br>
            </div>

            <!-- User data A -->
            <div class="user_data_A">
                {{form.user_a_value.label}}
                {{form.user_a_value(size=30)}}
            </div>

            <!-- User data B -->
            <div class="user_data_B">
                {{form.user_b_value.label}}
                {{form.user_b_value(size=30)}}
            </div>
        </form>

        <!-- Result Block -->
        <div class="result">
            <!-- Result Merge -->
            <div class="result_merge">
                <h5>A ⋃ B = {{ res_merge_a_b }}</h5>
            </div>

            <!-- Result Intersection -->
            <div class="result_intersection">
                <h5>A ⋂ B = {{ res_intersection_a_b }}</h5>
            </div>

            <!-- Result Difference -->
            <div class="result_difference">
                <h5>A \ B = {{ res_difference_a_b }}</h5>
            </div>

            <!-- Result Symmetrical Difference -->
            <div class="result_symmetrical_difference">
                <h5>A △ B = {{ res_symm_diff_a_b }}</h5>
            </div>

        </div>

    </div>

</section>
{% endblock %}

I expected that I would simply receive the user’s data and put it into a function to get the result, return it and output it in the block I needed, but apparently I’m doing something wrong. Also, the only thing I get in the console (in IDE) is this:

C:\Users\Iwlj4s\Desktop\pm\operations_on_sets_web\.venv\Scripts\python.exe C:\Users\Iwlj4s\Desktop\pm\operations_on_sets_web\main.py 
 * Serving Flask app 'main'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 245-522-682
Before get result
127.0.0.1 - - [20/Dec/2023 19:39:33] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [20/Dec/2023 19:39:33] "GET /static/css/main.css HTTP/1.1" 304 -
127.0.0.1 - - [20/Dec/2023 19:39:36] "POST / HTTP/1.1" 200 -
Before get result
127.0.0.1 - - [20/Dec/2023 19:39:37] "GET /static/css/main.css HTTP/1.1" 304 -

img of this: console

Please tell me what and how do I need to fix to implement the desired functionality?

Solution

I assume you forgot the CSRF token within the template. For this reason the validation fails.

<form action="{{ url_for('index') }}" method="post">
    {{ form.csrf_token }}

    <!-- Button -->
    <div class="user_submit">
        {{form.user_submit_btn()}}
    </div>

    <!-- User data A -->
    <div class="user_data_A">
        {{form.user_a_value.label}}
        {{form.user_a_value(size=30)}}
    </div>

    <!-- User data B -->
    <div class="user_data_B">
        {{form.user_b_value.label}}
        {{form.user_b_value(size=30)}}
    </div>
</form>