Javascript 将django表单中的两个字段相乘，并用结果填充第三个字段

我正在django应用程序中创建一个表单，如下所示：

视图.py

@method_decorator([login_required, client_required], name='dispatch')
class MaterialRequestFormView(CreateView):
    model = MaterialRequest
    template_name = 'packsapp/client/materialRequestForm.html'
    fields = "__all__"

    def form_valid (self, form):
        product = form.save(commit=False)
        product.save()
        messages.success(self.request, 'The material request was created with success!')
        return redirect('client:mat_req_table')

class MaterialRequest(models.Model):
    owner = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='allotment_sales')
    flow = models.ForeignKey(Flow, on_delete=models.CASCADE, related_name='flow')
    kit = models.ForeignKey(Kit, on_delete=models.CASCADE, related_name='kit')
    quantity = models.IntegerField(default=0)
    is_allocated = models.BooleanField(default=False)

    quantity_p1 = models.IntegerField(default=0)
    quantity_p2 = models.IntegerField(default=0)
    quantity_p3 = models.IntegerField(default=0)
    quantity_p4 = models.IntegerField(default=0)
    quantity_p5 = models.IntegerField(default=0)

型号.py

@method_decorator([login_required, client_required], name='dispatch')
class MaterialRequestFormView(CreateView):
    model = MaterialRequest
    template_name = 'packsapp/client/materialRequestForm.html'
    fields = "__all__"

    def form_valid (self, form):
        product = form.save(commit=False)
        product.save()
        messages.success(self.request, 'The material request was created with success!')
        return redirect('client:mat_req_table')

class MaterialRequest(models.Model):
    owner = models.ForeignKey(Client, on_delete=models.CASCADE, related_name='allotment_sales')
    flow = models.ForeignKey(Flow, on_delete=models.CASCADE, related_name='flow')
    kit = models.ForeignKey(Kit, on_delete=models.CASCADE, related_name='kit')
    quantity = models.IntegerField(default=0)
    is_allocated = models.BooleanField(default=False)

    quantity_p1 = models.IntegerField(default=0)
    quantity_p2 = models.IntegerField(default=0)
    quantity_p3 = models.IntegerField(default=0)
    quantity_p4 = models.IntegerField(default=0)
    quantity_p5 = models.IntegerField(default=0)

html

 <h2>Material Request Form</h2>

    <div class="row">
        <div class="col-md-6 col-sm-8 col-12">
            <form method="post" id="MaterialRequestForm" data-kit-url="{% url 'employee:ajax_load_kit' %}"
                  data-product-url="{% url 'employee:ajax_load_product' %}"
                  novalidate>
                {% csrf_token %}
                {{ form|crispy }}
                <button type="submit">Save</button>
            </form>
        </div>
    </div>

    <div id="products-table">

    </div>

    <script>

        $("#id_flow").change(function () {
            console.log("function running");
            var url = $("#MaterialRequestForm").attr("data-kit-url");
            var flowId = $(this).val();

            $.ajax({

                url: url,
                data: {
                    'flow': flowId
                },
                success: function (data) {
                    $("#id_kit").html(data);
                    console.log(data);
                }
            });

        });
    </script>

    <script>

        $("#id_kit").change(function () {
            console.log("function running");
            var url = $("#MaterialRequestForm").attr("data-product-url");
            var kitId = $(this).val();

            $.ajax({

                url: url,
                data: {
                    'kit': kitId
                },
                success: function (data) {
                    $("#products-table").html(data);
                }
            });

        });
    </script>

---

为了简化：将

数量

与

标准数量

相乘，然后填充

数量p1

看起来您希望在提交数据之前在客户端执行此操作。正如您可能怀疑的那样，最好使用

javascript

。由于您已经在使用

jquery

，我建议查看

更改处理程序：

您将使用
原始数据侦听元素上的更改，然后计算新值并填充动态值。上面的文档有几个例子

那么，如何找到元素的ID呢？在浏览器中使用开发人员web工具（通常，
右键单击>检查元素
会起作用）。通常，只要不更改字段名，这一点就不会更改，但如果愿意，它们也是可写的。只需创建一个实际的表单（或模型表单）

祝你一切顺利
 您可以通过使用jquery轻松地实现这一点。
为forms.py中的字段指定id

例如，#std是std的id和#quantity For quantity字段的数量

 $('#quantity').change(function(){
     std = $('#std').val();
     quantity = $('#quantity').val();
     x = parseInt(std) * parseInt(quantity);
     // Now assign x to your respective field 
 });

所以，动态地更改值，然后您可以使用django表单或其他方式简单地保存它

希望这有帮助
 
$（'#quantity'）.change（function（）
和
$（'#quantity'）.val（）
。两个位置的关键字相同？仅作为一个解释逻辑的示例，您可以创建一个用于捕获id的常量，然后继续相同的逻辑