具有相同名称的输入字段的值和并单独显示它们

时间:2017-09-11 17:41:39

标签: javascript

我有以下处理订单表格的输入字段,其中包括:

  1. 订单日期在名称字段中显示为数组
  2. 费用在字段

    上给出
    <input type="hidden" name="09-15-2017[]" id="dateprice[]" value="1">
    <input type="hidden" name="09-13-2017[]" id="dateprice[]" value="3">
    <input type="hidden" name="09-13-2017[]" id="dateprice[]" value="4">
    <input type="hidden" name="09-15-2017[]" id="dateprice[]" value="5">
    
  3. 我试图获取警报的输出是:

    Total amount on 09-13-2017 is 7
    Total amount on 09-15-2017 is 6
    

    这正是我目前正在尝试的:

    var chkprice = 0;        
    var chkdate = 0;        
    
    var inps = document.getElementsByID('dateprice[]');
    for (var i = 0; i <inps.length; i++)
    {
      var inp=inps[i];
      var chkprice = inp.value;
    
      if(chkdate==chkdate)
      {
        chkprice +=chkprice;                
      }
      alert("Total amount on "+chkdate+""+chkprice);
      alert(chkprice);
    }
    

    我知道我做了一个糟糕的javascript脚本。 任何人都可以指导我获得如上所示的价值吗?

1 个答案:

答案 0 :(得分:3)

<强> Working fiddle

首先,id属性在同一文档中应该是唯一的,因此您可以使用公共类,如:

<input type="hidden" name="09-15-2017[]" class="dateprice" value="1">
<input type="hidden" name="09-13-2017[]" class="dateprice" value="3">
<input type="hidden" name="09-13-2017[]" class="dateprice" value="4">
<input type="hidden" name="09-15-2017[]" class="dateprice" value="5">

然后你可以使用一个对象来存储一些使用输入名称的对象,如:

var inps = document.querySelectorAll('.dateprice');
var totals = {};

//Sum calculation
for (var i = 0; i <inps.length; i++)
{
  totals[inps[i].name] = (totals[inps[i].name] || 0) + Number(inps[i].value);
}

//Result display
for (var key in totals) {
  if (totals.hasOwnProperty(key)) {
    console.log("Total amount on " + key + " is " + totals[key]);
  }
}

注意:您可以使用replace()从输出中删除括号 [] ,如:

console.log("Total amount on " + key.replace('[]','') + " is " + totals[key]);

希望这有帮助。

&#13;
&#13;
var inps = document.querySelectorAll('.dateprice');
var totals = {};

//Sum calculation
for (var i = 0; i <inps.length; i++)
{
  totals[inps[i].name] = (totals[inps[i].name] || 0) + Number(inps[i].value);
}

//Result display
for (var key in totals) {
  if (totals.hasOwnProperty(key)) {
    console.log("Total amount on " + key + " is " + totals[key]);
  }
}
&#13;
<input type="hidden" name="09-15-2017[]" class="dateprice" value="1">
<input type="hidden" name="09-13-2017[]" class="dateprice" value="3">
<input type="hidden" name="09-13-2017[]" class="dateprice" value="4">
<input type="hidden" name="09-15-2017[]" class="dateprice" value="5">
&#13;
&#13;
&#13;