Question

我想使用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)}}");

它只打印此文本。

Answer 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是下一个位置索引（这可以存储在包裹data中的ul属性中），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())

Answer 2

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

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

因此，您所要做的就是查看由WTForms呈现的html片段并将其用作模板＆＃39;在repeatable-fields插件中（有关详细信息，请参阅其docs）

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

2 个答案: