在Django模板中使用javascript

Question

I have a working javascript file that adds and removes check boxes and drop down lists on an html page using the element ID tag. 我有一个有效的javascript文件，该文件使用元素ID标记在html页面上添加和删除复选框以及下拉列表。 I would like to apply the javascript code to a form that is being generated by a django app. 我想将javascript代码应用于django应用程序正在生成的表单。 I have tried to hide a field by changing the javascript element ID as follows, 我试图通过如下更改javascript元素ID来隐藏字段，

id1.style.visibility = 'hidden';

to match an element on the form that is being generated by django but the javascript isn't taking effect and the field is still visible. 匹配django生成的表单上的元素，但javascript无效，并且该字段仍然可见。

In my django template html file, I have included the js file from the site that is being served up by django. 在我的django模板html文件中，我包含了django提供服务的站点中的js文件。

<head>
   <script type="text/javascript" src="/static/js/submitform.js"></script>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

I can see in the template page source code the js file as above and can click on the link and see the javascript code. 我可以在模板页面的源代码中看到上面的js文件，并且可以单击链接并查看javascript代码。 So I know the javascript file is contained within the template. 所以我知道javascript文件包含在模板中。

I have done something similar with my css file and that takes effect on the template page, however I can't get the javascript to apply correctly. 我已经完成了与CSS文件相似的操作，并且该操作在模板页面上生效，但是我无法正确应用JavaScript。

I've been struggling with this for a while now and haven't done this before. 我已经为此苦苦挣扎了一段时间，之前从未做过。 Can anyone provide help or know of any documentation that I can read which shows me how to do this? 谁能提供帮助或知道我可以阅读的任何文档，这些文档向我展示了如何执行此操作？

Sorry if this isn't an appropriate question but haven't done this before and I am just stuck on this.. The project I am working on is for an internal test site so I am not worried at the moment about compressing the js file to the client or any injections that I could be exposed to.. Just getting an understanding how to do this.! 抱歉，如果这不是一个适当的问题，但之前没有做过，而我只是停留在此上。.我正在从事的项目是用于内部测试站点的，因此我现在不担心压缩js文件给客户或我可能接触到的任何注射。.只是了解如何做到这一点。

Thanks - Oli 谢谢-奥利

Answer 1

You need to Include the Jquery library before including your jquery file , so swap it to this: 您需要先包含Jquery库，然后再包含jquery文件，因此将其交换为以下内容：

<head>
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
   <script type="text/javascript" src="/static/js/submitform.js"></script>
</head>

EDIT: 编辑：

Also the "type" property is missing in your script tag for jquery Library. 此外，jquery库的脚本标记中缺少“ type”属性。 I have updated the code, have a look. 我已经更新了代码，看看。

Answer 2

you can do it like this: 您可以这样做：

#html
{% block main-menu %} 
    <br>
    <br>
    Click here to play with username
    <button id="show_button">show</button>
    <button id="hide_button">hide</button>
    <br>
    <br>
    <script type="text/javascript">
        $(function() {
                $("#show_button").click(function() {
                    $("#id_username").show();
                });
                $("#hide_button").click(function() {
                    $("#id_username").hide();
                });
        });
    </script>
    <div class="contentarea">
        <form method="post" action="">{% csrf_token %}
            {{ reg_form.as_p }}
            <input type="submit" value="register" />
        </form>
    </div>

#forms.py
class RegistrationForm(forms.Form):
    username = forms.CharField(label="Username", max_length=30)
    email = forms.EmailField(label="Email")
    password = forms.CharField(label="Password", widget=forms.PasswordInput())
    password2 = forms.CharField(label="Password (Again)", widget=forms.PasswordInput())

Here your clean methods and so on

Django will automatically create an id for your fields like id_yourfield. Django会自动为您的字段（例如id_yourfield）创建一个ID。

在Django模板中使用javascript

问题描述

2 个解决方案

解决方案1
2 2012-08-14 12:22:08

解决方案2
1 已采纳 2012-08-14 12:27:40

在Django模板中使用javascript

问题描述

2 个解决方案

解决方案1 2 2012-08-14 12:22:08

解决方案2 1 已采纳 2012-08-14 12:27:40

解决方案1
2 2012-08-14 12:22:08

解决方案2
1 已采纳 2012-08-14 12:27:40