flask-wtformのHiddenFieldのvalueをjQueryで動的にセットしてPOSTすることが出来ない

#困っていること
flask-wtformを利用してフォームの作成し、button要素がクリックされた際にHiddenFieldへ値を設定し、POSTするといった処理を実装したいです。（CRUDの学習の一環です）

しかし、HiddenFieldでフォームを作った場合、上手くクリック時に値を設定できていないようで、FlaskFormクラスのvalidate_on_submit()メソッドに弾かれてしました。

なおHiddenFieldではなく、StringFieldで行った際にはうまく挙動します。また<input type='hidden'>とflask-wtformを利用せずに記述した場合もうまく挙動します。

#ソースコード
上手く挙動しない場合

Python
1# import module
2from flask import Flask, render_template, session, redirect, url_for, flash, request
3from flask_wtf import FlaskForm
4from wtforms import StringField, IntegerField, SubmitField, RadioField, SelectField, HiddenField
5from wtforms.validators import InputRequired, DataRequired, NumberRange, Length, ValidationError
6from wtforms.widgets.core import HiddenInput
7from wtforms.fields.html5 import DateField
8import os
9
10#===== define app instance
11app = Flask(__name__)
12
13#===== set app.config
14app.config['SECRET_KEY'] = 'this is secret key of life sand box'
15
16#===== define Form & Fields
17class TestForm1(FlaskForm):
18    text = HiddenField('', validators = [DataRequired(message = "タスクを入力してください")])
19    submit = SubmitField('submit') 
20
21class TestForm2(FlaskForm):
22    text = HiddenField('', validators = [DataRequired(message = "タスクを入力してください")])
23    submit = SubmitField('submit')
24
25
26#=== routing
27@app.route('/', methods = ['GET', 'POST'])
28def index():
29    form1 = TestForm1()
30    form2 = TestForm2()
31    if form1.validate_on_submit():
32        text1 = form1.text.data
33        return render_template('result.html', text = text1)
34    if form2.validate_on_submit():
35        text2 = form2.text.data
36        return render_template('result.html', text = text2)
37    return render_template('index.html', form1 = form1, form2 = form2)
38
39app.run(debug = True, host = os.getenv('APP_ADDRESS', 'localhost'), port = 8001)

下記がindex.htmlになります。

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset = "UTF-8">
5        <title>FormTest</title>
6        <script 
7        src="https://code.jquery.com/jquery-3.5.1.js" 
8        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
9        crossorigin="anonymous"></script>
10    </head>
11    <body>
12        <main>
13            {% macro render_error(field) %}
14                {% for error in field.errors %}
15                    <li class="error">{{ error }}</li>
16                {% endfor %}
17            {% endmacro %}
18            <div>
19                <form id = "form1" method="POST">
20                    {{ form1.hidden_tag() }}
21                    <div><p>text1</p>{{ form1.text.label }} {{ form1.text(id = "text1") }}</div>
22                    <div>{{ render_error(form1.text) }}</div>
23                    <button name = "form1" name = "form1">ボタン</button>
24                </form>
25            </div>
26            <div>
27                <form name = "form2" method="POST">
28                    {{ form2.hidden_tag() }}
29                    <div><p>text2</p>{{ form2.text.label }} {{ form2.text(id = "text2") }}</div>
30                    <div>{{ render_error(form2.text) }}</div>
31                    <button id = "form2" name = "form2">ボタン</button>
32                </form>
33            </div>
34        </main>
35        <script>
36            $(document).ready(function(){
37              $("button[id = 'form1']").click(function() {
38                  $('#text1').val("XXX")
39                  $('form[name = "form1"]').attr('action', '/') 
40                  $('form[name = "form1"]').submit();
41              });
42              $("button[id = 'form2']").click(function() {
43                  $('#text2').val("YYY")
44                  $('form[name = "form2"]').attr('action', '/') 
45                  $('form[name = "form2"]').submit();
46              });
47            });
48        </script>
49    </body>
50</html>

