gpt4 book ai didi

Django 中需要为特定元素而不是整个页面重新加载 JavaScript 函数

转载 作者:行者123 更新时间:2023-11-28 16:52:38 26 4
gpt4 key购买 nike

我在 Django 中有以下表单,每次用户选择 Finalized 选项时,两个字段应变为不可编辑,当用户选择 Active 选项时这两个字段应该再次变得可编辑。但是,似乎只有在页面首次加载后才有效,然后我需要选择另一个选项,然后重新加载整个页面以使 JS 代码正常工作。

{% 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" }}
{% endif %}
<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;
}
{% endblock %}
</script>

enter image description here

如何让 JS 在选项更改后立即加载,而不是更改一个选项然后重新加载整个页面?

最佳答案

在函数之后添加以下语句:

document.getElementById('id_status').addEventListener('change', makeReadOnly);

这会将 makeReadOnly 函数绑定(bind)到下拉列表的更改事件,并将设置其他字段的状态,而无需重新加载。

这必须在函数之外,例如:

function makeReadOnly() {
...
}
document.getElementById('id_status').addEventListener('change', makeReadOnly);

关于Django 中需要为特定元素而不是整个页面重新加载 JavaScript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59742515/

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