2016-09-25 54 views
1

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

回答

1

您在查找Javascript而不是Django。由於Django只做後臺服務和邏輯,因此無法直接處理前端發生的任何更改。如果您在此過程中不需要與後端進行交互,則可以簡單地讓javascript(jQuery或許)監聽複選框狀態中的更改,如果它們發生更改,則可以使表單域可見。表單字段可以用Django隱藏(即使用<input type="hidden">)。然後你可以使用Javascript刪除隱藏狀態。

如果您確實需要與後端進行交互,那麼您將需要做基本相同的事情,除非您使用Django呈現網頁,監聽複選框更改,並且如果發生更改,則發送AJAX請求到處理該請求並返回所需數據的Django視圖(即從數據庫或一些不應位於前端的複雜計算中)。要返回數據,您可以使用Django的JsonResponse