Форум

Anushki · #1 (**permalink**) 07.11.2017, 20:55

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

Есть форма.

<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, я могла легко дописать его в скрипт..

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

рони · #2 (**permalink**) 07.11.2017, 21:24

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>

Anushki · #3 (**permalink**) 07.11.2017, 21:38

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

Форум

Справочник

Discord чат

Курсы javascript