Question

我有数组的html表单：

     <form method="post" id="formaa" name="form">

    <div id="fields">
    <div id="divas1" class="row">
<a href="#" id="did1" onClick="d(this);"><img src="d.jpg" /></a><a href="#" id="uid1" onClick="u(this);">
<img src="u.jpg" /></a><input type="text" name="ite[]" id="item" /><input type="text" name="q[]" id="quantity" class="quant" size="3" />
<input type="text" name="pr[]" id="price" size="10" class="kaina" onkeyup="update();"/><input type="text" name="sum[]" id="suma" size="10" disabled="disabled"/></div>
    </div>
    <br />
    <input type="button" name="nw" id="new" value="ADD" onClick="naujas('laukeliai');" /><br />
    Total: <input type="text" name="sumaa[]" id="suma" size="10" disabled="disabled"/>
    </form>

每次我按下表格ADD按钮，<div id="fields">里面都包含新的div块<div id=divas(i++)>我需要乘以qp []和pr []值并动态添加到sum字段，需要多次加价和每种产品的数量分开，并得到每个产品的最终价格（不是所有产品总数）。

首先尝试获取所有值并过滤这两个值，但无法弄明白......

var form = document.getElementsByName('form')[0];
var inputs = form.getElementsByTagName('input');
for (var i = 0, j = inputs.length; i < j; i++) {
    var element = inputs[i];
    alert(element.value);
}

如何从这个数组中提取只需要的值并乘以？谢谢你的建议。

Answer 1

you can read form array in way as below

frmRefer = document.getElementByTagName("form")[0];
for(i= 0 ; i<frmRefer.elements["ite[]"].length;i++){
    alert(frmRefer.elements["ite[]"][i].value );
}
for(i= 0 ; i<frmRefer.elements["quant[]"].length;i++){
    alert(frmRefer.elements["quant[]"][i].value );
}
for(i= 0 ; i<frmRefer.elements["pr[]"].length;i++){
    alert(frmRefer.elements["pr[]"][i].value );
}

Answer 2

假设您要生成所购买的所有产品和数量的价格总和，您首先要将HTML重写为：

<form id="example_form">
<div class="row">
  <input type="text" name="item" class="item"></input>
  <input type="text" name="quant" class="quant"></input>
  <input type="text" name="price" class="price"></input>
</div>
<div class="row">
  <input type="text" name="item" class="item"></input>
  <input type="text" name="quant" class="quant"></input>
  <input type="text" name="price" class="price"></input>
</div>    
<!-- ... many more rows -->
<input type="text" disabled id="sum" name="sum"></input>
</form>

使用jQuery使字段访问更容易。使用JQuery，您将使用以下JS：

function update() {
  var total = 0;
  $("#example_form div.row").each(function(i,o){
    total += $(o).find(".quant").val() *
        $(o).find(".price").val();
  });
  $("#example_form #sum").val(total);
}

这将为您更新总计。要在每次更改任何数字时执行此操作，您需要使用类似

的内容将其注册到相应的字段

$("#example_form div.row input").change(update);

我说服你使用JQuery吗？看到它在http://jsfiddle.net/UnYJ3/2/

工作

使用JS将表单数组中的表单值相乘

2 个答案: