使用 jquery 访问 Django 表单数据答案

【问题标题】：Django form data access using jquery使用 jquery 访问 Django 表单数据
【发布时间】：2018-11-19 03:13:52
【问题描述】：

我正在使用 Django 表单。 Django 自动为我呈现表单。

模板渲染代码如下：

<form method="POST" class="post-form" id="form1">{% csrf_token %}
    {% block content %}
       {{form.as_p}}
       <button type="button" class="btn btn-primary" id="mbutton" data-toggle="modal" data-target="#exampleModalCenter">Save</button>
    {% endblock %}
</form>

当我在浏览器中查看源代码时，输出如下：

<form method="POST" class="post-form" id="form1"><input type='hidden' name='csrfmiddlewaretoken' value='iyBHA6drfJJ7s7eRmkKmsM6LyVpCGH1f7wQ65n78WkMpiQj8kuUUVlYrUFj06Nxh' />

    <p><label for="id_device_type">Device type:</label> <select name="device_type" required id="id_device_type">
       <option value="" selected>---------</option>
       <option value="Laptop-abcsderf-asdfghjkl12345-lenovo--">Laptop-abcsderf-asdfghjkl12345-lenovo--</option>
       <option value="Desktop-atu90667-RT56-HP--">Desktop-atu90667-RT56-HP--</option>
       </select></p>
       <button type="button" class="btn btn-primary" id="mbutton" data-toggle="modal" data-target="#exampleModalCenter">Save</button>
</form>

我想要做的是，一旦用户点击保存按钮，就会弹出一个模式。在模态框内，将显示表单的内容。只使用表单 id 作为 jquery 选择器就可以了吗？或者如果不是，那么我应该如何使用 each() 函数迭代表单字段？

尽早寻求帮助。

【问题讨论】：

如果你想在模态框内复制表单，为什么不使用$('.modal-content').html($('#form1').html())
但它仍然会让用户编辑内容对吗？如何使整个表单只读？另外，如何自定义要在模态中显示的内容？ @Lemayzeur
是不是像你想要实现的表单预览？为什么要对表单输入字段这样做？
是的，我想实现表单预览。但是，我只想向用户显示表单内容，而不是让他编辑任何内容。
最后一个问题，表单预览是在提交表单到后端之后还是在发送数据到后端之前？

标签： jquery django django-forms django-templates

【解决方案1】：

尝试以下操作：

$("modalBodySelector").append($("#form1"));

最好附加完整的表单而不是内容，以避免在 HTML 中重复 ID。注意modalBodySelector是modal body的选择器

【讨论】：

它正在工作，但下拉菜单仍处于活动状态。我应该如何禁用它或使其只读？其次，如何从显示的表单中删除保存按钮？
@Aishwary 使用 readonly 属性使其成为只读并使用 hide() 函数隐藏保存按钮
这种方式不安全，因为用户可以在浏览器中使用inspect 选项卡简单地更改属性。这根本不会阻止用户提交
我只是为了理解 jQuery 的工作而制作一个基本的应用程序。但是，将来，我一定会在设计时牢记您的观点。