また下記がresult.htmlです。

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset = "UTF-8">
5        <title>FormTest</title>
6        <script 
7        src="https://code.jquery.com/jquery-3.5.1.js" 
8        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
9        crossorigin="anonymous"></script>
10    </head>
11    <body>
12        <main>
13            <h1>{{ text }}</h1>
14        </main>
15    </body>
16</html>

HiddenFieldではなく、StringFieldでフォームを作った場合は上手く行きます。

Python
1#===== define Form & Fields
2class TestForm1(FlaskForm):
3    text = StringField('', validators = [DataRequired(message = "タスクを入力してください")])
4    submit = SubmitField('submit') 
5
6class TestForm2(FlaskForm):
7    text = StringField('', validators = [DataRequired(message = "タスクを入力してください")])
8    submit = SubmitField('submit')

何かHiddenFieldならではの制約などあるのでしょうか？
もし何かございましたらご教授いただけますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

なんか、いろいろ混乱していませんか？

formを見ると、form1はidですが、form2はnameです。

html
1 <form id = "form1" method="POST">
2 <form name = "form2" method="POST">

buttonを見ると、form1のbuttonはname=form1ですが、form2のbuttonはid=form2です。

html
1<button name = "form1" name = "form1">ボタン</button>
2<button id = "form2" name = "form2">ボタン</button>

flask-wtfでは、定義したclassの変数名がそのままidになるようなので、TestForm1, TestForm2どちらも[text]という変数だとid重複が発生する可能性があります。

その辺全て考慮した上で、命名し直してからJavaScriptを検討し直した方が良いと思います。

また、{{ form1.hidden_tag() }}という記述は知らなかったので試して見たところ、type="hidden"の要素が全て出力されていました。
{{ form1.hidden_tag() }}を記述した上で、さらに<div><p>text1</p>{{ form1.text.label }} {{ form1.text(id = "text1") }}</div>という記述をすると、同じ要素が2つできる事になります。
この辺が自分の意図と異なる動作をしている原因かもしれませんので、確認ください。

とりあえず、フォームを1つにして動かしてみました。
result.htmlはそのまま利用しています。
全部ID指定ですが、もっと面倒な記述にすればやりたいことができるのではないでしょうか？

python
1# app.py
2# import module
3from flask import Flask, render_template
4from flask_wtf import FlaskForm
5from wtforms import SubmitField, HiddenField
6from wtforms.validators import DataRequired
7
8app = Flask(__name__)
9
10app.config['SECRET_KEY'] = 'this is secret key of life sand box'
11
12
13class TestForm1(FlaskForm):
14    text = HiddenField('text1', validators=[DataRequired(message="タスクを入力してください")])
15    submit = SubmitField('submit')
16
17
18# === routing
19@app.route('/', methods=['GET', 'POST'])
20def index():
21    form1 = TestForm1()
22    if form1.validate_on_submit():
23        text = form1.text.data
24        return render_template('result.html', text=text)
25    return render_template('index.html', form1=form1)
26
27
28if __name__ == '__main__':
29    app.run(debug=True, host='0.0.0.0', port=8001)
30

html
1<!-- index.html -->
2<!DOCTYPE html>
3<html>
4    <head>
5        <meta charset = "UTF-8">
6        <title>FormTest</title>
7        <script
8        src="https://code.jquery.com/jquery-3.5.1.js"
9        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
10        crossorigin="anonymous"></script>
11    </head>
12    <body>
13        <main>
14            {% macro render_error(field) %}
15                <ul>
16                {% for error in field.errors %}
17                    <li class="error">{{ error }}</li>
18                {% endfor %}
19                </ul>
20            {% endmacro %}
21            <div>
22                <form id="form1" method="POST" action="{{ url_for('index') }}">
23                    {{ form1.csrf_token() }}
24                    <div>
25                        {{ form1.text.label }} {{ form1.text() }}
26                    </div>
27                    <button id="button1" name="button1">ボタン</button>
28                </form>
29                <div>
30                    {{ render_error(form1.text) }}
31                </div>
32            </div>
33
34        </main>
35        <script>
36            $("#button1").on('click', function () {
37                $('#text').val("XXX");
38                $('#form1').submit();
39            });
40        </script>
41    </body>
42</html>