Question

我目前正在网上购物车上做一个项目，客户可以在结账前编辑数量。我想这样做，当客户编辑数量时，项目的价格和所有项目的总价格将被调整。我知道我可以通过javascript实现这一点。无法真正工作和理解它。如果有人能帮助我会很好。非常感谢你！ Ps：我不确定我的代码是否正确，但这是我尝试的内容：

<script type="text/javascript">
    function update(form){
    var quantity = document.getElementById('#quantity');
    var price = quantity * ($list['price']);
    document.getElementById("price").value = price;
    }
    </script>`

我还没有为总价做过，因为价格本身不起作用。我知道我错过了一些东西。希望有人能够启发我。

我的HTML：

`//database query

<td align='middle'><input type="number"  onChange="update(this)"  id="quantity" name="quantity"   min="1" max='<?php echo $list['quantity'] ?>' value='1'></td>

<td><input type="text" id="price" value='<?php echo $list['price'] ?>' readonly></td>

<td><input type="text" name="amount" id="amount"  readonly></td>`

我可能犯了愚蠢的错误，所以如果有错误的概念，有人会解释javascript的工作原理会很好。非常感谢帮助!! :)

Answer 1

参见演示here

看这一行

quantity = document.getElementById('#quantity');

在此行中删除“＃”

quantity = document.getElementById(**'quantity'**);

并使用parseint转换为整数

var price = quantity * ($list['price']);

$ list ['price']为假

获得你需要做的价格：

document.getElementById('price').value;

最终代码是：

<强> form.php的

//database query

<td align='middle'><input type="number"  onChange="update(this)"  id="quantity" name="quantity"   min="1" max='<?php echo $list['quantity'] ?>' value='1'></td>

<td><input type="text" id="price" value='<?php echo $list['price'] ?>' readonly></td>

<td><input type="text" name="amount" id="amount"  readonly></td>`

<强>的script.js

    <script type="text/javascript">
        function update(form){
    var quantity = document.getElementById('quantity').value;

    var price = document.getElementById("price").value;
    price = parseInt(price);
    quantity = parseInt(quantity);

    var amount= quantity * price ;

    document.getElementById("amount").value = amount;
}


        </script>`

Answer 2

demo here

<强>的index.php

<form> 
<table>
  <thead>
  <tr>
      <th>quantity</th>
      <th>price</th>
      <th>amount</th>
  </tr>
  </thead>
  <tbody>

  <!-- if u use php 
   <?php foreach($i=0; $i<$count; $i++){ ?>
  <tr>
    <td><input type="number" id="quantity_$i" name="quantity_$i"   min="1" max='20' value='1'
    onChange="iteration = 1; update(iteration)" >
    </td>
    <td><input type="text" id="price_$i" value='25' readonly='readonly' ></td>
    <td><input type="text" name="amount_$i" id="amount_$i"  readonly value='25'></td>
  </tr>
  <?php } ?>
   -->
    <tr>
      <td><input type="number" id="quantity_1" name="quantity_1"   min="1" max='20' value='1'
        onChange="iteration = 1; update(iteration)" >
      </td>
      <td><input type="text" id="price_1" value='25' readonly='readonly' ></td>
      <td><input type="text" name="amount_1" id="amount_1"  readonly value='25'></td>
    </tr>

    <tr>
      <td><input type="number" id="quantity_2" name="quantity_2"   min="1" max='20' value='1'
        onChange="iteration = 2; update(iteration)" >
      </td>
      <td><input type="text" id="price_2" value='15' readonly='readonly' ></td>
      <td><input type="text" name="amount_2" id="amount_2"  readonly value='15'></td>
    </tr>

  </tbody>
</table>
</form>

<强>的script.js

功能更新（迭代）{

// alert(iteration);

var quantity = document.getElementById('quantity_' + iteration).value;
// alert('quantity_' + iteration);

var price = document.getElementById('price_' + iteration).value;
price = parseInt(price);
quantity = parseInt(quantity);

var amount= quantity * price ;

document.getElementById('amount_' + iteration).value = amount;

}

编辑数量使用Javascript价格将调整

2 个答案: