实施例

Question

我有一个自动呈现的HTML表单，它使用输入字段的索引。

数量：

<input id="id_orderline_set-0-orderline_quantity" name="orderline_set-0-orderline_quantity" onkeyup="orderlineTotal()" type="number" value="120">

产品价格;

<input id="id_orderline_set-0-orderline_product_price" name="orderline_set-0-orderline_product_price" onkeyup="orderlineTotal()" type="number" value="22">

总线价格;

<input id="id_orderline_set-0-orderline_total_price" name="orderline_set-0-orderline_total_price" tag="orderline_total_price" type="number" value="2640">

对于以下行，增加了id和name的索引，仅显示了数量示例;

<input id="id_orderline_set-1-orderline_quantity" name="orderline_set-1-orderline_quantity" onkeyup="orderlineTotal()"  type="number" value="55">

我想使用以下JavaScript来计算总线价格;

function orderlineTotal()
{
    var orderlineTotalPrice = 0;   
    var theForm = document.forms["orderform"];

    var orderlineQuantityField = theForm.getElementsByName["orderline_quantity"];
    var orderlineProductPriceField = theForm.getElementsByName["orderline_product_price"];
    var orderlineTotalPriceField = theForm.getElementsByName["orderline_total_price"];

    for (var i = 0; i < orderlineQuantityField.length; i ++) {
        orderlineTotalPrice = orderlineQuantityField[i].value * orderlineProductPriceField[i].value;
        orderlineTotalPriceField[i].value = orderlineTotalPrice;
    }
}

由于元素的名称不匹配，因此无法使用。我可以使用部分名称查找元素的名称吗？如果没有，我应该如何循环输入框来计算行总数？

Answer 1

您标记了jQuery，因此如果您想使用jQuery，可以使用带选择器的结尾：

$("input[name$='orderline_quantity']")

ends with

还有

starts with

$("input[name^='id_orderline_set-0']")

和contains

$("input[name*='orderline_']")

Answer 2

也许你可以使用静态名称。为相同类型的输入设置相等的输入名称，然后使用此功能：

var elements = document.getElementsByName('name');
for (var i=0; i<elements.length; i++) {
    doSomething(elements[i]);
}

其中name与输入名称匹配。

实施例

而不是：

name="orderline_set-0-orderline_total_price"

使用：

name="orderline_total_price"

然后：

var orderlineTotalPriceField = theForm.getElementsByName["orderline_total_price"];

依旧......

用于更改名称的Javascript getElementsByName（）

2 个答案:

实施例