Passing SelectField value from javascript to flask while using flask-bootstrap

How to Pass javascript variables to flask?

I have a Flask Form created with few SelectFields, on change event I have JavaScript used to capture the selected value and store in a global variable before form submission. How do I pass this global variable value captured inside section.

I am learning and experimenting with Flask, Python, and JavaScript programming.

I have created a Flask Form to take the selected choice list values by User and have Submit button as well. In order to create a dependent Select Field I am writing JavaScript on change functions and want to pass this selected Field value before Submit to Flask so that I can filter into database for the next choice list value based on passed value.

Flask Code:

@app.route("/userForm", methods=['GET', 'POST']) 
def userForm(): 
    data = pd.read_excel('DataFile.xlsx', sheet_name='Sheet1')

    form = UserForm()  
    
    form.company.choices = [("", "---")]+[(company, company) for company in data.Company.unique()]
    form.dept.choices = [("", "---")]+[(dept, dept) for dept in data.Department.unique()]   

    return render_template('UserForm.html', data=data, form=form)

UserForm.html with javaScript code

{% extends "layout.html" %}
{% block content %}  
    <div class="content-section">
        <form method="POST" action="/api">
            <!-- Below tag is important to validate on submit message -->
            {{ form.csrf_token }} 
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Agent Assignment</legend>
                <div class="form-group">
                    {{ form.company.label(class="form-control-label") }}
                    {{ form.company(class="form-control form-control-lg") }} 
                </div>
                <div class="form-group">
                    {{ form.dept.label(class="form-control-label") }}
                    {{ form.dept(class="form-control form-control-lg") }} 
                </div> 
            </fieldset>
            <div class="form-group">
                {{ form.submit(class="btn btn-outline-info")}}
            </div>
        </form> 
    </div> 
    <script>
        const company = document.querySelector('#company');
        const dept = document.querySelector('#dept'); 

        let selectedCompany = '';
        let selectedDept = '';  

        company.addEventListener('change', (e) => {
            selectedCompany = e.target.value; 
        });

        dept.addEventListener('change', (e) => {
            selectedDept = e.target.value; 
        });
    </script>
{% endblock content %}

I expect to get selectedCompany, selectedDept global variables values (on change event) into my Flask userForm() python function before Submit in UI.

I don't know how to get it in Flask from JavaScript. Please suggest.