[英]How can I dynamically add a WTForms TextField to a FieldList using jQuery?
我想使用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)}}");
它只是打印这个文本。
您的示例使用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())
这个答案基于nsfyn55的解释(第一段)。
我遇到了类似的问题。 解决方案是使用: https : //github.com/Rhyzz/repeatable-fields
因此,您所要做的就是查看由WTForms呈现的html片段,并将其用作repeatable-fields插件中的“模板”(有关详细信息,请参阅其文档 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.