WTForms: how do I set a default value for an HTML5 Widget?

Question

I'm trying to use the WTForms color input field.

How can I set a default value (e.g. #ff0000) for the input field?

This is how I define the form:

from wtforms.widgets.html5 import ColorInput

class ColoursForm(Form):
   background_color = StringField(widget=ColorInput())

This is the view:

@app.route("/colours/<token>/", methods=['GET', 'POST'])
def edit_colours(token):
   form = ColoursForm(request.form)
   if request.method == 'GET':
      return render_template('colours_edit.html', form=form, token=token)
   else:  # Request = post
      return redirect(url_for('view_scoreboard', token=token))

In my Jinja2 Template (colours_edit.html) I do this:

<p> {{ form.background_color() }} Pick a color here </p>

It all works, but I don't know how to set a default value. What doesn't work is this in the form:

background_color = StringField(widget=ColorInput(), default="#ff00ff")

`return render_template('colors.html', form=form)` actually does work for me. Perhaps there's a mistake in how you pasted the example? — Ken Kinder, Aug 31 '20 at 14:56
I tried this on my own example and it didn't work. The question linked in my answer explores this more. Apparently this doesn't always work for some reason. — Salvatore, Sep 01 '20 at 21:28

Salvatore · Accepted Answer · 2020-09-02T21:14:42.127

One way to do this is to check and then set the data value in your view. Notice the two new lines after you get the form:

@app.route("/colours/<token>/", methods=['GET', 'POST'])
def edit_colours(token):
   form = ColoursForm(request.form)
   if not form.background_color.data:
       form.background_color.data = "#ff00ff"
   if request.method == 'GET':
       return render_template('colours_edit.html', form=form, token=token)
   else:  # Request = post
       return redirect(url_for('view_scoreboard', token=token))

No default:

Default #ff00ff:

Here is a minimal example for anyone else curious to try it out:

from flask import Flask, request, render_template
from wtforms.widgets.html5 import ColorInput
from wtforms import Form, StringField


class ColoursForm(Form):
    background_color = StringField(widget=ColorInput())


app = Flask(__name__)


@app.route("/")
def edit_colours():
    form = ColoursForm()
    if not form.background_color.data:
        form.background_color.data = "#ff00ff"
    if request.method == "GET":
        return render_template("colors_edit.html", form=form)

colors_edit.html is the same as OPs (make sure to put it in a templates folder):

<p> {{ form.background_color() }} Pick a color here </p>

I don't know why your first attempt at setting a default doesn't work. Didn't work for me either. It seems like it should. This answer dives in a little deeper.

It seems strange to me that there is no solution using the `default` keyword. But you earned your bounty anyway . Thanks! — caspii, Sep 02 '20 at 19:25

WTForms: how do I set a default value for an HTML5 Widget?

1 Answers1