How to fill QuerySelectField based on Other QuerySelectField's selected value in Flask

Viewed 277

I created a WTForm. In that form two QuerySelectField are used for State Selection and District selection. I want to fill the District QuerySelectField based on State QuerySelectField's value. The following form i used in the project. Please guide me to do.

def district_choices():
    return District.query.all()

def state_choices():
    return State.query.all()

class CreateForm(FlaskForm):
    code = StringField('Code', validators=[DataRequired()])
    name = StringField('Name',validators=[validators.required(), validators.Length(max=32)])
    state = QuerySelectField('State',query_factory=state_choices, get_label='name', validators=[validators.required()])
    district = QuerySelectField('District',query_factory=district_choices, get_label='name', validators=[validators.required()])
1 Answers

When you populate the district select field, based on the previous selection, are you doing a redirect to a new page or is this to all happen on the same page? If so, JavaScript will need to be used.

For example. My solution looked like this... In the jinja file

<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

    <script>
        function makeChange() {
            var new_selection= $("#week_range_date").val();
            window.location.href = "/time_expenses/"+new_selection
        }

    </script>
</head>

{{ week_start_date_form.csrf_token }}
  <div onchange="makeChange()">
      Select Week to View &emsp; {{ week_start_date_form.week_range_date }}
  </div>

And then you need a route to catch your redirect from JavaScript like this.

@app.route("/time_expenses/<week_start_date>", methods=['GET', 'POST'])
def time_expenses(week_start_date):

And then send your parameter value to a form like this

    # create form for date range drop down
    WeekStartDateForm = inititalizeWeekStartDateForm(week_start_date)
    week_start_date_form = WeekStartDateForm()

And in your forms file you can do something like this

def inititalizeWeekStartDateForm(default_value):
    # do any logic here in order to create your values needed for choices and default value, you can then use them inside the class below
    class WeekStartDateForm(FlaskForm):
        week_range_date = SelectField('Select Date Range', choices=created_dates, default=default_value)
    return WeekStartDateForm 

Edit:

In case it wasn't clear. Above when I said "# do any logic here" You need to do something like this

created_dates = []
table_objects = TableName.query.filter_by(condition_here="value_here").all()
for table_object in table_objects:
    created_dates.append(table_object.column_name)

^^Doing this you can grab all the values you want for a given column in a table and throw them into a list and use them as your choices for your dropdown for your SELECT FIELD. Then do something like created_dates[0] for your default value, or some other determination, or just don't provide a default value and it will automatically be the first one in the list.

Related