通过javascript django动态将表单字段添加到模板答案

【问题标题】：Add form field to template dynamically via javascript django通过javascript django动态将表单字段添加到模板
【发布时间】：2020-01-29 20:09:49
【问题描述】：

当用户通过 javascript 单击按钮时，我想在模板中添加一个表单字段。我不想隐藏它，只是让它出现，我需要插入它，因为它可以加载到多个部分中。这是我尝试过的，但没有运气。

document.getElementById("div_id").value = '{{ my_form.field|as_crispy_field }}';

【问题讨论】：

标签： javascript python django forms

【解决方案1】：

这是一个例子：

// update element innerHTML with input field
function addField2(e) {
  e.preventDefault();
  var container = document.getElementById("field_2_container");
  var input = `
    <div class="some_class">
      <input type="text" name="field_2" id="id_field_2">
    </div>
  `;
  // append input field to the element
  container.innerHTML += input;
}

<form id="form">
  <div id="field_1_container">
    <input type="text" name="field_1" id="id_field_1">
  </div>
  <div id="field_2_container"></div>
  
  <div id="field_3_container"></div>
  
  <button onclick="addField2(event)">Add field 2</button>
</form>

【讨论】：

感谢您的回复，但在您的示例中，您自己插入了 html。我正在尝试从表单对象中插入它：{{ my_form.field|as_crispy_field }}
@AlbertoCarmona 我没用过脆皮表格，那会渲染多行 html 代码吗？
你可以试试 JS 多行字符串：stackoverflow.com/a/805113
@AlbertoCarmona 我更新了我的答案以显示它有效。