Q:

keyup event is not listened in form inside django template

I am using javascript and django for the first time. In my form, I need to show basic amount from the calculation of two field i.e quantity and rate. For that I did the following 
{% block content %}
<div class="right_col" role="main">
    <h1 class="text-center"> Purchase Order</h1>
    <div class="space"></div>
    <!-- {%include 'includes/form.html'%} -->
    {%include 'dashboard/purchase_order/purchase_order_form.html'%}
</div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
  <script>
    $(document).ready(function() {
      console.log('dom is ready');
      $('#form-change').keyup(function() {
        console.log('form')
        var quantity = document.getElementById('id_quantity').value;
        var rate = document.getElementById('id_rate').value;
        if (quantity && rate) {
          document.getElementById('id_basic_amount').value = parseInt(quantity) * parseInt(rate);
        }
      })
    })
  </script>
{% endblock javascripts %}

<form id="demo-form2 form-change" class="form-horizontal form-label-left" action="" method="post" enctype="multipart/form-data">
   {% csrf_token %}
   <div class="form-group">
      <div class="col-md-6 col-sm-6 col-xs-12">
         <input type="number" name="quantity" value="0" min="0" class="form-control col-md-7 col-xs-12" required="" id="id_quantity">
      </div>
   </div>
   <div class="form-group">
      <div class="col-md-6 col-sm-6 col-xs-12">
         <input type="number" name="rate" value="0.0" step="0.01" class="form-control col-md-7 col-xs-12" required="" id="id_rate">
      </div>
   </div>
   <div class="form-group">
      <div class="col-md-6 col-sm-6 col-xs-12">
         <input type="number" name="basic_amount" value="0.0" step="0.01" class="form-control col-md-7 col-xs-12" required="" id="id_basic_amount">
      </div>
   </div>
</form>

but the keyup event is not listened. The line console.log('dom is ready') is shown in the console but the line console.log('form') is not consoled in the console. I tried separate javascript in jsbin and there it is working 
http://jsbin.com/hadafezeqa/edit?html,console,output
why it is not working in django template only? 

A:

Try binding the keyup event to one of the form elements, not the form itself.
Try changing the input of the form, like this:
 <input type="number" name="quantity" value="0" min="0" class="form-control col-md-7 col-xs-12 form-change" required="" id="id_quantity">

And:
<input type="number" name="rate" value="0.0" step="0.01" class="form-control col-md-7 col-xs-12 form-change" required="" id="id_rate">

And change $('#form-change').keyup() to $('.form-change').keyup()
Hopefully you could see the console.
OR 
Change id of form.
<form id="demo-form2 form-change">

To:
<form id="form-change">

