使用Django，CSS和Javascript使复选框选择的HTML表单状态存在

问题描述：

我有一个Django窗体，我希望它最初隐藏文本字段，直到用户选择一个复选框。使用Django，CSS和Javascript使复选框选择的HTML表单状态存在

我是Django和Web应用程序的新手，所以我不知道我在找什么或调用什么。我已经无济于事。任何指针都会有帮助。

SOLUTION：

感谢您的帮助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。

使用Django，CSS和Javascript使复选框选择的HTML表单状态存在

相关推荐