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

标签 javascript html css django

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

我是 Django 和 Web 应用程序的新手,所以我不知道我在寻找什么或者它叫什么。我已经搜索无果。任何指针都会有帮助。

解决方案:

感谢马卡维利的帮助。以下是我的第一次尝试:

表单.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>

样式.css

#id_my_form_input {
        display : none
}     

脚本.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 View (即来自数据库或一些不应该在前端的复杂计算)。要返回数据,可以使用Django的JsonResponse

关于javascript - 使用 Django、CSS 和 Javascript 使 HTML 表单文本字段的存在依赖于复选框选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39689453/

相关文章:

javascript - 将每个数组值与 ajax 传递的数组分开——php

javascript - 关于getElementById 查找多个id 名称?

html - 将带有 float 子元素的 div 扩展到它们的全高

javascript - Drupal 7 上 DOM 完成之前加载 JQuery 脚本

jquery - 如何使用jquery选择第n个 child 的第n个 child ?

javascript - 如何通过 contenteditable div 输入将元素的换行符(格式)保留到附加到列表中?

javascript - 从同一模块内调用导出函数

javascript - 当我使用内联 &lt;script&gt; 标记时,为什么解析 HTML 不会停止?

html - 我的 <article> 了解我的介绍背景

css - Asp.net TextBox 改变颜色