Flask アプリケーションでチェックボックスの値を取得、設定するコードと実行結果を紹介します。
Flaskアプリケーションでチェックボックスの値を取得、設定するコードを紹介します。
テンプレートページからのPOSTにより値を受け取る動作となります。
サーバー側で以下のコードでチェック状態を取得できます。
request.form.get('(チェックボックスのID)')
以下のファイルを作成します。
from urllib import request
from flask import Flask, render_template, request
app = Flask(__name__)
# Make the WSGI interface available at the top level so wfastcgi can get it.
wsgi_app = app.wsgi_app
@app.route('/')
def func1():
return render_template("index.html")
@app.route('/',methods=['POST'])
def func2():
value1 = request.form.get('checkbox1')
value2 = request.form.get('checkbox2')
if value1 is None:
value1 = "チェックなし"
if value2 is None:
value2 = "チェックなし"
result1 = "ChecktBox1:" + value1
result2 = "ChecktBox2:" + value2
return render_template("index.html", output_message1=result1, output_message2=result2)
if __name__ == '__main__':
import os
HOST = os.environ.get('SERVER_HOST', 'localhost')
try:
PORT = int(os.environ.get('SERVER_PORT', '5555'))
except ValueError:
PORT = 5555
app.run(HOST, PORT)
テンプレートのHTMLです。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>チェックボックスの入力を受け取るデモ</h1>
<form method="post" action="/">
<div>チェックして、ボタンをクリックしてください。</div>
<input name="checkbox1" type="checkbox"><label for="checkbox1">CheckBox1</label><br>
<input name="checkbox2" type="checkbox"><label for="checkbox2">CheckBox2</label><br>
<input type="submit">
</form>
<hr>
<div>結果</div>
<div>{{ output_message1 }}</div>
<div>{{ output_message2 }}</div>
</body>
</html>
HTMLのページではPOSTのフォームを作成してチェックボックスのチェック状態を
Submitボタンがクリックされたタイミングで、サーバーに送信します。
<form method="post" action="/">
<div>チェックして、ボタンをクリックしてください。</div>
<input name="checkbox1" type="checkbox"><br>
<input name="checkbox2" type="checkbox"><br>
<input type="submit">
</form>
サーバー側では、 request.form.get() メソッドでチェックボックスのチェック状態を取得します。
チェックされていない場合は、値がNoneTypeとなりますので、チェックがされていない旨のメッセージを設定します。
value1 = request.form.get('checkbox1')
value2 = request.form.get('checkbox2')
if value1 is None:
value1 = "チェックなし"
if value2 is None:
value2 = "チェックなし"
テンプレートページの出力メッセージを設定します。
result1 = "ChecktBox1:" + value1
result2 = "ChecktBox2:" + value2
return render_template("index.html", output_message1=result1, output_message2=result2)
プロジェクトを実行します。下図のページが表示されます。
チェックボックスにチェックをつけ、[送信]ボタンをクリックします。
ページが切り替わり、ページの下部に"ChekcBox1:on" "ChekcBox2:on" のメッセージが表示されます。
2つのチェックボックスがチェックされていたことが検出できています。
CheckBox1のみをチェックしていた場合は下図の表示となります。
チェックボックスをチェックしていなかった場合は、下図の表示となります。
先のプログラムでは、チェックボックスをチェックしてSubmitボタンをクリックした遷移後の画面で、
チェックボックスのチェックがすべて解除されてしまう動作でした。
プログラムを変更して、チェック状態に応じてチェックボックスのチェックがついた状態で画面を表示する動作にします。
チェックボックスの状態を設定する場合は、サーバー側から、チェックボックスにinputタグに check 属性を出力できるよう修正します。
以下のコードを記述します。
from urllib import request
from flask import Flask, render_template, request
app = Flask(__name__)
# Make the WSGI interface available at the top level so wfastcgi can get it.
wsgi_app = app.wsgi_app
@app.route('/')
def func1():
return render_template("index.html")
@app.route('/',methods=['POST'])
def func2():
value1 = request.form.get('checkbox1')
value2 = request.form.get('checkbox2')
if value1 is None:
value1 = "チェックなし"
if value2 is None:
value2 = "チェックなし"
if value1 == "on":
chk1="checked"
else:
chk1=""
if value2 == "on":
chk2="checked"
else:
chk2=""
result1 = "ChecktBox1:" + value1
result2 = "ChecktBox2:" + value2
return render_template("index.html", output_message1=result1, output_message2=result2, checked1=chk1, checked2=chk2)
if __name__ == '__main__':
import os
HOST = os.environ.get('SERVER_HOST', 'localhost')
try:
PORT = int(os.environ.get('SERVER_PORT', '5555'))
except ValueError:
PORT = 5555
app.run(HOST, PORT)
テンプレートのHTMLです。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>チェックボックスの入力を受け取るデモ</h1>
<form method="post" action="/">
<div>チェックして、ボタンをクリックしてください。</div>
<input id="chk1" name="checkbox1" type="checkbox" {{checked1}}><label for="chk1">CheckBox1</label><br>
<input id="chk2" name="checkbox2" type="checkbox" {{checked2}}><label for="chk2">CheckBox2</label><br>
<input type="submit">
</form>
<hr>
<div>結果</div>
<div>{{ output_message1 }}</div>
<div>{{ output_message2 }}</div>
</body>
</html>
チェックボックスのinputタグ内に {{checked1}} {{checked2}} の変数の埋め込みを追加します。
<input id="chk1" name="checkbox1" type="checkbox" {{checked1}}><label for="chk1">CheckBox1</label><br>
<input id="chk2" name="checkbox2" type="checkbox" {{checked2}}><label for="chk2">CheckBox2</label><br>
チェックボックスの値が "on" であった場合には "checked" を出力します。
if value1 == "on":
chk1="checked"
else:
chk1=""
if value2 == "on":
chk2="checked"
else:
chk2=""
return render_template("index.html", output_message1=result1, output_message2=result2, checked1=chk1, checked2=chk2)
プロジェクトを実行します。下図のページが表示されます。
2つのチェックボックスにチェックをつけ[送信]ボタンをクリックします。
ページ遷移し、ページの下部にチェック状態のメッセージが表示されます。
先のプログラムではチェックボックスの状態が解除されましたが、このプログラムではチェック状態が維持された状態で表示されます。
同様に[CheckBox2]のみをチェックした状態で[送信]ボタンをクリックします。
ページ遷移後、ページ下部にはCheckBox2がチェックされたメッセージが表示されます。
チェックボックスもCheckBox2がチェックされた状態でページが表示されます。
チェックボックスのチェック状態を設定することができました。
