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

Question

I'm currently doing an project on online shopping cart, whereby customers can edit the quantity before checkout. I wanted to make it such that when customer edit the quantity, the price of the item and total price of all items will be adjusted. I know I can achieve that though javascript. Can't really work and understand it. It will be nice if someone would help me. Thank you so so much! Ps: I am not sure if my codes are correct, but here's what I tried:

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

I have not done for the total price yet because the price itself isn't working. I know there's something I miss out. Hope someone can enlighten me.

My 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>`

I may have made stupid mistakes,so it will be nice if someone would explain about how javascript works if I got the wrong concepts. Thanks so much for helping!!:)

Answer 1

see demo here

look this line

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

in this line remove '#'

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

and use parseint to convert to integer

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

$list['price'] is false

to get price you need to do like this:

document.getElementById('price').value;

final code is :

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>`