Jquery submit() 没有向我的视图提交表单数据

Question

我有以下文件 (app.py)，它生成一个 Flask 实例并定义一些路由和 declares/initiates 一个简单的形式：

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

在你的代码中，change 方法有一个回调函数，在这个回调函数中，this 指的是当前的回调函数范围，它没有任何 submit 方法.

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

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

Answer 2

您必须重命名表单上的提交字段，因为提交 method/handler 被 name/id 属性隐藏。

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

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

Jquery submit() 没有向我的视图提交表单数据

Jquery submit() not submitting form data to my view

javascript

python

flask

submit

wtforms