Question

好的，所以我有一个表单，它将项目添加到项目列表中并使用它进行计算，但添加的每个新项目都在用户端完成，然后提交给服务器进行验证和更新数据库。现在，我已经看了其他答案，并没有真正得到答案。如果用户添加新项目并输入数量和费率，则应自动计算金额，如何提取唯一ID标识符以更改金额值？下面的代码和本例中的唯一标识符是19786868.此标识符的长度始终不同，它们不是唯一的模式，长度和值由随机命令生成。

<input class="form-control" type="text" id="list_item_attributes_19786868_quantity" />
<input class="form-control" type="text" id="list_item_attributes_19786868_rate" />
<input class="form-control" type="text" id="list_item_attributes_19786868_amount" />

如何使用JavaScript中的OnChange命令提取此唯一标识符以计算金额值？

Answer 1

[].forEach.call(document.querySelectorAll(".form-control"), function(el) {

  var id = el.id.replace(/\D+/g,"");
  console.log( id );       // "19786868"

});

所以基本上使用this.id.replace(/\D+/g,"")，其中所有非数字\D都被""替换

以下是使用input事件的示例：

＆＃13;

[].forEach.call(document.querySelectorAll(".form-control"), function(el) {

  el.addEventListener("input", function() {
    var id = this.id.replace(/\D+/g,"");
    alert( id );
  }, false)

});

＆＃13;

<input class="form-control" type="text" id="list_item_attributes_19786868_quantity" />
<input class="form-control" type="text" id="list_item_attributes_123_foobar" />

＆＃13;

_{请注意：asd_123_foo_9将返回1239作为结果，因此请确保始终将asd_123_foo作为ID值}

Answer 2

<input class="form-control" type="text" id="list_item_attributes_19786868_quantity" onchange="extractId(event);"/>

在javascript中：

function extractId(event) {
 var elem = event.target;
 var myArr = elem.id.split('_');

 var yourUnique_id = myArr[3];
}

Answer 3

如果用户添加新项目并输入数量和费率，则应该自动计算金额，如何提取独特金额用于更改金额值的ID标识符？

您可以使用input事件; for循环;属性包含选择器[attributeName*=containsString]，.nextElementSibling，.previousElementSibling，以对包含id和"quantity" id的{{1}}的值进行求和并设置"rate"的结果包含id

＆＃13;

"amount"

＆＃13;

function calculate() {
  this.parentElement.querySelector("[id*=amount]")
  .value = +this.value 
       + +(/quantity/.test(this.id)
           ? this.nextElementSibling 
           : this.previousElementSibling 
          ).value
}

var elems = document.querySelectorAll("[id*=quantity], [id*=rate]");
for (var i = 0; i < elems.length; i++) {
  calculate.call(elems[i]); elems[i].oninput = calculate;
}

＆＃13;

Answer 4

为了能够响应新添加的输入控件，您需要在某个父元素处捕获change事件，否则您将不会在新添加的元素上捕获更改。

以下是一些处理文档更改事件的代码。随着这个事件的爆发，它最终会到达那里，所以我们可以回应它：

为了从输入的id中提取数字，我们可以使用正则表达式：

document.onchange = function(e) {
    var match = e.target.id.match(/^(list_item_attributes_.*?_)(rate|quantity)$/);
    if (!match) return; // not rate or quantity
    // read rate and quantity for same ID number:
    var rate = +document.querySelector('#' + match[1] + 'rate').value;
    var quantity = +document.querySelector('#' + match[1] + 'quantity').value;
    // write product as amount:
    document.querySelector('#' + match[1] + 'amount').value = rate*quantity;
}

Quantity: <input class="form-control" type="text" id="list_item_attributes_19786868_quantity" /><br>
Rate: <input class="form-control" type="text" id="list_item_attributes_19786868_rate" /><br>
Amount: <input class="form-control" type="text" id="list_item_attributes_19786868_amount" /><br>
<p>
Quantity: <input class="form-control" type="text" id="list_item_attributes_14981684_quantity" /><br>
Rate: <input class="form-control" type="text" id="list_item_attributes_14981684_rate" /><br>
Amount: <input class="form-control" type="text" id="list_item_attributes_14981684_amount" /><br>

正如您要求回复change事件一样，我保持这种方式，但您可能有兴趣使用input事件，这会在任何字符发生变化时立即触发在输入中。

上述示例不保护amount字段不受输入影响。您应该对此做些什么，因为用户可能只是覆盖计算结果。

Answer 5

＆＃13;

document.querySelector(".my-form").addEventListener("change", function(e) {

  var changed = e.target;
  var matchedId = changed.id.match(/^(list_item_attributes_[^_]*)_/);
  if (!matchedId) {
    // this isn't one of the relevant fields
    return;
  }
  var uniquePrefix = matchedId[1];
  var quantity = document.querySelector("#" + uniquePrefix + "_quantity");
  var rate = document.querySelector("#" + uniquePrefix + "_rate");
  var amount = document.querySelector("#" + uniquePrefix + "_amount");
  var newVal = quantity.value * rate.value;
  if (isNaN(quantity.value) || isNaN(rate.value) || isNaN(newVal)) {

    amount.value = "";

  } else {

    amount.value = newVal;

  }

});

＆＃13;

<form class="my-form">
  <input class="form-control" type="text" id="list_item_attributes_19786868_quantity" />
  <input class="form-control" type="text" id="list_item_attributes_19786868_rate" />
  <input class="form-control" type="text" id="list_item_attributes_19786868_amount" />
</form>

＆＃13;

使用Javascript提取唯一元素ID

5 个答案: