Форум

FALKOR · #1 (**permalink**) 16.04.2016, 23:26

Здравствуйте, нужна помощь, Нашел нужный js-скрипт, который выводит сумму значений value в input, но хотелось бы что бы он выводил результат не по нажатию на кнопку, а автоматически.
При этом остальной функционал скрипта нужно оставить неизменным!

Скрипт который нужно переделать:

<html>
<head>
<script language="JavaScript">
function sums()
{
 sum=0;
 for(i=1;i<13;i++)
 { 
  var elem=document.getElementById("r"+i);
  if(elem.checked)sum=sum+parseInt(elem.value);
 }
 document.formText.sumOut.value=sum;
}
</script>
</head>
<body>
<form name="formText">
<input type="radio" name="aa" id="r1" value="12">text 1
<input type="radio" name="aa" id="r2" value="24">text 2
<input type="radio" name="aa" id="r3" value="32">text 3
<input type="radio" name="aa" id="r4" value="43">text 4
<input type="radio" name="aa" id="r5" value="45">text 5<BR><BR>
<input type="radio" name="bb" id="r6" value="+24">text 16
<input type="radio" name="bb" id="r7" value="+10">text 17
<input type="radio" name="bb" id="r8" value="+7">text 18<BR><BR>
<input type="radio" name="сс" id="r9" value="+13">text 17
<input type="radio" name="сс" id="r10" value="+9">text 17
<input type="radio" name="сс" id="r11" value="+54">text 17
<input type="radio" name="сс" id="r12" value="+30">text 17
<input type="button" onclick="sums()" value="Подсчитать">
<br>Сумма:<br>
<input type="text" name="sumOut" disabled="false" value="">
</form>
</body>
</html>

Decode · #2 (**permalink**) 17.04.2016, 00:43

document.formText.onchange = function(e) {
  if (!e.target.tagName.type && e.target.tagName.type == 'radio')
    return;

  var sum = 0;

  [].slice.call( this.querySelectorAll('input[type=radio]') ).forEach(function(item) {
    item.checked && (sum += +item.value);
  });

  this.elements.sumOut.value = sum;
};

Vlasenko Fedor · #3 (**permalink**) 17.04.2016, 01:01

<form name="formText">
  <input type="radio" name="aa" id="r1" value="12">text 1
  <input type="radio" name="aa" id="r2" value="24">text 2
  <input type="radio" name="aa" id="r3" value="32">text 3
  <input type="radio" name="aa" id="r4" value="43">text 4
  <input type="radio" name="aa" id="r5" value="45">text 5
  <BR/>
  <BR/>
  <input type="radio" name="bb" id="r6" value="24">text 16
  <input type="radio" name="bb" id="r7" value="10">text 17
  <input type="radio" name="bb" id="r8" value="7">text 18
  <BR/>
  <BR/>
  <input type="radio" name="сс" id="r9" value="13">text 17
  <input type="radio" name="сс" id="r10" value="9">text 17
  <input type="radio" name="сс" id="r11" value="54">text 17
  <input type="radio" name="сс" id="r12" value="30">text 17
  <input type="button" value="Подсчитать">
  <br>Сумма:
  <br>
  <input type="text" name="sumOut" disabled="false" value="">
</form>

<script>
window.onload = function() {
  document.forms.formText.onclick = function() {
    var sum = 0,
      els = this.querySelectorAll('input[type="radio"]:checked');
    for (var i = 0; i < els.length; i++) {
      sum += +els[i].value;
    }
    this.sumOut.value = sum;
  };
};
</script>

FALKOR · #4 (**permalink**) 17.04.2016, 09:50

Спасибо, это почти то что я хотел, единственное, в старом скрипте выводилась сумма только цифирных значений, даже при наличии в value какого либо текста (если текст после подсчитываемых чисел), можно ли это реализовать как-то в ваших скриптах?
Что бы было понятней и больше никого не мучить:
Нужно отправлять value импутов в которых суммируемые числа (цена), и кратное название товара (текст)
Пример:

<input type="radio" name="cpu" id="r3" value="41 $ i7-3770">

То есть нужно что бы даже при таком value число 41 подсчитывалось.

Форум

Справочник

Discord чат

Курсы javascript