Javascript 不带提交按钮的单选按钮

我找到了一个如何在没有提交按钮的情况下使用单选按钮的示例。我未能将此示例转换为Flask

静态/vehicle.js：

tamplates/example.html：

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

我错过了什么

---

提前感谢

当涉及到JS时，当文档未准备好且自动表单提交丢失时，您试图将处理程序绑定到更改事件

当您将代码放入$document.ready回调并添加$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)

---

您没有将请求数据传递到表单，这通常会导致错误，只有在提交请求时才应执行表单验证。

p.s.只要我选择一个单选按钮，该值很快就会显示在底部。有可能修复它吗？这是因为它被放置在更改事件的“$”result.htmlresult”行上。把它取下来，谢谢，它能用。如何删除earch单选按钮前面的项目符号？

<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>

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)

$( document ).ready(function() {

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

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)