Creating a Dynamic Select Field With Flask-WTF and JavaScript

Pretty Printed · 105K views · 2018 · 19:35

Open on YouTube

Web developmentPython, Ruby & scripting languagestutorial

Why Stack Overflow recommends it

Stack Overflow users link it when asking how to make one WTForms SelectField's choices depend on another, since it walks through the route plus JavaScript pattern.

Recommended by 2 people across 2 different months, 2019 to 2022.

What it is

A Pretty Printed tutorial on building a dependent (dynamic) select field in Flask using Flask-WTF and JavaScript. It adds a Flask route that returns JSON and uses fetch in an onchange handler to populate a second dropdown.

What people said

Recommends Matteo Pasini · 2021-06 · Stack Overflow · on “How to pass two arguments to a python function that is being called by ajax function?”

If you need to know ho to retrieve your playlist id and song id after button press from your html page take a look at this: [this video]

Recommends vondravl · 2022-05 · Stack Overflow · on “how to create 2 select fields with dependency in each other wtf_forms flask”

I personally didn't find quite straightforward solution to this in flask. In my project I'm using method from this [this video] tutorial. create route which return jsonify create javascript onchange event which will populate second select field All you need is in linked video.

Cites Soon Hang · 2019-05 · Stack Overflow · on “How can I generate dynamic select fields on my webpage with column names and unique values from my dataframe?”

My web application is designed to allow users to upload their Excel files, which will then be read and convert into a DataFrame within my flask application. Subsequently, my application is supposed to filter the DataFrame to remove unnecessary records from the DataFrame. To do that, I am planning to set up 2 dynamic select fields: 1st Select field - contains a list of the column names from the dataframe 2nd Select field - corresponding unique values of the selected value in the 1st Select field. So how should I go about doing this?? I have watched a video that taught me how to use FlaskForm to do these dynamic fields. But I can't seemed to customize his ways to fit my [this video] Flask side code

Cites Deena · 2020-08 · Stack Overflow · on “validate WTForm after selectfield choices updated dynamically with jquery”

I am creating a flask app and I created a form using WTForms. The form has two SelectFields (dropdowns) and a submit button. I would like the dropdowns to be dynamic - basically, the user will select an option from dropdown A, this will trigger a database query in the background which will return the choices for dropdown B. I have found some good solutions for this For example, this youtube video shows how to use javascript + WTForms to achieve this [this video] and this stackoverflow question uses jquery and regular forms. [LINK] I ended up using the second answer to the linked stackoverflow question to model my solution. The basic idea is that the jquery calls a flask endpoint which does the da

Cites Dariva · 2021-11 · Stack Overflow · on “WTF.forms "Not a Valid Choice" error for SelectField dynamically updated”

I saw some similar question about this one but none of them had a clear answer. So I will try to make it clear as possible. I initially posted the question with peace of my real code which was not easy for someone to replicate as it depend on connection to Oracle Database connection. So I did a simplified version of it. So. First Things First. What I am doing is to creat a form with 4 SelectField using Flask. The choices for the first SelectField is defined in the class definition (in the view part). The choices of the other 3 SelecteFields are dynamically defined based on the choices of the previous fields. The problem is that when I submit the form I receive a "Not a valid choice" for thes