在用户填写表单数据时计算输入字段- Django模型表单

Question

我有一个用户表单，通过它可以将数据保存到数据库中。

我希望在填写表单时自动计算某些字段。

例如，净重=毛重-层重量之类的东西。

我还想为诸如LOADING，、UNLOADING，、、DEDUCTION，等字段添加单选按钮，当用户选择给定的选项之一时，值将被计算出来。

设计我想要的表单类型，我只是不知道如何使用Django：

​

​

我正在使用Django模型表单。

Models.py

class PaddyPurchase(models.Model):
    ref_no = models.IntegerField(primary_key='true')
    token_no = models.CharField(max_length=20, unique='true')
    agent_name = models.CharField(max_length=20)
    trip_no = models.IntegerField()
    date = models.DateField()
    vehicle_no = models.CharField(max_length=10)
    bora = models.IntegerField()
    katta = models.IntegerField()
    plastic = models.IntegerField()
    farmer_name = models.CharField(max_length=30)
    farmer_address = models.CharField(max_length=40)
    farm_mob = models.CharField(max_length=10)
    gross_weight = models.IntegerField()
    tier_weight = models.IntegerField()
    net_weight = models.IntegerField()
    bora_weight = models.IntegerField()
    suddh_weight = models.FloatField()
    loading = models.IntegerField()
    unloading = models.IntegerField()
    unloading_point = models.CharField(max_length=20)
    dharamkanta_man = models.CharField(max_length=10)
    rate = models.IntegerField()
    bardana = models.CharField(max_length=7)
    gross_total = models.IntegerField()
    deduction = models.IntegerField()
    kanta = models.IntegerField()
    hemali = models.IntegerField()
    our_vehicle_rent = models.IntegerField()
    agent_commission = models.IntegerField()
    other_amt = models.IntegerField()
    other_remarks = models.CharField(max_length=50)
    advance = models.IntegerField()
    net_total = models.IntegerField()


 # For returning data in ADMIN SITE
 def __str__(self):
     return 'PaddyPurchase'

Forms.py

class PaddyPurchaseForm(forms.ModelForm):
# Code for changing DATE FORMAT (from YYYY-MM-DD to DD-MM-YYYY)
date = forms.DateField(
    widget=forms.DateInput(format='%d%m%Y'),
    input_formats=['%d-%m-%Y']
)

class Meta:
    model = PaddyPurchase
    fields = ['ref_no',
              'token_no',
              'agent_name',
              'trip_no',
              'date',
              'vehicle_no',
              'bora',
              'katta',
              'plastic',
              'farmer_name',
              'farmer_address',
              'farm_mob',
              'gross_weight',
              'tier_weight',
              'net_weight',
              'bora_weight',
              'suddh_weight',
              'loading',
              'unloading',
              'unloading_point',
              'dharamkanta_man',
              'rate',
              'bardana',
              'gross_total',
              'deduction',
              'kanta',
              'hemali',
              'our_vehicle_rent',
              'agent_commission',
              'other_amt',
              'other_remarks',
              'advance',
              'net_total'
              ]

Viwes.py

def add_record(request):

if request.method == "POST":
    form = PaddyPurchaseForm(request.POST)
    if form.is_valid():
        form.save(commit=True)
        messages.success(request, "Data Saved Successfully. - Lucky")
        return index(request)
    else:
        messages.error(request, "Error!!!")
return redirect("index")

Answer 1

这是一个需要JavaScript解决的问题。Django可以处理服务器端，但是由于您希望以用户类型完成这些计算，或者在提交之前输入信息，所以需要JavaScript来处理客户端。表单填好后，仍然可以使用Django已经拥有的内容将其发送到服务器(视图)。

那么，如何使用JavaScript来实现这一点呢？首先给每个输入一个id，这样您就可以在JavaScript (JS)脚本中访问它们，例如，

<input id='gross_weight' ...>
<input id='tier_weight' ...>
<input id='net_weight' ...>

接下来，使用JS 输入事件或变更事件来检测用户何时输入了值，进行计算，然后更新表单中的值：

<script>
    // Get the input elements by targeting their id:
    const gross_input = document.getElementById('gross_weight');
    const tier_input = document.getElementById('tier_weight');
    const net_input = document.getElementById('net_weight');
 
    // Create variables for what the user inputs, and the output:
    let gross = 0;
    let tier = 0;
    let net = 0;

    // Add an event listener to 'listen' to what the user types into the inputs:
    gross_input.addEventListener('input', e => {
      gross = e.target.value;
      updateNet()
    });
    tier_input.addEventListener('input', e => {
      tier = e.target.value;
      updateNet()
    });

    // Update the value of net based on what the user inputs in for gross and tier
    function updateNet(e) {
        net = gross - tier;
        net_input.value = net;
    }
</script>

当用户提交表单时，Django将接管该表单。