javascript - 在 JavaScript 中访问更新表单的元素
问题描述
我有一个用于更新找到的项目的表格。该表单通过视图扩展了 Django 的 UpdateView。更新丢失物品和更新找到物品的表单使用相同的模板,但具有不同的视图和表单。它们共享相同的模板,因为大多数字段是相同的。
我正在尝试为表单添加一些自定义表单验证,以特别更新找到的项目。此验证特定于找到的物品,不适用于丢失的物品。我在一个干净的函数中进行了验证,该函数FoundUpdateForm
检查是否满足所需的条件,如果不满足条件则引发 ValidationError。即使这里有验证,我也想将它添加到 JavaScript 文件中。
我尝试在与表单上的元素相关联的 JavaScript 文件中创建变量,但没有成功。我尝试过使用var staff_type = document.getElementById('staff_type')
,var staff_type = document.getElementById('FoundUpdateForm').elements.namedItem('staff_type')
以及其他一些变体。我正在处理的主要问题是如何在没有 ID 的情况下获取表单。我已经研究过在 forms.py 中为表单分配一个 ID,但从我的发现来看,至少它似乎不能以这种方式完成。
我想尽可能避免添加到模板中,因为如前所述,该模板被多个表单使用。此外,由于表单扩展了 UpdateView 模板,因此该模板能够{{ form.as_p }}
使用 p 标签呈现表单的字段。因为元素是以这种方式呈现到页面的,所以 Django 为每个元素分配了自己的 ID,但表单本身没有分配一个。
表格.py:
class FoundUpdateForm(ModelForm):
Found._meta.get_field('staff_type').formfield(widget=forms.RadioSelect())
def clean(self):
cleaned_data = super(FoundUpdateForm, self).clean()
staff_type = cleaned_data.get('staff_type')
witness = cleaned_data.get('witness')
res_type = cleaned_data.get('res_type')
name_of_the_individual_claiming_item = cleaned_data.get('name_of_the_individual_claiming_item')
phone_number = cleaned_data.get('phone_number')
if not staff_type:
raise forms.ValidationError("Please fill out Type of Employee Resolving Item.")
if staff_type == 'student' and not witness:
raise forms.ValidationError("Student staff resolving lost items are required to have a witness.")
if res_type.name == 'Picked up':
if not name_of_the_individual_claiming_item:
raise forms.ValidationError("If person is picking up item, the individual's name is required.")
if not phone_number:
raise forms.ValidationError("If person is picking up item, the individual's phone number is required.")
if not witness:
raise forms.ValidationError("If person is picking up item, a witness is required.")
class Meta:
model = Found
fields = ['name_of_the_individual_claiming_item', 'phone_number', 'staff_type', 'witness', 'item_name', 'description', 'location', 'date_found', 'res_type', 'date_resolved']
widgets = {
'date_found': DateInput(attrs=date_attrs),
'date_resolved': DateInput(attrs=date_attrs),
'staff_type': forms.RadioSelect
}
item_update.html:
{% extends "admin/base_site.html" %}
{% load static %}
{% load i18n %}
{% load in_group %}
{% block content %}
<script src="{% static 'lostfound.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}">
<script>
$(document).ready(function() {
$(".datepicker").datepicker({
dateFormat: 'yy-mm-dd',
});
});
</script>
<fieldset class="well">
<form action="" method="post">{% csrf_token %}
{{ form.as_p }}
<input class="btn btn-primary" type="submit" value="Update" />
</form>
</fieldset>
{% endblock content %}
视图.py:
class FoundUpdate(UpdateView):
model = Found
template_name = 'lostfound/item_update.html'
success_url = reverse_lazy('found_list')
form_class = FoundUpdateForm
def form_valid(self, form):
item = form.save()
LogEntry.objects.create(
user_id = self.request.user.pk,
content_type_id = ContentType.objects.get_for_model(Found).pk,
object_id = item.pk,
object_repr = item,
action_flag = 2,
change_message = 'Update Found Item'
)
return redirect('found_list')
def get_context_data(self, **kwargs):
context = super(FoundUpdate, self).get_context_data(**kwargs)
context['title'] = 'Change found'
context['log_entries'] = get_object_history_list(self.model, self.get_object().pk)
return context
注意:我使用的是 Django 1.11
解决方案
将表单包装在 a 中<div>
并给该 div 一个类,比如<div class="MySpecialForm">
. 然后,您可以通过引用具有该特定类的 div 内的表单来找到(django 生成的)表单(如果您想要防弹,请检查它是否是唯一的)。一般来说,将某些内容包装在 div 中对其显示没有影响,除非 div 类对某些东西是特殊的(例如 Bootstrap)。$('div.MySpecialForm form')
(或者类似的东西,我不经常使用 JQuery 选择器来成为它们的知识源泉!)
除非页面中可能有 >1 个表单,否则您不需要这个,但是如果您尝试编写尽可能通用的 JS,您确实应该允许这种可能性。
您还应该考虑模板和子模板,使用定义相对于任何特定视图和一些空块(或显示“编程错误,您忘记覆盖块 foobar”的块)不变的部分的基本模板。子模板做
{% extends "wherever/whatever.html" %} {% block something %} stuff {% endblock something %} {% block something_else %} 等等...
这巧妙地将一个视图的细节与特定类型视图的泛型区分开来。
推荐阅读
- apache-spark - 根据 PySpark Dataframe 中两列之间的匹配分配唯一 ID
- node.js - HTTPS 上 Node.js 上的 CORS 问题(Elastic Beanstalk)
- c - 矩阵中的算术平均值
- android - I/Ads:广告加载失败:3 - Android
- c++ - 制作一个简单的 Log 类
- php - 如何使用单个查询显示多个表
- python - 如何在 Python 上剥离字符串?
- python - 按特定列对记录进行分组并插入缺失值
- python - 转换后的视觉 hello world python
- spring-boot - SpringData MongoDB @TypeAlias 升级后停止工作