如何从php循环中获取多个文本框的值并使用javascript对它们求和

Question

我想要的是每一行都应该有它的总和（row1=price x 数量），因为数量变化总和应该自动变化（total=row1 + row2 +row3）所以所有行的总数。因为它只是能够通过第一行实现这一目标。在这里测试我的代码 https://malawiclinic.000webhostapp.com/<form class="form-inline">    <?php        $sqlm="SELECT * FROM tbl_wishlist ORDER BY id DESC ";        $resultmn=mysqli_query($db,$sqlm);        $fcount=mysqli_num_rows($resultmn);        if ($fcount>0) {            $countprice=0;            while($found = mysqli_fetch_array($resultmn)) {                $product = $found['product'];                $qty = $found['Quantity'];                $price = $found['price'];                echo "                    <div class='form-group'>                        <label for='exampleInputName2'>$product</label>                        <input type='text' class='form-control' id='price'                               value='$price'>                    </div>                    <div class='form-group'>                        <input type='number' class='input-text form-control'                               id='quantity' value='$qty'>                    </div>                    <label for='exampleInputName2'>$                        <span id='result'></span>                    </label>";            }        } ?></form><script type="text/javascript">    $(document).ready(function(){        $(document).on("input",".input-text", function(){            var x = document.getElementById("quantity").value;            var x1 = document.getElementById("price").value;            var total = x1 * x;            var totals = total.toLocaleString(undefined,                                              {maximumFractionDigits:2});            $("#result").html(totals);            $("#totals").html(totals);        });    });</script>

Answer 1

首先，该id属性为 HTML 元素指定了唯一的 id（该值在 HTML 文档中必须是唯一的）。您有三个字段 with id="price"、三个 withid="quantity"和三个 withid="result"无效，因此您应该删除那些id(s)。

现在，您必须使用它们的类名访问这些字段getElementsByClassName。由于所有字段都form-control作为它们的公共类，下面的代码将完成这项工作。并将所有内容替换id="result"为class="result".

$(document).ready(function(){

  var input = document.getElementsByClassName('form-control');

  var result = document.getElementsByClassName('result');

  var total = 0;

  for(var i=0; i<input.length; i+=2){

    var product = input[i].value * input[i+1].value;

    total += product;

    product = product.toLocaleString(undefined, {maximumFractionDigits:2});

    result[i/2].innerHTML = product;

  }

  total = total.toLocaleString(undefined, {maximumFractionDigits:2});

  $("#totals").html(total);

});