Jquery submit () не отправляет данные формы на мой взгляд

Question

У меня есть следующий файл (app.py), который генерирует экземпляр Flask и определяет несколько маршрутов и объявляет / инициирует простую форму:

from flask import Flask, render_template, url_for
from flask_wtf import FlaskForm
import wtforms as wtf
from wtforms.fields.html5 import DecimalRangeField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'youll-never-guess'

class Form(FlaskForm):
    age = DecimalRangeField('age', default=30)
    submit = wtf.SubmitField('submit')

@app.route('/form/', methods=['GET'])
def form():
    form = Form()
    return render_template('form.html', form=form)

@app.route('/form/submit/', methods=['POST'])
def submit_form():
    return 'form submitted!'

def main():
    app.run(debug=True, port=5000)

if __name__ == '__main__':
    main()

, где файл templates/form.html имеет видследует:

<form id="form" action="{{ url_for('submit_form') }}" method="POST" onchange="submitForm(this);">
  {% for field in form %}
    {{ field }}
  {% endfor %}
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
  function submitForm(form) {
    console.log(`submitting form ${form} ... `);
    $(form).submit();
  }
</script>

Когда я меняю ползунок, консоль печатает submitting form [object HTMLFormElement] ..., но, похоже, не вызывает функцию просмотра submit_form.Однако когда я нажимаю кнопку submit, URL-адрес /form/submit/ отображается с текстом form submitted!. Почему это, пожалуйста?

Answer 1

Вы должны переименовать поле отправки в форме, потому что метод / обработчик отправки скрыт атрибутом name / id.

class Form(FlaskForm):
    age = DecimalRangeField('age', default=30)
    sub = wtf.SubmitField('sub')

В качестве альтернативы вы можете добавить кнопку формы непосредственно в шаблон, но это может сделать 'не может иметь ни ID, ни имени submit.

Answer 2

В вашем коде у метода change есть функция обратного вызова, а внутри этой функции обратного вызова this относится к текущей области функции обратного вызова, в которой нет метода submit.

Следовательно, извлеките объект формы, используя JQuery или vanilla JS, следующим образом:

var form = document.getElementById("form");
$(form).submit();