使用烧瓶将所有输入框中的输入提取到列表中答案

【问题标题】：Extracting input from all input boxes into a list using flask使用烧瓶将所有输入框中的输入提取到列表中
【发布时间】：2017-11-02 19:42:14
【问题描述】：

我正在尝试使用我的烧瓶后端来提取我的输入。但是，在我的 html 文件中，我使用了 javascript，以便我可以动态排列任意数量的输入框。

<!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如下：

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)

如何更改代码以使所有输入框都从列表中提取？

【问题讨论】：

标签： javascript python flask inputbox

【解决方案1】：

输入元素的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：提交上一个表单后，结果显示为列表

注意：

我已修改您的 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>

输出：

【讨论】：