javascript - 没有提交按钮的单选按钮

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 时，当文档未准备好且缺少自动表单提交时，您会尝试绑定(bind)处理程序来更改事件。

当您将代码放入 $( 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 请求时才应执行表单验证。