gpt4 book ai didi

javascript - 当满足特定条件时,如何使 Django 表单中的字段变为只读?

转载 作者:行者123 更新时间:2023-12-02 22:05:35 25 4
gpt4 key购买 nike

根据下图,当任务状态为已完成已取消时,我尝试使字段类别和当前点不可编辑,否则字段应该是可编辑的。

enter image description here

下面是我的 html 文件中的代码。

{% extends "base.html" %} {% load widget_tweaks %} 
{% block content %}

<div id="form-group">
<form method="POST" action="." enctype="multipart/form-data">
{% csrf_token %}
<label>Select your category</label>
{{ form.category|add_class:"card" }}
<label>What's the status of the task?</label>
{{ form.status|add_class:"card" }}
<label>Current points:</label>
{{ form.points|add_class:"card" }}
<label>Finalized date:</label>
{{ form.ending_date|add_class:"card" }}
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>

下面是我的 forms.py 文件中的代码。

class TaskModelForm(forms.ModelForm):
class Meta:
model= Task
fields = ['category', 'status', 'points']

def __init__(self, *args, **kwargs):
super(TaskModelForm, self).__init__(*args, **kwargs)
self.fields['status'].required = False
self.fields['points'].required = False

当我想编辑此表单的内容时,我需要验证状态是否已完成,因此字段不可编辑,否则字段应该是可编辑的,我正在考虑:

{% extends "base.html" %} {% load widget_tweaks %} 
{% block content %}

{% if form.status.value == 'Active' %} <!--make the fields editable -->
<div id="form-group">
<form method="POST" action="." enctype="multipart/form-data">
{% csrf_token %}
<label>Select your category</label>
{{ form.category|add_class:"card" }}
...
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>
{% endif %}

{% if form.status.value == 'Finalized' %} <!--make the fields non-editable -->
<div id="form-group">
<form method="POST" action="." enctype="multipart/form-data">
{% csrf_token %}
<label>Select your category</label>
{{ form.category|add_class:"card" }}
...
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>
{% endif %}

但是,我相信我的方法可能行不通,因为这可能是一个更前端的问题,而不是后端问题(只是猜测)。您能指出解决这个问题的正确方向吗?

最佳答案

由于状态是用户选择的,因此您无法使用服务器上运行的 Python (Django) 来满足您的要求。您必须使用在显示表单的网页中运行的 JavaScript 来解决该问题。像这样的事情肯定会成功。

{% extends "base.html" %} {% load widget_tweaks %} 
{% block content %}

<body onload="makeReadOnly();">
<div id="form-group">
<form method="POST" action="." enctype="multipart/form-data">
{% csrf_token %}
<div class="tweet-composer">
<label>Insert your task</label>
{{ form.task|add_class:"card js-keeper-editor" }}
</div>
<label>Select your category</label>
{{ form.category|add_class:"card" }}
<label>Current points:</label>
{{ form.points|add_class:"card" }}
<button type="submit" class="btn btn-success">Send</button>
</form>
</div>
</body>
{% endblock content %}

<script type="text/javascript">
{% block jquery %}

function makeReadOnly()
{
if (document.getElementById('id_status').value == 'Finalized'){
document.getElementById('id_task').readOnly=true;
document.getElementById('id_category').readOnly=true;
}else if (document.getElementById('id_status').value == 'Active'){
document.getElementById('id_task').readOnly=true;
document.getElementById('id_category').readOnly=false;
}
}
document.getElementById('id_status').addEventListener('change', makeReadOnly);
{% endblock %}
</script>

通过“查看页面源代码”,您可以看到 Django 从您的表单中生成的 HTML 结构,以便您可以使用 JQuery 选择器识别正确的位。或者你可以这样做

f = SomethingForm()
f.as_p()

./manage.py shell控制台中。

在 Django 端,您可能需要自定义表单验证来处理状态值与其他字段是否必填之间的相互依赖关系。

关于javascript - 当满足特定条件时,如何使 Django 表单中的字段变为只读?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59725697/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com