[英]How do I do calculations in javascript from my formset in django?
我有疑问，发生的事情是我已经设法让我在表格中的第一个表格可以执行操作并代表它们。
我还能够创建动态表单集。
但现在我遇到了问题，我希望 Django 中的表单集进行不同的计算并表示它们。
任何的想法？ 我放的javascript是跟着几个教程学的，问题变复杂了，因为要用JS计算，又是动态的，不知从何下手
忘记格式了，我还是没把HTML放对。。。我只想把绿色输入（数量）乘以红色输入（单价），蓝色输入（总价）里放合计，加上蓝色的并在紫色输入中表示它们（总计）
谢谢你的帮助:D
我把我已经在使用的代码
添加-parts-row.js
function updateEmptyFormIDs(element,totalForms){
var thisInput=element
var currentName=element.attr('name')
//THIS IS WHAT PREFIX REPLACES WITH totalForms
var newName=currentName.replace(/__prefix__/g,totalForms)
//this is what replaces name with the number totalForms
thisInput.attr('name',newName)
//this is what replaces id with the totalForms number
thisInput.attr('id',"id_"+newName)
var newFormRow=element.closest(".form-row");
var newRowId="row_id_"+newName
newFormRow.attr("id",newRowId)
newFormRow.addClass("new-parent-row")
var parentDiv=element.parent();
parentDiv.attr("id","parent_id_"+newName)
var inputLabel=parentDiv.find("label")
inputLabel.attr("for","id_"+newName)
return newFormRow
}
// you click the button and it adds more rows
$( "#add_more" ).click(function(e) {
var formId="id_form-TOTAL_FORMS"
var emptyRow=$("#empty-row").clone();
emptyRow.attr("id",null)
var totalForms=parseInt($('#'+formId).val());
var newFormRow;
emptyRow.find("input, checkbox").each(function(){
newFormRow=updateEmptyFormIDs($(this),totalForms)
})
$(".form-row:last").after(newFormRow)
$('#'+formId).val(totalForms+1);
});
微积分.js
function multiplicar(){
var quantity=parseInt(document.getElementById('id_quantity').value);
var unit_price=document.getElementById('id_unit_price').value;
var total_price=document.getElementById('id_total_price');
total_price.value=quantity*unit_price;
}
function taxes_free() {
var total_price=document.getElementById('id_total_price').value;
var total=document.getElementById('id_total');
if (document.getElementById('id_tax_free').checked){
var libre_impuestos = total_price*0.24;
total.value=total_price - libre_impuestos;
}
}
function totales(){
var descuento=document.getElementById('id_descuento').value;
var total=document.getElementById('id_total').value;
totales=(descuento * total) / 100;
document.getElementById("id_total").value = totales;
}
presupuestos-forms.html
<!-- Parts -->
<h3>Partes</h3>
<section>
<div>
<form action='' method="POST">
{% csrf_token %}
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Partes</h4>
<p class="card-title-desc">Agrega las partes que se incluirán</p>
<div class="table-responsive">
<table class="table table-bordered table-nowrap align-middle">
<thead class="table-info">
<tr>
<th scope="col">Código</th>
<th scope="col">Descripción</th>
<th scope="col">Cantidad</th>
<th scope="col">Precio Unitario</th>
<th scope="col">Precio Total</th>
<th scope="col">Libre de Impuestos</th>
<th scope="col">Agrega Fila</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{{presupuestosparteform.codigo}}
</td>
<td>
{{presupuestosparteform.descripcion}}
</td>
<td>
{{presupuestosparteform.quantity}}
</td>
<td>
{{presupuestosparteform.unit_price}}
</td>
<td>
{{presupuestosparteform.total_price}}
</td>
<td>
<div>
{{presupuestosparteform.tax_free}}
</div>
</td>
<td>
<input type="button" class="btn btn-block btn-default" id="add_more" value="+" />
</td>
</tr>
{{ formset.management_form }}
{% for form in formset %}
<tr id="formset" class="form-row">
<td>
{% render_field form.codigo class="form-control" %}
</td>
<td>
{% render_field form.descripcion class="form-control" %}
</td>
<td>
{% render_field form.quantity class="form-control" %}
</td>
<td>
{% render_field form.unit_price class="form-control" %}
</td>
<td>
{% render_field form.total_price class="form-control" %}
</td>
<td>
{% render_field form.tax_free class="form-check-input" %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<!--el row duplicado en el formset con empty-row-->
<div class="form-row" id="empty-row">
<table class="table table-bordered table-nowrap align-middle">
<td>
{% render_field formset.empty_form.codigo class="form-control" %}
</td>
<td>
{% render_field formset.empty_form.descripcion class="form-control" %}
</td>
<td>
{% render_field formset.empty_form.quantity class="form-control" %}
</td>
<td>
{% render_field formset.empty_form.unit_price class="form-control" %}
</td>
<td>
{% render_field formset.empty_form.total_price class="form-control" %}
</td>
<td>
{% render_field formset.empty_form.tax_free class="form-check-input" %}
</td>
</table>
</div>
</div>
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
<div class="row justify-content-end">
<div class="col-md-3">
<div class="mb-3">
<label>Discount</label>
{{presupuestosparteform.descuento}}
</div>
</div>
</div>
<div class="row justify-content-end">
<div class="col-md-3">
<div class="mb-3">
<label><strong>TOTAL:</strong></label>
{{presupuestosparteform.total}}
</div>
</div>
</div>
</form>
</div>
</section>
您可以尝试django-calculation库来轻松执行该类型的计算。
例子：
Forms 申报
class OrderForm(forms.ModelForm):
total = forms.DecimalField(
# using SumInput a SummaryInput abstraction
widget=calculation.SumInput('subtotal')
)
class Meta:
model = Order
fields = ['date', 'customer']
class OrderDetForm(forms.ModelForm):
quantity = forms.DecimalField()
price = forms.DecimalField()
subtotal = forms.DecimalField(
widget=calculation.FormulaInput('quantity*price')
)
class Meta:
model = OrderDet
fields = ['product', 'price', 'quantity', 'subtotal']
# formset definition
OrderDetFormSet = forms.inlineformset_factory(Order, OrderDet, OrderDetForm)
模板
确保将调用添加到{{ form.media }} 。
<form method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="Submit">
</form>
{{ form.media }}
您无需编写 JavaScript 代码，库负责映射字段并执行指定的公式。
有谁知道在 django 表单集中进行动态计算的插件？
[英]Does anyone know of a plugin to do dynamic calculations in the django formset?
如何将HTML模板页面中的Javascript变量传递给Django视图函数？
[英]How do I pass Javascript variables from my html template page to a Django views function?
如何在 HTML 和 Javascript 的帮助下从浏览器使用 python (Django) 访问我的网络摄像头？
[英]How do i access my webcam with python (Django) from the browser with the help of HTML and Javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.