Django - Javascript not working in templates

Question

I am trying to display an input field based on user choice selection. Learning from stackoverflow, I have written the following code:

<form action="/register/" method="post" enctype="multipart/form-data">{% csrf_token %}
<select name="designation" id="designation">
   <option value="faculty">Faculty</option>
   <option value="student">Student</option>
</select>

<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
</form>

<script type="text/javascript">
$('#designation').on('change',function(){
    if( $(this).val()==="student"){
    $("#students").show()
    }
    else{
    $("#students").hide()
    }
});
</script>

The code does work in https://jsfiddle.net/. However, when I am trying to use it in my django template its not working.(i.e., on selecting 'student' nothing appears). I have the following included as well in my base.html.

<script src="{% static 'jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

UPDATE: base.html: hideshow.js is the script.

<!DOCTYPE html>
{% load staticfiles %}
{% load static %}
<html lang="en"
      xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">       

    <link href="{% static 'css/bootstrap-dist.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">
    <script src="{% static 'JS/html5shiv.min.js' %}"></script>
    <script src="{% static 'JS/respond.min.js' %}"></script>
    <script src="{% static 'JS/hideshow.js' %}"></script>


    <link href="{% static 'css/carousel.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'css/sampleLogin.css' %}" />
</head>

<body>
{% include "messages_display.html" %}
<br />
{% include "navbar.html" %}

{% block content %}

{% endblock %}

register.html:

{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block content %}    
<div class="container">
<div class="col-md-12">   
<div class="col-sm-7 col-sm-offset-2">
<h1>{{ title }}</h1><br />        
<form action="/register/" method="post" enctype="multipart/form-data">{% csrf_token %}
<select name="designation" id="designation">
   <option value="faculty">Faculty</option>
   <option value="student">Student</option>
</select>

<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
</form>

{% endblock content %}

Please help.

Please write the code on the document ready block, I hope it will definitely work for you. — Bharat soni
– Bharat soni, Commented Jul 21, 2017 at 7:01
This code works. Please include a full description of what doesn't work. — Serge K.
– Serge K., Commented Jul 21, 2017 at 7:02
@Nathan P, Bharat soni, Hassam Imam, I have tried to describe the problem. — surajitM
– surajitM, Commented Jul 21, 2017 at 7:08
Hi @surajitM I am too facing this issue did you get any solution for this? — SethuNagaKarthik
– SethuNagaKarthik, Commented Jun 12, 2018 at 4:23

Sachin Dane · Accepted Answer · 2017-07-21 07:47:34Z

2

First you have to include jquery.min.js file in html file. Then you have to keep js code in $(document).ready(function().then your code will work

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
        $(document).ready(function() {
            $('#designation').on('change',function(){
                console.log($(this).val());
                if( $(this).val()==="student"){
                    $("#students").show()
                }
                else{
                    $("#students").hide()
                }
            });
        });
</script>

<select name="designation" id="designation">
   <option value="faculty">Faculty</option>
   <option value="student">Student</option>
</select>

<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>

answered Jul 21, 2017 at 7:47

Sachin Dane

2582 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

surajitM Over a year ago

tried your way. included both jquery.min.js and the script in base.html. extended base.html to the current html. Still no joy and I have no clue how to resolve the issue. :(

Sachin Dane Over a year ago

are you using django framework ? or in which framework you are working?

surajitM Over a year ago

using django 1.11

surajitM Over a year ago

No error. Just on changing to 'Student', the upload file does not appear.

Sachin Dane Over a year ago

include jquery.min.js file in base.html file

|

Collectives™ on Stack Overflow

Django - Javascript not working in templates

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related