使用flask将所有输入框的输入提取到列表中 [英] Extracting input from all input boxes into a list using flask
本文介绍了使用flask将所有输入框的输入提取到列表中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用Flask后端提取我的输入.但是，在我的html文件中，我使用了javascript，以便可以动态地排列任意数量的输入框.
I am trying to use my flask backend to extract my input. However, in my html file, I use javascript so that I can dynamically arrange any number of input boxes I want.
<!DOCTYPE html>
<script>
function add_field()
{
var total_text=document.getElementsByClassName("input_text");
total_text=total_text.length+1;
document.getElementById("field_div").innerHTML=document.getElementById("field_div").innerHTML+
"<li id='input_text"+total_text+"_wrapper'><input type='text' class='input_text' id='input_text"+total_text+"' placeholder='Enter Text'></li>";
}
function remove_field()
{
var total_text=document.getElementsByClassName("input_text");
document.getElementById("input_text"+total_text.length+"_wrapper").remove();
}
</script>
{% extends "bootstrap/base.html" %}
{% block content %}
<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>
{% endblock %}
我的views.py如下:
My views.py is as follows:
from flask import render_template, request
from app import app
from .translit import *
@app.route('/')
def search():
return render_template('index.html')
@app.route('/results', methods=['POST'])
def results():
words = getwds(request.form['input_text1'])
return render_template('results.html', words=words)
- 如何更改代码，使所有输入框都从列表中提取?
推荐答案
输入元素的 name 属性中的方括号语法将表单输入转换为数组.因此，当您使用 name ="input_text []" 时，将获得一个数组.可以使用 request.form.getlist 方法在Flask路由中处理此数组.让我们看看实际情况.
The square bracket syntax in name attribute of input elements converts form inputs into an array. So, when you use name="input_text[]" you will get an array. This array can be handled in Flask routing using request.form.getlist method. Let's see this in action.
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:提交先前的表单后，结果显示为列表
N.B.:
我已修改您的JS代码，以防止添加新文本框后覆盖文本输入值.
I have modified your JS code to prevent overriding of text input values after adding a new text box.
已更新:
在每个文本框中添加了复选框.
Added checkbox with each textbox.
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>
输出:
这篇关于使用flask将所有输入框的输入提取到列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
