Автоматический вывод суммы значений в 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, время: 08:18. |