Question

我找到了here一个示例，该示例演示了如何使用不带提交按钮的单选按钮。我无法将此示例转换为Flask。

static/vehicle.js：

$('#myform input[type=radio]').on('change', function(event) {
    var result = $(this).val();
    $('#result').html(result);
  })

tamplates/example.html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{url_for('static', filename='vehicle.js')}}"></script>
<form id="myform" action="" method="post">
    {{ form.example }}
    <div id="result"></div>
</form>

test.py：

from flask import Flask, render_template
from wtforms import Form, RadioField

SECRET_KEY = 'development'

app = Flask(__name__)
app.config.from_object(__name__)


class SimpleForm(Form):
    example = RadioField(
        'Label', choices=[('home', 'home'), ('side1', 'side1'), ('side1', 'side1')])


@app.route('/', methods=['post', 'get'])
def hello_world():
    form = SimpleForm()
    if form.validate():
        print(form.example.data)
    else:
        print(form.errors)
    return render_template('example.html', form=form)

if __name__ == '__main__':
    app.run(debug=True)

不幸的是，按下单选按钮似乎无法打印该值。

我想念什么？

提前谢谢

Answer 1

对于JS，您试图绑定处理程序以在文档尚未准备好并且缺少自动提交表单时更改事件。

当您将代码放入$( document ).ready()回调中并添加$('#myform').submit();时，此方法有效：

$( document ).ready(function() {

    $('#myform input[type=radio]').on('change', function(event) {
        var result = $(this).val();
        $('#result').html(result);
        $('#myform').submit();
    });
});

然而，为了使它成为可行的示例，需要对test.py进行一些更改：

from flask import Flask, render_template, request
from wtforms import Form, RadioField

SECRET_KEY = 'development'

app = Flask(__name__)
app.config.from_object(__name__)


class SimpleForm(Form):
    example = RadioField(
        'Label', choices=[('home', 'home'), ('side1', 'side1'), ('side1', 'side1')])


@app.route('/', methods=['post', 'get'])
def hello_world():
    form = SimpleForm(request.form)
    if request.method == 'POST':
        if form.validate():
            print(form.example.data)
        else:
            print(form.errors)
    return render_template('example.html', form=form)


if __name__ == '__main__':
    app.run(debug=True)

您没有将请求数据传递给表单，这总是会导致错误，并且仅在POST请求时才执行表单验证。

没有提交按钮的单选按钮

1 个答案: