传递Javascript计算到Django后端

我有一个HTML表单，用户在输入表单中输入与之对应的项名和值，当表单提交给Django后端时，它会反映出来。

在我的HTML表单中，我包含了一些Javascript，以便在提交表单之前立即反映这些值的总数，而无需刷新。

我的目标:

在id为Total

的HTML中发送Javascript计算的总金额

<th scope="col">Total Equipment and Assets</th>
<th scope="col" id="Total"></th>

到

中的类total_assets= models.IntegerField(null=True, blank=True, verbose_name='Total Assets')

请注意，这个问题的原因是总价值不是手动添加的，而是直接使用Javascript计算的。

下面是一个示例，以便更清楚地说明。

这是HTML模板:

<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
type="text"
class="form-control"
name="item_1"
id="item_1"
{% if form.is_bound %}value="{{ form.item_1.value }}"{% endif %}/>
{% for err in form.item_1.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
type="number"
class="form-control w-25 subtotal-group subtotal-group-1"
name="item_1_amount"
id="item_1_amount"
{% if form.is_bound %}value="{{ form.item_1_amount.value }}"{% endif %}/>
{% for err in form.item_1_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
type="text"
class="form-control"
name="item_2"
id="item_2"
{% if form.is_bound %}value="{{ form.item_2.value }}"{% endif %}/>
{% for err in form.item_2.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25 subtotal-group subtotal-group-1"
name="item_2_amount"
id="item_2_amount"
{% if form.is_bound %}value="{{ form.item_2_amount.value }}"{% endif %}/>
{% for err in form.item_2_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>

这是javascript

<script>
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
const results={};
console. log(results)
qa('[type="number"].form-control').forEach(input=>input.addEventListener('input',function(e){
results[ this.name ]=Number( this.value );
const resultGroupSet1 = [...qa('.subtotal-group-1')]
.map(s => Number(s.value))
.reduce((a,v) => a+v);
q('th#Total').textContent = resultGroupSet1;
}));
</script>

这里是总和反映在HTML模板

中的地方

<thead class="table-light">
<tr>
<th scope="col">Total Equipment and Assets</th>
<th scope="col" id="Total"></th>
</tr>
</thead>

models.py

item_1                      = models.CharField(max_length=100,null=True, blank=True, verbose_name='Item 1')
item_1_amount               = models.IntegerField(null=True, blank=True, verbose_name='Item 1 Amount')
item_2                      = models.CharField(max_length=100,null=True, blank=True, verbose_name='Item 2')
item_2_amount               = models.IntegerField(null=True, blank=True, verbose_name='Item 2 Amount')
total_assets                = models.IntegerField(null=True, blank=True, verbose_name='Total Assets')

下面是视图:

def add_bp(request):
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = infoForm(request.POST)
# check whether it's valid:
if form.is_valid():
form.save()
b_name = form.cleaned_data.get('bName')
messages.success(request, f'PDF created for {b_name}!')
return redirect('application:core')
# if a GET (or any other method) we'll create a blank form
else:
form = infoForm()
return render(request, 'application/template.html', {'form': form, })

将html更新为:

<thead class="table-light">
<tr>
<th scope="col">Total Equipment and Assets</th>
<th scope="col">
<!-- Value which is visible (calculated using JS) -->
<span id="Total"></span>
<!-- Add a hidden input to store value (value calculated and assigned using JS) -->
<input type="hidden" name="total_assets" value="0" id="total_assets">
</th>
</tr>
</thead>

更新脚本指定resultGroupSet1为:

文本内容到id=Total
值与name=total_assets

// Assign result to span tag which is visible
q('span#Total').textContent = resultGroupSet1;
// Assign result as value to hidden input field with name total_assets
q('input#total_assets').value = resultGroupSet1;

视图中没有其他更改。

当使用name="total_assets"的输入字段时，该值将被传递到请求体，并且可以在request.POST处访问。在这里，由于total_assets字段是隐藏的，它对用户是不可见的，并且当提交表单时，该值仍然在POST数据中可用。因此，当调用form.save()时，计算值(使用JS)将被保存。

我假设你的问题是如何获得这个元素的值:

<th scope="col" id="Total"></th>

你可以简单地输入元素添加在你的html代码和名称添加到它:

<th scope="col"><input id="Total" name="total_assets" value=""></th>

然后在你的views.py:

def add_bp(request):
if request.method == 'POST':
form = infoForm(request.POST)
if form.is_valid():
form.save()

您也可以手动获取Total:

def add_bp(request):
if request.method == 'POST':
total_assets = request.POST.get("total_assets")

可能你正在寻找的是<input type="hidden" ...>，它是不可见的最终用户，它包含在表单提交

为什么不在Django后端做这个计算呢?

我的建议是正常传递所有的参数，只是添加一个监听器到模型保存(每次你将保存一个元素到表这一小段代码将运行之前，它保存它):

from django.db.models.signals import pre_save
from django.dispatch import receiver
@receiver(pre_save, model_class)
def form_pre_save(instance, *args, **kwargs):
instance.total_assets = instance.item_1_amount + instance.item_2_amount

这样当你想保存这种元素在不同的地方(例如在后端)你不必重写的代码,而是仅仅保存实例。

您可以在这里阅读有关信号pre_save函数的更多信息

相关内容

最新更新

热门标签：