我正在使用可以实时计算值的Django表单。我希望javascript函数适用于所有包含3个输入字段的所有行。我尝试为每个输入字段分配一个ID,后跟一个forloop计数器。我还遍历了该函数,希望它能对所有id,a1,a2,a3 ... b1,b2,b3 ... c1,c2,c3 ...起作用
但是,该功能仅适用于最后一行。
这是我使用的JavaScript:
<script type="text/javascript">
for (i = 0; i < {{ total_rows|safe }}; i++) {
$('input').keyup(function(){
var firstValue = Number($('#a'+i).val());
var secondValue = Number($('#b'+i).val());
document.getElementById('c'+i).value = firstValue * secondValue;
});
}
</script>
这是我的模板:
<form>
{% csrf_token %}
<table>
<thead>
<tr>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
{% for item, amount in loop_list %}
<tr>
<td>
<input id="a{{ forloop.counter }}" type="text" class="form-control" placeholder="" name="quantity1" value="{{ item.quantity }}">
</td>
<td>
<input id="b{{ forloop.counter }}" type="text" class="form-control" placeholder="" name="unit_price1" value="{{ item.product.unit_price }}">
</td>
<td>
<input id="c{{ forloop.counter }}" type="text" class="form-control" placeholder="{{ amount }}" readonly>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
参考方案
您将所有输入多次绑定到多个keyup处理程序。但是,您无需在此处使用ID;循环遍历JavaScript中的行。我在这里简化了标记。
(但是,如果您打算将此表单回发到Django,则每个输入必须具有唯一的name
!)
{% for item, amount in loop_list %}
<tr class="calc-row">
<td>
<input class="quantity" value="{{ item.quantity }}">
</td>
<td>
<input class="unit-price" value="{{ item.product.unit_price }}">
</td>
<td>
<input class="amount" readonly>
</td>
</tr>
{% endfor %}
设置好类后,您就只能绑定一次数量和单价输入,并让事件处理程序按行查找元素。
$("input.quantity, input.unit-price").keyup(function() {
var $row = $(this).closest("tr.calc-row");
var quantity = Number($row.find(".quantity").val());
var unitPrice = Number($row.find(".unit-price").val());
$row.find(".amount").val(quantity * unitPrice);
});
在PHP文件中调用javascript函数并在加载HTML文件之后? - javascript我需要在我的php中调用js函数,但无法正常工作。有人可以告诉我我在做什么错吗?我该如何轻松地做到这一点?谢谢!我有三个文件: mail.php负责发送$ _POST的内容(工作正常)。我调用我的javascript函数来切换模式,具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…
如何使用PHP从动态输入字段捕获数组值? - javascript我正在编写一个在线时间跟踪网页,允许用户将学习时间输入该系统。用户将首先输入名称,然后根据日期输入学习时间。一天中可能会有多个学习时间。以下是我第一页的编码,<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…
使用php重新加载内容 - javascript在对网站进行编程时,我以前使用过此代码,它可以完美工作,但是现在当我想使用一些Flash部件时,每次单击链接时,它都会重新加载所有网站。源代码: <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…
用jQuery填充模式形式 - javascript我正在将订单表从数据库绘制到datatables(jquery插件)中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是,如何获取单击添加付款按钮以添加付款的行的订单ID。其次,当点击addpayment时,它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段,并使其不可编辑或隐藏,但在提交模态表单时将其发布到服务器。表格和模式表…
选择后显示输入元素 - javascript我有一个表格,其中取决于用户的选择,输入元素是否可见。实际上,用户正在以另一种形式设置已定义的合作伙伴类型,并且如果选中该元素,则允许在该类型的合作伙伴上可见的元素类型1将显示以下元素:<input type="text" id="partner" name="partner" class=&…