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按钮时，/form/submit/ URL会显示为文本form submitted!。 为什么请这样？

Answer 1

您必须重命名表单上的提交字段，因为名称/ id属性遮盖了提交方法/处理程序。

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

或者，您可以直接在模板中添加表单按钮，但是它既没有ID，也没有名称submit。

Answer 2

在您的代码中，change方法具有回调函数，在此回调函数内部，this指代当前的回调函数作用域，它没有任何submit方法。

因此，请使用JQuery或香草JS如下获取表单对象：

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