Автоматический вывод суммы значений в input-ах
Здравствуйте, нужна помощь, Нашел нужный 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>
|
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;
};
|
<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>
|
Спасибо, это почти то что я хотел, единственное, в старом скрипте выводилась сумма только цифирных значений, даже при наличии в value какого либо текста (если текст после подсчитываемых чисел), можно ли это реализовать как-то в ваших скриптах?
Что бы было понятней и больше никого не мучить: Нужно отправлять value импутов в которых суммируемые числа (цена), и кратное название товара (текст) Пример: <input type="radio" name="cpu" id="r3" value="41 $ i7-3770"> То есть нужно что бы даже при таком value число 41 подсчитывалось. |
| Часовой пояс GMT +3, время: 21:46. |