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

您必须重命名表单上的提交字段，因为提交方法/处理程序被 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();