Форум

Pladzuma · #1 (**permalink**) 28.10.2016, 09:21

Всем доброго времени! Есть 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, без кликов и прочих действий кроме ввода текста.

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

рони · #2 (**permalink**) 28.10.2016, 10:03

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>

Pladzuma · #3 (**permalink**) 29.10.2016, 11:34

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

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

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

рони · #4 (**permalink**) 29.10.2016, 12:16

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

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

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

Форум

Справочник

Discord чат

Курсы javascript