Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.10.2016, 09:21
Новичок на форуме
Отправить личное сообщение для Pladzuma Посмотреть профиль Найти все сообщения от Pladzuma
 
Регистрация: 10.11.2015
Сообщений: 4

Динамическое изменение цифр в накладной
Всем доброго времени! Есть 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, 28.10.2016 в 09:34.
Ответить с цитированием
  #2 (permalink)  
Старый 28.10.2016, 10:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 29.10.2016, 11:34
Новичок на форуме
Отправить личное сообщение для Pladzuma Посмотреть профиль Найти все сообщения от Pladzuma
 
Регистрация: 10.11.2015
Сообщений: 4

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

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Pladzuma,
<form>
<input name="dostavka" type="checkbox" value="800">
var dostavka= form.dostavka.checked? +form.dostavka.value : 0;


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

Последний раз редактировалось рони, 29.10.2016 в 12:19.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое изменение времени. iAlexandeR Events/DOM/Window 1 24.12.2015 10:56
Динамическое изменение цветов div Vladimir93 Общие вопросы Javascript 0 14.11.2014 14:55
Динамическое изменение фона ячейки CyMKuH Элементы интерфейса 2 11.07.2011 15:19
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 17:17
Динамическое изменение размеров изображения Макс Элементы интерфейса 7 21.07.2008 16:55