基于选择的 Django 模板/ChoiceField 显示字段

Posted 2023-02-24

【中文标题】基于选择的 Django 模板/ChoiceField 显示字段

【英文标题】：Django Templates/ChoiceField Display Fields based on Selection

【发布时间】：2012-07-05 04:54:55

【问题描述】：

我目前正在 Django 中制作一个呈现一些表单的模板。我有多个配置文件模型，它们根据用户的用户类型保存特定数据。例如，我有一个包含公司名称的公司资料和一个包含个人电话号码的客户资料。我有一个 ChoiceField 用于确定填写表单的用户类型，并根据用户选择的内容显示一组特定字段。当用户做出选择时，我正在使用 JQuery 使特定的隐藏字段可见。

我遇到的问题是其他模型需要一些未显示的字段。因此，假设公司资料需要公司名称，而客户资料需要个人电话号码。如果用户选择公司作为他们的类型，我的模板将返回个人电话号码字段的错误并且不提交。有没有办法使用 Django、JQuery 或其他方法根据用户选择禁用、删除或忽略不必要的字段？

这是我目前隐藏信息的方式：

<script type="text/javascript">
$(document).ready(function() 
$("#id_user_type").change(function()
    $(".user-type-wrapper").slideUp('500');
    $("#user-type-"+$(this).val()).slideDown('500');
););
</script>

此脚本正在影响我模板的这一部分：

 ...
 <div class="field">
      form.user_type.errors 
     <label for="id_user_type">User Type:</label>
      form.user_type 
 </div>

 <!-- Company Specific Form Content -->
 <div class="user-type-wrapper" id="user-type-CO" style="display: none;">
      <div class="field">
           form.company_name.errors 
          <label for="id_company_name">Company Name:</label>
           form.company_name 
      </div>
 </div>
 <!-- End Company Specific Form Content -->

 <!-- Customer Specific Form Content -->
 <div class="user-type-wrapper" id="user-type-CU">
      <div class="field">
           form.phone_number.errors 
          <label for="id_phone_number">Phone Number:</label>
           form.phone_number 
      </div>
 </div>
 <!-- End Customer Specific Form Content -->
 ...

任何帮助将不胜感激！

【参考方案1】：

为每种类型的配置文件制作不同的模型。 在模板中获取所有表单。 最后，使用 jquery 来决定应该看到哪一个。

【讨论】：

感谢您的回复，但这仅描述了我所做的事情，并没有解决删除不需要完成的字段的问题，它只是将它们隐藏起来。

我的回答确实隐藏了不需要的表格，但是如果您正确处理表格的帖子，您仍然可以克服表格不保存的困难。请记住，您必须根据配置文件类型保存数据，因此您还必须具有不同的“操作”属性或不同的 hack，以便在保存表单时获取所需的模型表单。 Dajax 也将完成工作。但这会减慢您的速度，因为您必须等待服务器只是为了一个小表格。

【参考方案2】：

实施

经过一番搜索，我想出了一个解决方案。我将 Dajax 添加到我的实现中，以根据用户选择的用户类型重新加载带有必填字段的页面。这使我能够消除不需要完成的字段，并且仍然对已完成的字段执行验证。

进一步阅读

为了帮助遇到类似问题的其他人，我建议查看Dajax Project，尤其是Pagination Example。我只是按照教程遇到了一些问题，但是如果您访问Dajax Github Repo，您应该能够通过它。

需要注意的问题

如果您使用的是 JQuery UI，请确保加载 Dajax 的 JQuery 版本而不是 Prototype 版本。加载 Prototype 将导致 JQuery 在您加载 Dajax 链接的页面上无法运行。有关参考，请参阅位于 https://github.com/jorgebastida/django-dajax/issues/37 的导入代码。

如果您使用的是 JQuery，请确保在您的标题中包含以下内容：

<script src="https://github.com/cowboy/jquery-misc/blob/master/jquery.ba-serializeobject.js" type="text/javascript" charset="utf-8"></script>

如果您搜索它，它会在文档中列出，但很容易忽略