如何使用 onKeyup 到 Django 表单输入？

问题描述

我正在尝试将 onKeyup() 事件添加到我的 django inlineformset 字段中，但我不知道如何实现它 这是我的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()

  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 nrx=inp[i].getElementsByClassName("price")[0].value;
      let dana=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;
 let qarz=0;
  for(let i=0;i<inp.length;i++){
   let price=inp[i].getElementsByClassName("price")[0].value;
   let qnt=inp[i].getElementsByClassName("quantity")[0].value;
[0].value;
     result+=(qnt*price);
      } 
      counting(result)
      totalSumField()
  }
  

{% 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" style="direction: rtl;">
            <!-- 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 %}

我想当用户在数量和价格字段中写一些东西然后 quantity*price 并在保存表单之前在总价字段中显示结果，我知道我应该使用 onkeyup="totalSum()" 到 { {1}} 和 quantity 字段，但在 django 中我不知道我应该在哪里使用 price 字段的属性！？ 谢谢你的帮助

解决方法

只需将 onkeyup 添加到我的小部件表单即可解决问题

'quantity':forms.NumberInput(attrs={'class':'form-control','placeholder':'quantity','onkeyup':'totalSum()'}),

并编写js代码进行计算totalSum()