how to use onKeyup for django formset input fields

[hunar-art]

hi there i'm trying to add onKeyup() event to my django inlineformset fields , but i dont know how to achieve it this

this is my models.py

class Main(models.Model):
     admin = models.ForeignKey(User,on_delete=models.CASCADE)
     company = models.ForeignKey(Companies,on_delete=models.CASCADE)
     items = models.ManyToManyField(Item,through='Child')
     invoice_number = models.IntegerField()

class Child(models.Model):
     main = models.ForeignKey(Main,on_delete=models.CASCADE)
     item = models.ForeignKey(Item,on_delete=models.CASCADE)
     quantity = models.IntegerField()
     price = models.IntegerField()

and this is my template

{% extends 'base.html' %}
{% load widget_tweaks %}
{% block content %}

<form method="POST">{% csrf_token %}
    {{items.management_form}}
            <div class="flex w-8/12 lg:w-9/12">

                <div class="">
                      invoice number  :
                  </div>        

                <div class="w-10/12 ml-8 border-b border-gray-600 border-dotted">
                    {{form.invoice_number | add_class:'bg-transparent w-full text-center focus:outline-none' }}
                </div>  
            </div>
      <div class="w-full  md:w-11/12 mx-auto realative p-2 bg-gray-200 invoice">

        <!-- table -->
        <div class="mt-1 border border-black">
            <!-- header -->
            <div class="flex flex-wrap grayBG text-sm text-white">
                <div class="w-2/12  border-r text-center">
                    item
                </div> 
                <div class="w-2/12  border-r text-center">
                    price
                </div> 
                <div class="w-2/12  border-r text-center">
                    quantity
                </div>  
                <div class="w-2/12  border-r text-center">
                    total price
                </div>                  
            </div>
            <!-- inputs -->
            <div id="allInp" class="text-right">
                {% for item in items.forms %}

                {{item.id}}
            <div class="flex flex-wrap grayBG text-sm text-black inp">
              <div class="w-20 md:w-2/12 p-2 border-r text-center">
          {{item.item | add_class:'w-full item rounded-lg focus:outline-none py-1'}}                    

                    </div>
                    <div class="w-20 md:w-2/12 p-2 border-r text-center">
          {{item.price | add_class:'price w-full item rounded-lg focus:outline-none py-1'}}                        
                    </div>
                    <div class="w-20 md:w-2/12 p-2 border-r text-center">
          {{item.quantity | add_class:'quantity w-full item rounded-lg focus:outline-none py-1'}}                        
                    </div>
             <div class="w-20 md:w-2/12 p-2 border-r text-center">
               <input type="number" class="totalSumField rounded-lg focus:outline-none py-1 w-full">
               </div>
             </div>                
                {% endfor %}

            </div>
                <div class="w-6/12 flex">
                    <div class="w-6/12 p-2 border-r text-center">
                        <p class="mb-2 text-white">total price</p>
                        <input type="number" id="total" class="rounded-lg focus:outline-none py-1 w-full text-center" placeholder="total price">
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="w-6/12 text-center mt-1 mx-auto mb-6">
        <button type="submit" class="w-full bg-white text-gray-900">print</button>
    </div>
</form>

{% endblock %}

and my js code to show the total price

  function counting(result) { 
      document.getElementById("total").value= result;

   }

  counting(0);

  function totalSumField () {
  let inp = document.querySelectorAll("#allInp > .inp");
  let result=0;
    for(let i=0;i<inp.length;i++){
      let price=inp[i].getElementsByClassName("price")[0].value;
      let quantity=inp[i].getElementsByClassName("quantity")[0].value;
      inp[i].getElementsByClassName("totalSumField")[0].value=(price*quantity);
      } 

function totalSum () {
 let inp = document.querySelectorAll("#allInp > .inp");
 let result=0;
  for(let i=0;i<inp.length;i++){
   let price=inp[i].getElementsByClassName("price")[0].value;
   let quantity=inp[i].getElementsByClassName("quantity")[0].value;
[0].value;
     result+=(quantity*price);
      } 
      counting(result)
      totalSumField()
  }

i want to when the user write something to the quantity and price fields then quantity*price and show the result in the total price field before saving the form , i know i should use onkeyup="totalSum()" to the quantity and price fields but in django i dont know where should i use the onKeyup attribute to the fields !? thank you for helping please

[jpic]

You can use the widget attrs attribute to set onkeyup HTML attribute from Django. https://docs.djangoproject.com/en/3.2/ref/forms/widgets/#widget