如何使用 jQuery 将 WTForms TextField 动态添加到 FieldList？答案

【问题标题】：How can I dynamically add a WTForms TextField to a FieldList using jQuery?如何使用 jQuery 将 WTForms TextField 动态添加到 FieldList？
【发布时间】：2014-07-17 21:13:01
【问题描述】：

我想使用 Jquery 添加或删除带有按钮的新 WTForm 输入字段，就像这里 http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery/comment-page-1 但使用我的表单域。

我的表格：

class EditBook(Form):
title = TextField('title', validators = [Required()])
authors = FieldList(TextField())

问题是我不能只是追加例如

$(InputsWrapper).append("{{form.authors(size=20)}}");

它只是打印这个文本。

【问题讨论】：

标签： jquery python wtforms flask-wtforms

【解决方案1】：

您的示例将服务器端生成的文本与您使用 javascript 在浏览器中附加的文本混为一谈。您将无法使用服务器端模板引擎使用的{{ }} 语法。在呈现期间，这些被扩展并替换为通过网络传输到客户端的 HTML。相反，您需要构建这些内置模板函数将生成的实际 DOM 元素。

您实际要创建的 DOM 元素如下所示：

<input id="authors-0" name="authors-0" type="text" value="Author Guy"></input>
<input id="authors-1" name="authors-1" type="text" value="Other Guy"></input>

然后可以将其编码到 WTForms 可以使用的multipart/form-data 流中。所以你实际的 jQuery 东西需要创建一个看起来像这样的字段

$('<input>').attr({
    type: 'text',
    id: 'authors-' + index ,
    name: 'authors-' + index, 
    value: value
}).appendTo('form');

index 是下一个位置索引（这可以存储在包装 ul 中的 data 属性中），value 是您要分配给此框的值（如果有）。

此外，要了解FieldList 的渲染效果，您可以从命令行运行以下代码。它将打印 WTForms 在呈现过程中生成的实际文本。

from wtforms import Form, TextField, FieldList
from webob.multidict import MultiDict

class TestForm(Form):
    authors = FieldList(TextField())

data_in = {'authors': ['Author Guy', 'Other Guy']}
test_form2 = TestForm(data=MultiDict(data_in))
print("HTML Render: %s" % test_form2.authors())

【讨论】：

如何在 python 中迭代这些输入？或者如果我使用 jquery 收集数据，如何将其发送到服务器？
附议@user3684055 的问题
当您将传入数据绑定到名为 form 的 TestForm 实例时，您应该能够循环 form.authors.entries - 这是一些示例代码 stackoverflow.com/questions/30121763/…
好的，我看到你有 data_in 并且你有 <input> 字段。我现在有一个按钮，可以点击它来生成一个新的<input>s。我现在如何从我的 <input> 字段中获取 data_in 字典？您只需将完成的data_in dict 放在那里，就像它完全清楚如何读取生成的 N 个新 <input>s 一样，但对我来说不是这样。你能澄清一下吗？
没关系，您正在使用 dict 生成文本字段。无论如何，您如何通过运行 javascript N 次从您创建的 N 个 <input> 字段中获取数据（进入字典）？

【解决方案2】：

此答案基于 nsfyn55 的解释（第一段）。

我遇到了类似的问题。解决方案是使用： https://github.com/Rhyzz/repeatable-fields

因此，您所要做的就是查看由 WTForms 呈现的 html sn-p 并将其用作可重复字段插件中的“模板”（有关详细信息，请参阅其docs）

【讨论】：