Django - Javascript Not Working In Templates

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

Solution 1:

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>

Share