动态创建输入，然后使用烧瓶从输入中获取数据答案

【问题标题】：Dynamically created inputs then getting data from inputs with flask动态创建输入，然后使用烧瓶从输入中获取数据
【发布时间】：2016-12-23 02:01:06
【问题描述】：

我编写了一些 HTML 和 Javascript 来创建一个显示输入字段的表格。这是HTML Table 的图片。当用户不断点击按钮添加更多内容时，它看起来像这样：HTML Table More Input

这是表格的 HTML 代码和用于创建更多输入的 javascript：

<form action="/information.html" method="POST">
    <table class="table table-borderless">
        <thead>
            <tr>
                <th style="text-align:center">Ticker</th>
                <th style="text-align:center">Shares</th>
            </tr>
        </thead>
        <tbody id='room_fileds'>
            <tr>
                <td style="text-align:center">
                    <fieldset class="form-group">
                        <input type="text" placeholder="AAPL"   name="stock1"/>
                     </fieldset>
                 </td>
                 <td style="text-align:center">
                     <fieldset class="form-group">
                        <input type="text" placeholder="100" name="weight1"/>
                     </fieldset>
                 </td>
             </tr>
        </tbody>
    </table>
</form>
<br/>
<input type="button" id="more_fields" onclick="add_fields();" value="Add More" /> 
<input type='submit' value='Submit'/>

<script>
var count = 0
function add_fields() {
count++
var county = count.toString();
var objTo = document.getElementById('room_fileds')
var divtest = document.createElement("tr");
divtest.innerHTML = '<td style="text-align:center"><input type="text"></td><td  style="text-align:center"><input type="text"></td>';
objTo.appendChild(divtest)
}
</script>

我正在尝试使用烧瓶来获取所有帖子输入。通常我有一个名称为 stock1 的输入，然后我使用烧瓶执行以下操作：

stock1=request.form.get('stock1',type=str)

但是，我不确定如何处理这种动态创建的输入。我不确定用户是否会将数据输入到 1 个或 2 个甚至 25 个输入框中。如果不知道用户将输入多少数据，是否有合适的方法使用烧瓶来获取所有这些数据？可能，我想将所有股票代码放入一个列表中，并将所有股票放入另一个列表中。

【问题讨论】：

你能发布你的 Python Flask 表单吗？
也许this 有帮助。
@Irnzcig 所以如果我将每个输入命名为'tickers'，那么我可以做tickers = request.form.getlist('tickers')？

标签： javascript python html input flask

【解决方案1】：

我对flask不太了解，但是通过这段代码，您可以获取对象数组并使用您的服务器逻辑将它们一一插入。

https://jsfiddle.net/8gdun4j0/

PS: 使用 jquery

  arrayObject=[];
$("#subButon").on("click",function(){
for(var index=0;index<count+1;index++){
arrayObject.push(
{stock:$("#stock"+index).val(),
weight:$("#weight"+index).val()}
)
}
console.log(arrayObject);
alert("objetos guardados")
})

【讨论】：

【解决方案2】：

我注意到，如果您希望所有动态创建的输入具有相同的名称，它们必须与第一个非动态创建的输入字段的名称不同。因此，我将第一个输入命名为 s0，其余的动态创建的输入命名为 s1。然后我可以在 s0 上调用 request.form.get() 并在 s1 上调用 request.form.getlist()。然后我可以将 s0 附加到 s1 并获得我想要的列表，其中包含所有输入数据。但是，如果您让动态创建的输入与第一个非动态创建的输入具有相同的名称，则它不起作用。

【讨论】：

【解决方案3】：

也许试试这个存储库：https://github.com/sebkouba/dynamic-flask-form 开箱即用。

【讨论】：