using javascript in a django template

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. I would like to apply the javascript code to a form that is being generated by a django app. I have tried to hide a field by changing the javascript element ID as follows,

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.

In my django template html file, I have included the js file from the site that is being served up by django.

<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. So I know the javascript file is contained within the template.

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.

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.!

Thanks - Oli

Answer 1

You need to Include the Jquery library before including your jquery file , so swap it to this:

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

using javascript in a django template

Question

2 answers

solution1
2 2012-08-14 12:22:08

solution2
1 ACCPTED 2012-08-14 12:27:40

using javascript in a django template

Question

2 answers

solution1 2 2012-08-14 12:22:08

solution2 1 ACCPTED 2012-08-14 12:27:40

solution1
2 2012-08-14 12:22:08

solution2
1 ACCPTED 2012-08-14 12:27:40