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')
模型.py
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>
ajax是为了拿到表。
我可以更改它,以便当我输入数量时,它将std quantity
表中的值乘以该值并将其填充到相应的列中?
图片以获得更好的说明:
该表是通过以下方式创建的:
<tbody>
{% for product in products %}
<tr>
<td>{{ product.id }}</td>
<td>{{ product.product_name }}</td>
{% for i in quantities %}
{% if forloop.counter == forloop.parentloop.counter %}
<td id="q1">{{ i }}</td>
{% endif %}
{% endfor %}
{% endfor %}
</tr>
</tbody>
简化:乘以Quantity
并Std Qty
填充Quantity p1
解决方案
看起来您想在数据提交之前在客户端执行此操作。正如您可能怀疑的那样,最好使用javascript
. 由于您已经在使用jquery
,我建议您查看change
处理程序:https ://api.jquery.com/change/
您将监听元素的变化,raw data
然后计算新值并填写动态值。上面的文档有几个例子。
那么如何找出元素的 ID 呢?在您的浏览器中使用开发者网络工具(通常right click > inspect element
可以解决问题)。通常,只要您不更改字段名称,这不会更改,但如果您愿意,它们也可以重写。只需创建一个实际的表单(或模型表单)。
一切顺利!
推荐阅读
- html - R Markdown 不使用 R Studio 编织到 Word
- activerecord - 将左连接查询转换为 Yii2 db 活动记录
- python - 如何将一个数据框添加到另一个就地?
- javascript - Vite: resolve.alias - 如何解析路径?
- python - 即使经过显式等待,页面也会持续加载很长时间(Selenium Python)
- spring-webflux - Spring Webflux:进行一次 API 调用,然后进行多次并行调用
- simics - 在任何已安装的包中找不到文件:%simics%/targets/qsp-x86/images/SIMICSX58IA32X64_1_0_0_bp_r.fd
- react-native - ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP) 在 IOS 上不起作用
- typescript - 找不到名称“用户”.Vetur(2304)
- c++ - 将 COM 接口转换为它继承的接口