Menu
I'm trying to display the slider value alongside my wtforms.fields.html5.DecimalRangeField. My current code (relevant extracts below) only renders the slider, with no value. All examples I have seen so far are in pure HTML5 code, and I'm lacking direction on how to do this using using my jinja2 template as a starting point.
Any suggestions?
extract from main.py:
class MyForm(Form):
MyField = DecimalRangeField('Age', [validators.NumberRange(min=1, max=100)])
extract from form.html
<div>{{ wtf.form_field(form.MyField) }}</div>
392
Try this code (gist):
from flask import Flask, render_template_string
from wtforms import Form
from wtforms.fields.html5 import DecimalRangeField
app = Flask(__name__)
app.config['DEBUG'] = True
TPL = '''
<!DOCTYPE html>
<html>
<head>
<script>
function outputUpdate(age) {
document.querySelector('#selected-age').value = age;
}
</script>
</head>
<body>
<form>
<p>
{{ form.age.label }}:
{{ form.age(min=0, max=100, oninput="outputUpdate(value)") }}
<output for="age" id="selected-age">{{ form.age.data }}</output>
</p>
</form>
</body>
</html>
'''
class TestForm(Form):
age = DecimalRangeField('Age', default=0)
@app.route("/")
def home():
form = TestForm(csrf_enabled=False)
return render_template_string(TPL, form=form)
if __name__ == "__main__":
app.run()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
