CODEWITHSUNDEEP
htmlflaskwtforms
Anycorn
Anycorn

Reputation: 51445

Flask WTForms dynamic forms

I am new to HTML and trying to make quick form UI for Flask webservice. Form is derived from FlaskForm and generated using wtf.quick_form(...). What I would like to do is to show/hide additional fields/forms depending on selection in SelectField. Can someone provide me pointers or examples of doing this in simplest automatic manner? All i found so far involved fancy ajax queries and/or javascript.

I am ok with fetching new/updated form from Flask if i can make it happen automatically when a field in SelectField is clicked.

Upvotes: 0

Views: 380

Answers (2)

vendrediSurMer
vendrediSurMer

Reputation: 448

I've previously used an approach similar to the one below (it does rely on some simple JS)

run.py

class GraphicsForm(FlaskForm):
    choices = [("no", "No"), ("yes", "Yes")]
    select_graphics = SelectField(choices=choices)

# Plot parameters displayed only if 'yes' is selected to above.
class SubForm(FlaskForm):
    sub_choice = IntegerField("substrate_count", default=5)

@app.route("/upload", methods = ['GET', 'POST'])
def upload():
    sub_form = SubForm()
    plot_form = GraphicsForm()
    sub_choice = None
    select_graphics = None
    if request.method == 'POST':
        min_sub = sub_form.sub_choice.data
        graphics = plot_form.select_graphics.data
    return render_template("upload.html", sub_form=sub_form, plot_form=plot_form)

upload.html

  {{ plot_form.select_graphics(onchange="check_option();") }}

  {{ sub_form.sub_choice() }}

Some simple JS

# Displays plot-para field only if yes was selected to select-graphics field.
function check_option() {
    if(document.getElementById('select_graphics').value == "no"){
        document.getElementById('plot-para').style.display = 'none';
  } else {
        document.getElementById('plot-para').style.display = 'block';
    }
}

Upvotes: 1

Mikhail Savushkin
Mikhail Savushkin

Reputation: 534

Since you want to show/hide some fields in the browser, and, most likely, without sending this form, then will have to do with some JavaScript anyways, since its a frontend field of responsibility.

You may wanna look at jQuery to toggle your fields manually, or go for Bootstrap4 with some plugins, which will also provide you with some nice look.

Upvotes: 0

Related Questions