Question

我有一个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;

Answer 1

您正在寻找Javascript而不是Django。由于Django只后端服务和逻辑，它无法直接处理前端发生的任何变化。如果在此过程中根本不需要与后端进行交互，则可以简单地使javascript（可能是jQuery）监听复选框状态中的更改，如果它们发生更改，则使表单字段可见。表单字段可以用Django无形地预呈现（即使用<input type="hidden">）。然后，您可以使用Javascript删除隐藏状态。

如果你确实需要与后端进行交互，那么除了你用Django呈现页面，监听复选框更改以及是否发生更改，你发送一个AJAX请求时，你会想做基本相同的事情。一个Django视图，处理该请求并返回您需要的数据（即从数据库或一些不应该在前端的复杂计算）。要返回数据，您可以使用Django的JsonResponse。

根据使用Django，CSS和Javascript的复选框选择，使HTML表单文本字段存在

1 个答案: