Javascript-форум - Динамическое изменение цифр в накладной

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Динамическое изменение цифр в накладной (https://javascript.ru/forum/dom-window/65594-dinamicheskoe-izmenenie-cifr-v-nakladnojj.html)

Динамическое изменение цифр в накладной

Всем доброго времени! Есть html-накладная, для неё несколько задач по JS, которые сам решить не смогу, собственно:

<form>
   <div>
      <span>Цена товара</span>
      <input name="price" type="text"></input>
   </div>
   <div>
      <span>Количество</span>
      <input name="amount" type="text"></input>
   </div>
   <div>
      <span>Сумма транзакции</span>
      <input name="sum" type="text"></input>
   </div>
</form>

При вводе цены товара и количество, сразу в поле "сумма" должна изменяться сумма накладной (цена*количество=сумма).

То есть, вводим "цена товара" - 5, а в "количество" - 3 и чтоб в "сумма" сразу при вводе выдало нам 15, без кликов и прочих действий кроме ввода текста.

По сути в накладной таких операций полно (скидки, расходы, прибыль и прочее) с умножением, вычислением и сложением , но мне хватит одного примера где чётко можно понять принцип такой задачи, под остальные инпуты поправлю скрипт сам) Спасибо заранее!

Pladzuma,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

  <script>
     window.addEventListener('DOMContentLoaded', function() {
       var form = document.querySelector('form');
       form.addEventListener('input', function() {
        var price = +form.price.value || 0;
        var amount = +form.amount.value || 0;
        form.sum.value = price * amount
       });
         });
  </script>
</head>

<body>
<form>
  <div>
    <span>Цена товара</span>
    <input name="price" type="text"></input>
  </div>
  <div>
    <span>Количество</span>
    <input name="amount" type="text"></input>
  </div>
  <div>
    <span>Сумма транзакции</span>
    <input name="sum" type="text"></input>
  </div>
</form>


</body>
</html>

Рони, огромное спасибо! Уже второй раз подряд меня выручаете) Прям то что нужно было!!!
Кстати, не поможете ли вы с новой похожей задачей?

<h2>Расходы</h2>
   <div>
       <span>доставка</span>
       <input name="dostavka" type="checkbox">
   </div>
   <div>
       <span>разгрузка</span>
       <input name="razgruzka" type="checkbox">
   </div>
   <div>
       <span>Прочее</span>
       <input name="prochee" type="checkbox">
   </div>
   <div>
       <span>сумма</span>
       <input name="costssum" type="text">
   </div>

К примеру "расходы", есть несколько их пунктов: доставка, разгрузка и т.д. , и у каждой чекбокс, пункт где нажмется чекбокс должен идти в сумму расходов, как реализовать это также динамически?

Pladzuma,
<form>
<input name="dostavka" type="checkbox" value="800">

var dostavka= form.dostavka.checked? +form.dostavka.value : 0;

form.addEventListener('input', ...
form.addEventListener('change', тоже самое