Flask wtforms Integerfield (), возвращающий NaN - PullRequest
Новая
       51

Flask wtforms Integerfield (), возвращающий NaN

0 голосов
/ 04 апреля 2020

Может кто-нибудь объяснить мне 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;
}

1 Ответ

1 голос
/ 06 апреля 2020

Проблема в том, что javascript: 

document.getElementById("streakcounter").innerHTML

получает весь элемент input, но мы хотим обновить только его атрибут value. Эта функция будет корректно обновлять значение: 

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

Можно избежать необходимости использовать javascript для обновления формы с помощью ввода html5 type="number"; современные браузеры автоматически предоставляют стрелки вверх и вниз («спиннеры») для обновления значения. 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="">
...