使用 JavaScript 将 FormField 动态添加到 Wtforms FieldList [重复]答案

【问题标题】：Add FormField to Wtforms FieldList Dynamically With JavaScript [duplicate]使用 JavaScript 将 FormField 动态添加到 Wtforms FieldList [重复]
【发布时间】：2014-12-09 16:37:19
【问题描述】：

我有一个 Wtforms FieldList，它由我想动态附加到的 FormFields 组成。

首先，FieldList 是空白的，它在呈现的 HTML 中显示为 <ul> 标记（此处的 HTML 使用示例中使用的 render_field macro Wtforms 的检测版本呈现）：

<div class=" form-group field-contain  ">

   <label for="listings" class=" col-md-2 control-label">Listings</label>

      <div class="col-md-10">

         <ul class="form-control" id="listings"></ul>

      </div>
</div>

我还创建了一个 Handlebars 模板，用于抓取输入并将其作为 <li> 附加到 <ul class="form-control" id="listings"> 标记。数据输入正确，这是我输入后的HTML

<ul class="form-control" id="listings">
   <li class='form-control' id='listing'>
      <!-- HTML snipped for brevity -->

   </li>
   <li class='form-control' id='listing'>
     <!-- HTML snipped for brevity -- >

   </li>
</ul>

（请注意，添加到 <li> 对象中的 class='form-control' id='listing' 是手动添加的，以尝试让 Wtforms 获取它）

但是，当我执行 print(form.listings) 服务器端时，它会给出以下输出：

<ul id="listings"></ul>

有谁知道我需要添加到<li> 属性以供 Wtforms 获取服务器端的任何特殊类/属性？ FWIW，如果我在提交表单之前执行console.log($(form).serialize())，则<li>s 中的值就在那里。

【问题讨论】：

如果以上内容不重复，只需编辑问题，解释您的情况有何不同，我很乐意为重新开放投票:-)

标签： jquery python flask wtforms flask-wtforms

【解决方案1】：

您必须使用输入/选项/选择等元素从表单获取 POST。

看看：Can we use <li> as a form element in html?

【讨论】：

【解决方案2】：

我怀疑问题在于 ID 应该是唯一的。请参阅this 帖子。或者，简单地考虑一下函数 getElementByID 在这种情况下如何工作..？它不清楚。 所以让 ID 独一无二。

如有必要，您可以添加非唯一属性（如名称？）而不影响功能。

【讨论】：