Flask wtforms Integerfield() 返回 NaN

Question

有人可以向我解释 IntegerField() 吗？我到处搜索，但没有找到一个很好的例子来说明我要找的东西。我的网站上有一个柜台；向上箭头加 1，向下箭头减 1。但是，当我单击任一箭头时，它只是 returns NaN，并且不会更新。有什么想法吗？

重量形式:

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 来更新表单；现代浏览器会自动提供向上和向下箭头 ("spinners") 来更新值。 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="">

Flask wtforms Integerfield() 返回 NaN

Flask wtforms Integerfield() returning NaN

javascript

python

counter

wtforms

flask-wtforms