Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.11.2017, 20:55
Аспирант
Отправить личное сообщение для Anushki Посмотреть профиль Найти все сообщения от Anushki
 
Регистрация: 07.11.2017
Сообщений: 43

калькулятор для расчета стоимости
Ребят. извините что дублирую подобную тему) но вопрос немного другой теперь.

Есть форма.
<form>

<p><input name="itemtype1" id="a" type="radio" value="10"> Значение (A=10)</p>
<p><input name="itemtype1" id="b" type="radio" value="20"> Значение (B=20)</p>
<p><input name="itemtype1" id="c" type="radio" value="30"> Значение (C=30)</p>

<p><input type="checkbox" name="itemtype2" id="d" value="10"> <label>Значение (D=10)</label></p>
<p><input type="checkbox" name="itemtype2" id="e" value="20"> <label>Значение (E=20)</label></p>

<select name="itemtype3" id="f">
<option value="100">Значение (F=100)</option>
<option value="200">Значение (F=200)</option>
<option value="300">Значение (F=300)</option>
</select>

<p><input type="text" name="itemtype4" id="g" value="0"> Значение (G=по умолчанию 0, число будет введенно в ручную)</p>

<p>Итого: <output name="o" for="a b c d e f g">0</output></p>
</form>


Как видите в ней разные поля. Такие как: text,radio,checkbox и select и в каждой из них свои "целые" единичные значения.

Задача состоит в том что нужно сложить знаком "+" эти значения и вывести их итоговую сумму.

Подскажите пожалуйста готовое решение для такой операции. Желательно такое чтобы в случае надобности добавить новый input или select, я могла легко дописать его в скрипт..

Прошу только без сложных ботанческих выражений) я новичек. вы мужики в конце концов?) помогите даме. уже целый день потратила на это))

Последний раз редактировалось Anushki, 07.11.2017 в 20:58.
Ответить с цитированием
  #2 (permalink)  
Старый 07.11.2017, 21:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

калькулятор для расчета стоимости
Anushki,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


</head>

<body>
<form>

<p><input name="itemtype1" id="a" type="radio" value="10"> Значение (A=10)</p>
<p><input name="itemtype1" id="b" type="radio" value="20"> Значение (B=20)</p>
<p><input name="itemtype1" id="c" type="radio" value="30"> Значение (C=30)</p>

<p><input type="checkbox" name="itemtype2" id="d" value="10"> <label>Значение (D=10)</label></p>
<p><input type="checkbox" name="itemtype2" id="e" value="20"> <label>Значение (E=20)</label></p>

<select name="itemtype3" id="f">
<option value="100">Значение (F=100)</option>
<option value="200">Значение (F=200)</option>
<option value="300">Значение (F=300)</option>
</select>

<p><input type="text" name="itemtype4" id="g" value="0"> Значение (G=по умолчанию 0, число будет введенно в ручную)</p>

<p>Итого: <output name="o" for="a b c d e f g">0</output></p>
</form>

<script>
  window.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('form'),
    elem = form.querySelectorAll('[name^="itemtype"]'),
    output = form.querySelector('output');
    function total()
    {
      output.innerHTML = [].reduce.call( elem, function(sum, el) {
          var n =   (+el.value||0) * (el.checked || el.tagName == "SELECT" || el.type == "text");
          return sum + n
       },0);
    }
    form.addEventListener('change', total);
    form.addEventListener('input', total);
      });
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 07.11.2017, 21:38
Аспирант
Отправить личное сообщение для Anushki Посмотреть профиль Найти все сообщения от Anushki
 
Регистрация: 07.11.2017
Сообщений: 43

Рони. огромное тебе спасибо ) выручил. наконец вопрос закрыт. я весь день не могла ничего сделать. Пробовала сама но пока не выходит. благодарю за готовое решение.. с меня отзыв и +
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужен калькулятор расчета стоимости топлива griale Работа 3 11.10.2014 00:10
Нужен калькулятор для расчета газобетона artstil Работа 7 27.04.2014 14:03
Калькулятор стоимости из 3 массивов. sergiocharm Работа 2 21.03.2014 23:01
Калькулятор расчета полиграфии 120gramm Общие вопросы Javascript 1 25.09.2010 15:44