时间戳

首页 > 解决方案 > Django - 无法将 Django 表单的 id 传递给 javascript 变量

javascript - Django - 无法将 Django 表单的 id 传递给 javascript 变量

问题描述

所以我阅读了 django 文档，django 表单字段 id 应该具有 id_(form field name) 格式，但是当我在将表单字段分配给 javascript 变量时尝试引用此 id 时，它返回 null。为了测试这一点，我使用了 auto_id 来确保我在 javascript 中使用的 id 与我试图引用的字段 id 匹配，并且确实如此。此外，我将另一个 html 元素（“testid”）传递给我的 javascript，以确保它可以与模板中的其余元素一起使用，并且确实如此。为什么我可以将所有 html 元素的 id 分配给 javascript 变量而不是 django 表单？

forms.py（不包括选项列表以节省空间）

class FilterForm(forms.Form):
    dataset = forms.CharField(label='', widget=forms.Select(choices=DATASET_CHOICES))
    graph_type = forms.CharField(label='',  widget=forms.Select(choices=GRAPH_CHOICES))

html

{% extends 'base.html' %}
{% load materializecss %}
{% block content %}
    <form action = "", method = "POST">
        {{form|materializecss}}
    </form>
        {{form.graph_type.auto_id}}
    <div id = "testid"></div> 
{% endblock %}

main.js

const carInput = document.getElementById("id_graph_type")
const testInput = document.getElementById("testid")

carInput.addEventListener('change', e=>{
    console.log('Changed')
})
testInput.addEventListener('change', e=>{
    console.log('Changed')
})

这是表单到浏览器的 html 输出

<form action = "", method = "POST">
    <div class="input-field col s12  ">
                <select name="dataset" 
        class=" validate">
                          <option value="Choose a Dataset">Choose a Dataset</option>
                          <option value="US Mortality By State">US Mortality By State</option>
                          <option value="US Average temperature">US Average temperature</option>
                          <option value="Food Prices By State">Food Prices By State</option>      
                </select>
                <label class="control-label s12 "></label>
    </div>
    <div class="input-field col s12  ">

                <select name="graph_type" 
        class=" validate" 
 >
                          <option value="Choose Plot Type">Choose Plot Type</option>
                          <option value="Bar Graph">Bar Graph</option>
                          <option value="Line Graph">Line Graph</option>
                          <option value="Count Plot">Count Plot</option>
                </select>
                <label class="control-label s12 "></label>

标签： javascriptpythondjango

解决方案

默认情况下，MaterializeCSS 似乎不会id在呈现的 html 中的表单字段上设置属性。

您应该能够手动完成（但这实际上是一个 materializecss 限制，而不是 Django 问题）。

在您的小部件中设置id：

graph_type = forms.CharField(label='', widget=forms.Select(choices=GRAPH_CHOICES, attrs={'id': 'id_graph_type'}))

这应该可以让 materializecss 模板标签将 id 呈现到您的 HTML 中。

推荐阅读