在计算中使用输入字段的值，并将结果显示在另一个元素中

Question

I have a shopping cart, with a price, quantity, and subtotal field for each product. The quantity field can be changed by the user, but the other fields are static.

Is there a way to calculate the subtotal when the quantity is changed by the user? I want to multiply the quantity with the price, then update the subtotal, without the need for the user to submit the form. Also, when a subtotal is calculated, the total should be updated as well.

Visual representation here

My code is a Django template and looks like this, with the relevant part in the loop:

<div class="container">
<table id="cart" class="table table-hover table-condensed">
            <thead>
                <tr>
                    <th style="width:50%">Product</th>
                    <th style="width:10%">Price</th>
                    <th style="width:8%">Quantity</th>
                    <th style="width:22%" class="text-center">Subtotal</th>
                </tr>
            </thead>
{% for crops_ordered_names,crops_ordered_images,crops_ordered_cost,crops_ava in total %}
            <tbody>
                <tr>
                    <td data-th="Product">
                        <div class="row">
                            <div class="col-sm-2 hidden-xs"><img src="http://placehold.it/100x100" alt="..." class="img-responsive"/></div>
                            <div class="col-sm-10">
                                <h4 class="nomargin">{{crops_ordered_names}}</h4>
                                <p>Available amount: {{crops_ava}}</p>
                            </div>
                        </div>
                    </td>
                    <td data-th="Price" id="price">{{crops_ordered_cost}}</td>
                    <td data-th="Quantity">
                        <input type="number" class="form-control text-center" id="quan"  min="1" max="{{crops_ava}}">
                    </td>
                    <td data-th="Subtotal" class="text-center" id="subtotal"></td>
                    <td class="actions" data-th="">
                        <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
                    </td>
                </tr>
            </tbody>
{% endfor %}
            <tfoot>
                <tr class="visible-xs">
                    <td class="text-center"><strong>Total 1.99</strong></td>
                </tr>
                <tr>
                    <td colspan="2" class="hidden-xs"></td>
                    <td class="hidden-xs text-center" id="total"><strong>Total </strong></td>

                </tr>
            </tfoot>
        </table>

Answer 1

The first thing you need to do is make a small change to your HTML code. Since you will be listing multiple products, each with its own price, quantity, and subtotal, you need to use class or data attributes instead of id , as id is unique to the entire document and an ID can only be used once. The relevant code (inside the loop) should look something like this:

<tbody>
  <tr>
    <td data-th="Product">
      <div class="row">
        <div class="col-sm-2 hidden-xs"><img src="http://placehold.it/100x100" alt="..." class="img-responsive"/></div>
        <div class="col-sm-10">
          <h4 class="nomargin">{{crops_ordered_names}}</h4>
          <p>Available amount: {{crops_ava}}</p>
        </div>
      </div>
    </td>
    <td data-th="Price" data-type="price">{{crops_ordered_cost}}</td>
    <td data-th="Quantity">
      <input type="number" class="form-control text-center" data-type="quan" min="1" max="{{crops_ava}}">
    </td>
    <td data-th="Subtotal" class="text-center" data-type="subtotal"></td>
    <td class="actions" data-th="">
      <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
    </td>
  </tr>
</tbody>

You will also need to update your table footer so the total cell get a data attribute:

<td class="text-center" data-type="total"><strong>Total <span>0</span></strong></td>

(The span element is needed so we can update the number only.)

The example code below should then do the trick, updating the subtotal when the quantity is changed. The code might not work in Internet Explorer, so let me know if that is a requirement. I also added comments to help clarify what happens where.

// Find all quantity inputs, and the element where we display the total.
const quantityInputs = document.querySelectorAll('[data-type="quan"]');
const total = document.querySelector('[data-type="total"] span');

// For simplicity, we calculate the total in a separate function.
const calculateTotal = () => {
  // Find all the subtotals.
  const subtotals = document.querySelectorAll('[data-type="subtotal"]');
  let calculatedTotal = 0;

  // Loop through all the subtotals, and add them to the final total.
  Array.from(subtotals).forEach((subtotal) => {
    calculatedTotal += Number(subtotal.textContent);
  });

  // Then return the total.
  return calculatedTotal;
}

// As above, we use a separate function to calculate the subtotal for a product.
const calculateSubtotal = (product) => {
  // The input event will fire when the value of the quantity field is changed.
  product.addEventListener('input', () => {
    /*
     * With multiple prices and subtototals, we need to look for them going
     * upwards from the quantity field, using the parent elements (first the
     * table cell, then the table row).
     */
    const parentRow = product.parentNode.parentNode;

    // Then find the price and subtotal for this product.
    const price = parentRow.querySelector('[data-type="price"]');
    const subtotal = parentRow.querySelector('[data-type="subtotal"]');

    // And finally, update the subtotal and the total.
    subtotal.textContent = price.textContent * product.value;
    total.textContent = calculateTotal();
  });
}

// Loop through all the quantity inputs and wait for the subtotal to change.
Array.from(quantityInputs).forEach((element) => calculateSubtotal(element));