如何在javascript中的while循环内将2个文本框的数据相乘？

Question

一旦使用了我在JavaScript中执行过的脚本，它只会更改while循环内第一个文本框的值。 这是我的PHP代码：

<?php 
  $edittable=$_POST['selector'];
  $N = count($edittable);
  for($i=0; $i < $N; $i++)
  {
    $result = mysql_query("SELECT * FROM inventory where assetid='$edittable[$i]'");
    while($row = mysql_fetch_array($result))
    {
      extract($row);
?>      <tr>
          <td></td>
          <td><?php echo $assetdesc; ?></td>
          <td><?php echo $serialno ?></td>
          <td><select class="form-control" name="qtyunit" id="qtyunit" onchange="calculate()"  required>
                  <option>----</option>
                  <?php
                  $qtyfirst = 1;
                for($new = $qtyfirst ; $new <= $assetqty; $new++){
                   ?>
                  <option><?php echo $new; ?></option>
                  <?php
                }
                     ?>
                     </select></td>
          <td><?php echo "₱".number_format((float)$purchaseprice, 2, '.', ','); ?></td>
          <input value = "<?php echo $purchaseprice; ?>" name="hiddencost" id="hiddencost" hidden>
          <td><input class="form-control" name="totalcost" id="totalcost" readonly></td>
        </tr>
<?php 
    }
  }
?>

这是我的JavaScript：

<script type="text/javascript">
function calculate() {
var myBox1 = document.getElementById('qtyunit').value; 
var myBox2 = document.getElementById('hiddencost').value;
var result = document.getElementById('totalcost'); 
var myResult = myBox1 * myBox2;
result.value = myResult;
 }
 </script>

Answer 1

未经测试，我在这里看到的最大问题是，使用PHP循环输出时，您多次使用相同的HTML id attribute 。
每个文档只能使用一个id名称一次。 如果您想一次使用多个html元素，则必须使用类，例如select：

<select class="form-control" name="qtyunit" class="qtyunit" onchange="calculate()"  required>
    <option>----</option>
    <?php
        $qtyfirst = 1;
        for($new = $qtyfirst ; $new <= $assetqty; $new++){
    ?>
    <option>
        <?php echo $new; ?>
    </option>
    <?php
        }
    ?>
</select>

然后在您的javascript ：

var myBoxes = document.getElementsByClassName('qtyunit').value; 

注意：这个例子可能不是您想要实现的-我只是想指出您的主要错误。

Answer 2

所以到目前为止，我已经使用这种方法解决了我的问题。

php代码：

<?php 
$edittable=$_POST['selector'];
$N = count($edittable);
for($i=0; $i < $N; $i++)
{
$result = mysql_query("SELECT * FROM inventory where assetid='$edittable[$i]'");
while($row = mysql_fetch_array($result))
{
  extract($row);
  ?>      <tr>
          <td></td>
          <td><?php echo $assetdesc; ?></td>
          <td><?php echo $serialno ?></td>
          <td><select class="form-control" name="qtyunit[]" id="qtyunit<?php echo $assetid; ?>" onchange="calculate(<?php echo $assetid; ?>)"  required>
                  <option>----</option>
                  <?php
                  $qtyfirst = 1;
                for($new = $qtyfirst ; $new <= $assetqty; $new++){
                   ?>
                  <option><?php echo $new; ?></option>
                  <?php
                }
                     ?>
                     </select></td>
          <td><?php echo "₱".number_format((float)$purchaseprice, 2, '.', ','); ?></td>
          <input value = "<?php echo $purchaseprice; ?>" name="hiddencost[]" id="hiddencost<?php echo $assetid; ?>" hidden>
          <td><input class="form-control" name="totalcost[]" id="totalcost<?php echo $assetid; ?>" readonly></td>
          </tr>
            <?php 
          }
        }
            ?>

javascript：

<script type="text/javascript">
function calculate(id){
var quantity = document.getElementById('qtyunit'+id).value;
var price = document.getElementById('hiddencost'+id).value;
var sum = parseInt(quantity,10)*parseInt(price,10); 
document.getElementById('totalcost'+id).value = sum;
}
</script>