使用Django、CSS和Javascript使HTML表单文本字段依赖于复选框的选择

Make HTML form text field presence dependent on checkbox selection using Django, CSS, and Javascript

本文关键字：字段 文本 依赖于 复选框 选择 表单 HTML Django CSS Javascript 使用      更新时间：2023-09-26

我有一个Django表单，我想它最初隐藏一个文本字段，直到用户选择一个复选框。

我是Django和web应用程序的新手，所以我不知道我在找什么或者它叫什么。我找了半天也没有找到。任何指针都会有帮助。

解决方案:

谢谢makaveli的帮助。下面是我的第一次尝试:

forms.py 

from django import forms 
from .models import MyModel
class MyForm(forms.ModelForm):
    class Meta:
            model = MyModel
            fields = [ 
                    'my_checkbox',
                    'my_form_input',
            ]

index . html 

{% load static %}
<html>
        <head>
                <link rel="stylesheet" type="text/css" href="{% static 'my_app/style.css' %}">
                <title>My Django Form</title>
        </head>
        <body>
                <form method="post">{% csrf_token %}
                        {{ form.as_p }}
                        <button type="submit">Submit</button>
                </form> 
                <script src="{% static 'my_app/script.js' %}"></script>
        </body> 
</html>

style.css 

#id_my_form_input {
        display : none
}

script.js 

function my_toggle_func() { 
        if (this.checked) {
                document.getElementById("my_form_input").style.display = 'block';
        } else {
                document.getElementById("my_form_input").style.display = 'none';
        }
}
document.getElementById("my_checkbox").onclick = my_toggle_func;

你正在寻找Javascript而不是Django。因为Django只做后端服务和逻辑，所以它不能直接处理前端发生的任何变化。如果您在此过程中根本不需要与后端交互，您可以简单地让javascript(也许是jQuery)侦听复选框状态的变化，如果它们发生变化，则使表单字段可见。表单字段可以用Django不可见地预渲染(即使用<input type="hidden">)。然后可以使用Javascript删除隐藏状态。

如果你确实需要与后端交互，那么你会想要做基本相同的事情，除了你用Django渲染页面，监听复选框的变化，如果发生变化，你发送一个AJAX请求到Django视图，处理该请求并返回你需要的数据(例如，从数据库或一些不应该在前端的复杂计算)。为了返回数据，你可以使用Django的JsonResponse。

相关文章：