烧瓶wtforms Integerfield（）返回NaN

Question

有人可以向我解释IntegerField（）吗？我到处搜索，但是找不到我要找的好例子。我的网站上有一个柜台；向上箭头加1，向下箭头减1。但是，当我单击任一箭头时，它仅返回NaN，并且不会更新。有什么想法吗？

wtform：

class BetaForm(FlaskForm):
    streak = IntegerField('Streak')
    total = IntegerField('Total')
    submit = SubmitField('Update')

路线

def beta():
    form = BetaForm()
    if form.validate_on_submit():
        current_user.streak = form.streak.data
        current_user.total = form.total.data
        db.session.commit()
        flash('Your account has been updated!', 'success')
    return render_template('betaone.html', form=form)

HTML：

<div class="row">
   <p class="col-12 font100" id="streakcounter">{{ form.streak }}</p>
   <button id="betabuttonplus" onclick="addStreak()"><i class="fa fa-plus"></i></button>
</div>

<form method="POST" action=""> 
  <div class="form-group">
    {{ form.submit(class="my-button btn btn-outline-info") }}
  </div>
</form>

JS

function addStreak() {
    var streak = document.getElementById("streakcounter").innerHTML;
    streak++;
    document.getElementById("streakcounter").innerHTML = streak;
}

Answer 1

这里的问题在javascript中：

document.getElementById("streakcounter").innerHTML

检索整个input元素，但我们只想更新其value属性。此函数将正确更新值：

function addStreak() {
    document.getElementById("streak").value++;
}

通过使用html5 type="number"输入，可以避免使用javascript更新表单；现代浏览器会自动提供向上和向下箭头（“旋转器”）来更新值。 WTForms在其html5模块中提供了这些输入。

from wtforms import Form
from wtforms.fields import html5 as h5fields
from wtforms.widgets import html5 as h5widgets

class MyForm(Form):
    foo = h5fields.IntegerField('foo')
    bar = h5fields.IntegerField('bar', widget=h5widgets.NumberInput(min=1, max=1000, step=5))

form = MyForm()
for f in form:print(f)

<input id="foo" name="foo" step="1" type="number" value="">
<input id="bar" max="1000" min="1" name="bar" step="5" type="number" value="">