using javascript in a django template - Stack Overflow|Programmer puzzle solving

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=".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 pressing 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

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

Thanks - Oli

Share Improve this question asked Aug 14, 2012 at 11:41 Oli 2,5875 gold badges23 silver badges21 bronze badges

Why don't you do $('#id1').hide(); ? – Jure C. Commented Aug 14, 2012 at 11:45
Where would I put that code? I have looked at this post which is what I want to do but not sure where to code this? stackoverflow./questions/4183796/… – Oli Commented Aug 14, 2012 at 11:52
Exactly how are you calling that JS? – Daniel Roseman Commented Aug 14, 2012 at 11:58
I thought the javascript was executed when the page was loaded. Perhaps this is the problem? So it needs to be called within the html file? – Oli Commented Aug 14, 2012 at 12:04
If you're hiding or showing fields in response to a checkbox being ticked, what's the point of only running the JS when the page is loaded? Presumably you want it on the onclick attribute of the checkbox, no? – Daniel Roseman Commented Aug 14, 2012 at 12:10

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

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

<head>
   <script src="http://code.jquery./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.

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.

Programmer puzzle solving

using javascript in a django template - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)