入力要素の属性nameの角括弧構文は、フォーム入力を配列に変換します。したがって、name="input_text[]"を使用すると、配列が取得されます。この配列は、request.form.getlistメソッドを使用してFlaskルーティングで処理できます。これを実際に見てみましょう。
app.py：
from flask import Flask, render_template, url_for, request
app = Flask(__name__)
@app.route('/')
def search():
return render_template('dynamic_input.html')
@app.route('/results', methods = ['GET', 'POST'])
def results():
if request.method == 'GET':
return redirect(url_for('/'))
else:
values = request.form.getlist('input_text[]')
return render_template('dynamic_input_results.html',
values = values)
if __name__ == '__main__':
app.run(debug = True)
dynamic_input.htmlは含まれています
<!DOCTYPE html>
<script>
function add_field()
{
var total_text=document.getElementsByClassName("input_text");
total_text=total_text.length+1;
field_div = document.getElementById("field_div");
new_input = "<li id='input_text"+total_text+
"_wrapper'><input type='text' class='input_text' name='input_text[]' id='input_text"+
total_text+"' placeholder='Enter Text'></li>";
field_div.insertAdjacentHTML('beforeend',new_input);
}
function remove_field()
{
var total_text=document.getElementsByClassName("input_text");
document.getElementById("input_text"+total_text.length+"_wrapper").remove();
}
</script>
<div class = "container">
<h1>Give the words</h1>
<form action='/results' method="post">
<div id="wrapper">
<input type="button" value="Add TextBox" onclick="add_field();">
<input type="button" value="Remove TextBox" onclick="remove_field();">
<ol id="field_div">
</ol>
</div>
<input type='submit' value='Select'>
</form>
</div>
dynamic_input_results.htmlが含まれています
<ul>
{% for value in values %}
<li>{{value}}</li>
{% endfor %}
</ul>
出力を
図1：ダイナミック入力要素
図2：
：結果は
NB前のフォームを提出した後にリストとして表示されています
新しいテキストボックスを追加した後で、テキスト入力値のオーバーライドを防ぐためにJSコードを変更しました。
更新日：
は、各テキストボックスにチェックボックスを追加しました。
app.py：
from flask import Flask, render_template, url_for, request
app = Flask(__name__)
@app.route('/')
def search():
return render_template('dynamic_input.html')
@app.route('/results', methods = ['GET', 'POST'])
def results():
if request.method == 'GET':
return redirect(url_for('search'))
else:
input_values = request.form.getlist('input_text[]')
checkbox_values = request.form.getlist('input_checkbox')
return render_template('dynamic_input_results.html',
input_values = input_values,
checkbox_values = checkbox_values)
if __name__ == '__main__':
app.run(debug = True)
dynamic_input.html：
<!DOCTYPE html>
<script>
function add_field()
{
var total_text=document.getElementsByClassName("input_text");
total_text=total_text.length+1;
field_div = document.getElementById("field_div");
new_input = "<li id='input_text"+total_text+"_wrapper'>";
new_input += "<input type='text' class='input_text' name='input_text[]' id='input_text"+
total_text+"' placeholder='Enter Text'>";
new_input += "<input type='checkbox' name='input_checkbox' value='"+total_text+"' id='input_checkbox"+
total_text+"'";
new_input += "</li>";
field_div.insertAdjacentHTML('beforeend',new_input);
}
function remove_field()
{
var total_text=document.getElementsByClassName("input_text");
document.getElementById("input_text"+total_text.length+"_wrapper").remove();
}
</script>
<div class = "container">
<h1>Give the words</h1>
<form action='/results' method="post">
<div id="wrapper">
<input type="button" value="Add TextBox" onclick="add_field();">
<input type="button" value="Remove TextBox" onclick="remove_field();">
<ol id="field_div">
</ol>
</div>
<input type='submit' value='Select'>
</form>
</div>
dynamic_input_results.html：
<ul>
{% for value in input_values %}
<li>{{value}}</li>
{% endfor %}
<hr>
{% for value in checkbox_values %}
<li>{{value}}</li>
{% endfor %}
</ul>
出力：
