显示来自 JS 的 django-from答案

【问题标题】：Display a django-from from JS显示来自 JS 的 django-from
【发布时间】：2020-07-03 02:06:05
【问题描述】：

所以这是我有一个 html 代码块，当单击按钮时需要替换它。使用它没什么大不了的

$('div.myCustomReplacer').replaceWith(newHTML);

但我还需要在新 HTML 中呈现 django-form {{ form }} 当我简单地使用 <div class="NewDiv"> {{ form }} </div? html 被呈现为 "{{ form }}" 因为这些引号没有呈现表单。

那么我如何删除这些？抱歉，刚接触 JavaScript。

【问题讨论】：

标签： javascript django django-forms

【解决方案1】：

我不认为你可以那样实现它。记住，表单是在服务端渲染html时添加的，所以客户端基本上不存在{{form}}。

不用担心，只需使用简单的 JavaScript，就有几种简单的方法可以实现您的目标。一种方法是简单地让服务器注入表单，并在用户单击按钮时使其可见。看看我给你做的例子。

document.getElementById('showBtn')
  .addEventListener('click', function () {
    document.getElementById('targetDiv').style.display = 'block';
  });

document.getElementById('hideBtn')
  .addEventListener('click', function () {
    document.getElementById('targetDiv').style.display = 'none';
  });

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
}
button {
    margin: 1rem;
}
section {
    margin: 1rem;
}
section span {
    background-color: lightcoral;
    font-size: small;
    padding: .5rem;
}

<!doctype html>
<html lang="en">
  <head>
    <title>Hide Form</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link href="./style.css" rel="stylesheet">
  </head>
  <body>
    <button id="showBtn">Show Form</button>
    <button id="hideBtn">Hide Form</button>
    <section>
      <div id="targetDiv" style="display: none;">
        <h2>Form <span> (a moment ago I was just hidden)</span></h2>
        <form>
            <label for="someInput">Bla bla</label>
            <input id="someInput" type="text"/>
        </form>
      </div>
    </section>
    <script src="./app.js"></script>
  </body>
</html>

【讨论】：

感谢您的回答！它解决了我面临的其他问题....我正在使用 django-croppie 来裁剪图像，然后再上传它们。
是我的cropper 被渲染的地方。所以当我点击按钮时，我只是用我的croppie 所需的div 替换我当前的html 内容。但我还必须在它之后呈现表单，{{ form.media }}