如何根据编辑时的存储值显示/隐藏Django表单字段？

huangapple
go评论97阅读模式
英文:

How to show/hide a django form field based on the stored value while editing?

问题

  1. **models.py**:
  2. ```python
  3. cv_choices = (
  4.     ('One Time', 'One Time'),
  5.     ('Renewal', 'Renewal'),
  6. )
  8. class Certification(models.Model):
  9.     user = models.ForeignKey(Account, on_delete=models.CASCADE, null=True)
  10.     certName = models.CharField(_('Certification Name'), max_length=100, null=True)
  11.     certId = models.CharField(_('Certification ID'), max_length=100, null=True)
  12.     certUrl = models.URLField(_('Certification URL'), max_length=500, null=True)
  13.     certStartDate = models.DateField(_('Certification Start Date'), null=True)
  14.     certEndDate = models.DateField(_('Certification End Date'), null=True, blank=True)
  15.     certValidity = models.CharField(_('Certification Validity'), max_length=10, choices=cv_choices, default='Renewal', null=True)
  16.     createdDate = models.DateTimeField(_('Created Date'), auto_now_add=True, editable=False)
  17.     modifiedDate = models.DateTimeField(_('Modified Date'), auto_now=True, editable=False)
  19.     def __str__(self):
  20.         return self.certName

forms.py:

  1. class CertificationForm(forms.ModelForm):
  2.     certValidity = forms.ChoiceField(choices=[('One Time', 'One Time'), ('Renewal', 'Renewal')])
  4.     class Meta:
  5.         model = empCertification
  6.         fields = ('user', 'certName', 'certId', 'certUrl', 'certStartDate', 'certEndDate', 'certValidity')
  8.     def __init__(self, *args, **kwargs):
  9.         super(empCertificationForm, self).__init__(*args, **kwargs)
  10.         self.fields['user'].widget.attrs['class'] = 'form-select'
  11.         self.fields['certName'].widget.attrs['class'] = 'form-control'
  12.         self.fields['certId'].widget.attrs['class'] = 'form-control'
  13.         self.fields['certUrl'].widget.attrs['class'] = 'form-control'
  14.         self.fields['certStartDate'].widget.attrs['class'] = 'form-control'
  15.         self.fields['certEndDate'].widget.attrs['class'] = 'form-control'
  16.         self.fields['certValidity'].widget.attrs['class'] = 'form-select'
  17.         for field in self.fields:
  18.             self.fields[field].widget.attrs['placeholder'] = 'Provide Details'

Edit Template File:

  1. <form action="{% url 'certificationEdit' certification.pk %}" method="post" class="form" enctype="multipart/form-data" novalidate>
  2.     {% csrf_token %}
  3.     <div class="card-body border-top p-9">
  4.         {% if certificationForm.errors %}
  5.             {% for field in certificationForm %}
  6.                 {% for error in field.errors %}
  7.                     <div class="alert alert-danger">
  8.                         <strong>{{field.name|title}} - {{error|escape}}</strong>
  9.                     </div>
  10.                 {% endfor %}
  11.             {% endfor %}
  12.             {% for error in certificationForm.non_field_errors %}
  13.                 <div class="alert alert-danger">
  14.                     <strong>{{error|escape}}</strong>
  15.                 </div>
  16.             {% endfor %}
  17.         {% endif %}
  18.         <div class="row">
  19.             <div class="col-lg-6">
  20.                 <div class="form-floating mb-7">
  21.                     {{certificationForm.user}}
  22.                     <label class="required">User</label>
  23.                 </div>
  24.             </div>
  25.             <div class="col-lg-6">
  26.                 <div class="form-floating mb-7">
  27.                     {{certificationForm.certValidity}}
  28.                     <label>Certification Validity</label>
  29.                 </div>
  30.             </div>
  31.             <div class="col-lg-6">
  32.                 <div class="form-floating mb-7">
  33.                     {{certificationForm.certName}}
  34.                     <label class="required">Certification Name</label>
  35.                 </div>
  36.             </div>
  37.             <div class="col-lg-6">
  38.                 <div class="form-floating mb-7">
  39.                     {{certificationForm.certId}}
  40.                     <label class="required">Certification ID</label>
  41.                 </div>
  42.             </div>
  43.             <div class="col-lg-6">
  44.                 <div class="form-floating mb-7">
  45.                     {{certificationForm.certUrl}}
  46.                     <label class="required">Certification URL</label>
  47.                 </div>
  48.             </div>
  49.             <div class="col-lg-6">
  50.                 <div class="form-floating mb-7">
  51.                     {{certificationForm.certStartDate}}
  52.                     <label class="required">Certification Start Date</label>
  53.                 </div>
  54.             </div>
  55.             <div class="col-lg-6 certEndDate">
  56.                 <div class="form-floating mb-7">
  57.                     {{certificationForm.certEndDate}}
  58.                     <label>Certification End Date</label>
  59.                 </div>
  60.             </div>
  61.         </div>
  62.     </div>
  63.     <div class="card-footer d-flex justify-content-end py-6 px-9">
  64.         <a href="{% url 'certificationList' %}" class="btn btn-light-info me-3">Discard</a>
  65.         <button type="submit" class="btn btn-primary">Save Changes</button>
  66.     </div>
  67. </form>

urls.py:

  1. from django.urls import path
  2. from . import views
  4. urlpatterns = [
  5.     path('certificationEdit/<int:pk>', views.certificationEdit, name='certificationEdit'),
  6. ]

views.py:

  1. @login_required(login_url='login')
  2. def certificationEdit(request, pk):
  3.     certification = get_object_or_404(empCertification, id=pk)
  4.     certificationForm = empCertificationForm(instance=certification)
  5.     if request.method == 'POST':
  6.         certificationForm = empCertificationForm(request.POST, instance=certification)
  7.         if certificationForm.is_valid():
  8.             certificationForm.save()
  9.             messages.success(request, 'Certification has been updated.')
  10.             return redirect('certificationList')
  11.         else:
  12.             messages.error(request, 'Please correct form errors.')
  14.     context = {
  15.         'certification': certification,
  16.         'certificationForm': certificationForm,
  17.     }
  18.     return render(request, 'back/pages/certification/update.html', context)

Show/Hide Form Fields:
I am using the following JavaScript function to show and hide the field while adding data.

  1. $('select[name="certValidity"]').on('change', function(){
  2.     if ($(this).val() == 'One Time') {
  3.         $('.certEndDate').hide();
  4.     } else {
  5.         $('.certEndDate').show();
  6.     }
  7. });

But while retrieving the same row using Django template, it is showing all the fields.

For Example: If I saved certification validity as "One Time" which does not include "CertEndDate," and when I try to retrieve the same data, it's showing the "certEndDate" field.

So my question is how to hide the certEndDate while retrieving the "One Time" certificate data.

  2. <details>
  3. <summary>英文:</summary>
  4. **models.py**:

cv_choices = (
('One Time', 'One Time'),
('Renewal', 'Renewal'),
)

class Certification(models.Model):
user = models.ForeignKey(Account, on_delete=models.CASCADE, null=True)
certName = models.CharField(('Certification Name'), max_length=100, null=True)
certId = models.CharField(('Certification ID'), max_length=100, null=True)
certUrl = models.URLField(('Certification URL'), max_length=500, null=True)
certStartDate = models.DateField(('Certification Start Date'), null=True)
certEndDate = models.DateField(('Certification End Date'), null=True, blank=True)
certValidity = models.CharField(('Certification Validity'), max_length=10, choices=cv_choices, default='Renewal', null=True)
createdDate = models.DateTimeField(('Created Date'), auto_now_add=True, editable=False)
modifiedDate = models.DateTimeField(('Modified Date'), auto_now=True, editable=False)

  1. def __str__(self):
  2. return self.certName
  2. **forms.py**:

class CertificationForm(forms.ModelForm):
certValidity = forms.ChoiceField(choices=[('One Time', 'One Time'),('Renewal', 'Renewal')])

  1. class Meta:
  2. model = empCertification
  3. fields = (&#39;user&#39;, &#39;certName&#39;, &#39;certId&#39;, &#39;certUrl&#39;, &#39;certStartDate&#39;, &#39;certEndDate&#39;, &#39;certValidity&#39;)
  4. def __init__(self, *args, **kwargs):
  5. super(empCertificationForm, self).__init__(*args, **kwargs)
  6. self.fields[&#39;user&#39;].widget.attrs[&#39;class&#39;] = &#39;form-select&#39;
  7. self.fields[&#39;certName&#39;].widget.attrs[&#39;class&#39;] = &#39;form-control&#39;
  8. self.fields[&#39;certId&#39;].widget.attrs[&#39;class&#39;] = &#39;form-control&#39;
  9. self.fields[&#39;certUrl&#39;].widget.attrs[&#39;class&#39;] = &#39;form-control&#39;
  10. self.fields[&#39;certStartDate&#39;].widget.attrs[&#39;class&#39;] = &#39;form-control&#39;
  11. self.fields[&#39;certEndDate&#39;].widget.attrs[&#39;class&#39;] = &#39;form-control&#39;
  12. self.fields[&#39;certValidity&#39;].widget.attrs[&#39;class&#39;] = &#39;form-select&#39;
  13. for field in self.fields:
  14. self.fields[field].widget.attrs[&#39;placeholder&#39;] = &#39;Provide Details&#39;
  2. **Edit Template File**:

<form action="{% url 'certificationEdit' certification.pk %}" method="post" class="form"
enctype="multipart/form-data" novalidate>
{% csrf_token %}
<div class="card-body border-top p-9">
{% if certificaitonForm.errors %}
{% for field in certificaitonForm %}
{% for error in field.errors %}
<div class="alert alert-danger">
<strong>{{field.name|title}} - {{error|escape}}</strong>
</div>
{% endfor %}
{% endfor %}
{% for error in certificaitonForm.non_field_errors %}
<div class="alert alert-danger">
<strong>{{error|escape}}</strong>
</div>
{% endfor %}
{% endif %}
<div class="row">
<div class="col-lg-6">
<div class="form-floating mb-7">
{{certificaitonForm.user}}
<label class="required">User</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-7">
{{certificaitonForm.certValidity}}
<label>Certification Validity</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-7">
{{certificaitonForm.certName}}
<label class="required">Certification Name</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-7">
{{certificaitonForm.certId}}
<label class="required">Certification ID</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-7">
{{certificaitonForm.certUrl}}
<label class="required">Certification URL</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-7">
{{certificaitonForm.certStartDate}}
<label class="required">Certification Start Date</label>
</div>
</div>
<div class="col-lg-6 certEndDate">
<div class="form-floating mb-7">
{{certificaitonForm.certEndDate}}
<label>Certification End Date</label>
</div>
</div>
</div>
</div>
<div class="card-footer d-flex justify-content-end py-6 px-9">
<a href="{% url 'certificationList' %}" class="btn btn-light-info me-3">Discard</a>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</form>

  2. **urls.py**

from django.urls import path
from . import views

urlpatterns = [
path('certificationEdit/<int:pk>', views.certificationEdit, name='certificationEdit'),
]

  2. **views.py**

@login_required(login_url='login')
def certificationEdit(request, pk):
certification = get_object_or_404(empCertification, id=pk)
certificaitonForm = empCertificationForm(instance=certification)
if request.method == 'POST':
certificaitonForm = empCertificationForm(request.POST, instance=certification)
if certificaitonForm.is_valid():
certificaitonForm.save()
messages.success(request, 'Certification has been updated.')
return redirect('certificationList')
else:
messages.error(request, 'Please correct form errors.')

  1. context = {
  2. &#39;certification&#39;: certification,
  3. &#39;certificaitonForm&#39;: certificaitonForm,
  4. }
  5. return render(request, &#39;back/pages/certification/update.html&#39;, context)
  2. **Show/Hide Form Fields**
  3. I am using the following JavaScript function to show and hide the field while adding data.

$('select[name="certValidity"]').on('change', function(){
if ($(this).val() == 'One Time') {
$('.certEndDate').hide();
} else {
$('.certEndDate').show();
}
});

  2. But while retrieving the same row using Django template, it is showing all the fields. 
  3. **For Example:** If i saved certification validity as &quot;One Time&quot; which do not include &quot;CertEndDate&quot; and when i try to retrieve the same data its showing &quot;certEndDate&quot; field. 
  4. So my question is **how to hide the certEndDate while retrieving the &quot;One Time&quot; certificate data**.
  5. </details>
  6. # 答案1
  7. **得分**: 0
  8. 我找到了上述的解决方案。
  9. 如果其他人遇到类似问题，分享这里将会有所帮助。
  10. 您需要在模板文件中添加以下内容。
  11. ```html
  12. {% if certificaitonForm.certValidity.value != 'One Time' %}
  13. <div class="col-lg-6 certEndDate">
  14. <div class="form-floating mb-7">
  15. {{certificaitonForm.certEndDate}}
  16. <label>Certification End Date</label>
  17. </div>
  18. </div>
  19. {% endif %}
英文:

I found a solution to the above.

Sharing here will help others if they have similar issues.

You need to add the following in the template file.

  1. {% if certificaitonForm.certValidity.value != &#39;One Time&#39; %}
  2. &lt;div class=&quot;col-lg-6 certEndDate&quot;&gt;
  3. &lt;div class=&quot;form-floating mb-7&quot;&gt;
  4. {{certificaitonForm.certEndDate}}
  5. &lt;label&gt;Certification End Date&lt;/label&gt;
  6. &lt;/div&gt;
  7. &lt;/div&gt;
  8. {% endif %}

huangapple
  • 本文由 发表于 2023年6月22日 04:10:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76526808.html
  • django
  • django-forms
  • django-models
  • django-templates
  • python
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定