Подсчёт суммы значений выбранных radio
Нашёл себе почти подходящий скрипт. После моей правки формы, скрипт просто подсчитывает сумму значений выбранных радиокнопок.
Проблема: в сумме <span id='total_sum'> считаются все значения тегов <bdo>. Мне нужно несколько сумм определённых <bdo> в одной форме (чтобы было понятнее, закомментировал желаемое в html-коде формы) Помогите пожалуйста, если не сложная задача. <script type='text/javascript'> /* * Входные параметры функции: * quant - количество товара * prise - стоимость за единицу * updElemId - идентификатор элемента, в котором требуется обновить данные (по конкретному товару) **/ function calculate(quant, prise, updElemId){ // данное регулярное выражение проверяет, является ли введенное значение числом // учтите, что дробное число тоже является корректным!!! (ведь можно же продавать по полторы тонны чего-либо?) var anum = /(^\d+$)|(^\d+\.\d+$)/; if (!anum.test(quant)) { // если данные не валидны - выводим предупреждение и прерываем выполнение функции alert('Введенное значение не является числом!'); return; } // сумма по наименованию = количество * цену goodSum = quant * prise; // обновляем элемент - выводим в нем полученную сумму // если непонятно: вместо параметра применяемой функции - updElemId // у нас подставляется ID конкретного элемента страницы, с которым эта функция была вызвана. // Про innerHTML можете самостоятельно поискать в сети - информации море document.getElementById(updElemId).innerHTML = goodSum; // "вытаскиваем" все, что есть внутри нашей формы с id = 'me_order_form' var meForm = document.getElementById('me_order_form'); // затем как бы фильтруем эти данные - берем только то, что в контейнерах <bdo></bdo> var bdoArray = meForm.getElementsByTagName('bdo'); // устанавливаем начальное нулевое значение ОБЩЕЙ суммы var allSumm = 0; // и в цикле прибавляем к ней сумму каждого товара for (j = 0; j < bdoArray.length; j++) { // функция parseFloat преобразует данные в число с плавающей запятой // без этого сумма не считалась бы, а использовалась КОНКАТЕНАЦИЯ - // то есть 100 и 200 будет не 300 (как нужно нам), а 100200 - что нам совсем не нужно :) allSumm = allSumm + parseFloat(bdoArray[j].innerHTML); } // и обновляем содержимое контейнера с id = total_sum document.getElementById('total_sum').innerHTML = allSumm; } </script> <form id='me_order_form'> <table> <tr><td colspan='2'>ОВОЩИ</td></tr> <tr> <td>огурец</td><td><input type='radio' value='1' id='inp_1' name = "check" onclick='calculate(this.value, "5", "bdo_1")'></td> <td>помидор</td><td><input type='radio' value='1' id='inp_1' name = "check" onclick='calculate(this.value, "8", "bdo_1")' ></td> <td>тыква</td><td><input type='radio' value='1' id='inp_1' name = "check" onclick='calculate(this.value, "4", "bdo_1")' ></td> <td><bdo dir='ltr' id='bdo_1'>0</bdo> руб.</td> </tr> <tr><td colspan='2'>АЛКОГОЛЬ</td></tr> <tr> <td>вино</td><td><input type='radio' value='1' id='inp_2' name = "check2" onclick='calculate(this.value, "50", "bdo_2")'></td> <td>водка</td><td><input type='radio' value='1' id='inp_2' name = "check2" onclick='calculate(this.value, "30", "bdo_2")' ></td> <td>коньяк</td><td><input type='radio' value='1' id='inp_2' name = "check2" onclick='calculate(this.value, "70", "bdo_2")' ></td> <td><bdo dir='ltr' id='bdo_2'>0</bdo> руб.</td> </tr> <!-- <tr><td colspan='2'>МЯСНЫЕ ПРОДУКТЫ</td></tr> <tr> <td>Сосиски</td><td><input type='radio' value='1' id='inp_3' name = "check3" onclick='calculate(this.value, "68", "bdo_3")'></td> <td>Колбаса</td><td><input type='radio' value='1' id='inp_3' name = "check3" onclick='calculate(this.value, "96", "bdo_3")' ></td> <td>Сордельки</td><td><input type='radio' value='1' id='inp_3' name = "check3" onclick='calculate(this.value, "60", "bdo_3")' ></td> <td><bdo dir='ltr' id='bdo_3'>0</bdo> руб.</td> </tr> <tr><td colspan='2'>ФРУКТЫ</td></tr> <tr> <td>Банан</td><td><input type='radio' value='1' id='inp_4' name = "check4" onclick='calculate(this.value, "17", "bdo_4")'></td> <td>Яблоко</td><td><input type='radio' value='1' id='inp_4' name = "check4" onclick='calculate(this.value, "10", "bdo_4")' ></td> <td>Киви</td><td><input type='radio' value='1' id='inp_4' name = "check4" onclick='calculate(this.value, "25", "bdo_4")' ></td> <td><bdo dir='ltr' id='bdo_4'>0</bdo> руб.</td> </tr> --> <tr><td>Сумма овощей и спиртного: </td><td><span id='total_sum'>0</span> рублей</td></tr> <!-- <tr><td>Сумма ФРУКТОВ и МЯСНОГО: </td><td><span id='total_sum'>0</span> рублей</td></tr> --> <table> </form> Если что, скрипт отсюда |
Или может быть есть готовый скрипт, где можно вывести несколько сумм значений value определённых input'ов в одной форме?
|
Я в свое время с похожей задачей сталкивался - нужно было сделать калькулятор, высчитывающий стоимость окна. Задачу решил следующим образом:
<script type="text/javascript"> var x; y; kvadrat; gum; a; b; c; d; /*steklo = 190 = 260; derevo = 385 = 435; work = 90; lak = 115; furnitura = 350*/ function calculator(){ var x = document.getElementById('Shyr').value; var y = document.getElementById('Vys').value; var kvadrat = (x * y); var gum = ((x * 2 + y * 2) * 2) * 8; var a = ((kvadrat * 190) + (kvadrat * 385) + gum + (90 * kvadrat) + (115 * kvadrat) + 350).toFixed(2); //1kam - gl var b = ((kvadrat * 260) + (kvadrat * 385) + gum + (90 * kvadrat) + (115 * kvadrat) + 350).toFixed(2); //2kam - gl var c = ((kvadrat * 190) + (kvadrat * 435) + gum + (90 * kvadrat) + (115 * kvadrat) + 350).toFixed(2); //1kam - otkr var d = ((kvadrat * 260) + (kvadrat * 435) + gum + (90 * kvadrat) + (115 * kvadrat) + 350).toFixed(2); //2kam - otkr myWin=open("", "displayWindow", "width=500,height=200"); myWin.document.open(); myWin.document.write("<head><title>Ваш заказ</title></head><body bgcolor='green'><center><table border='1' cellspacing='0' rowspacing='0'><tr><td colspan='2'><b><center>Стоимость Вашего заказа:</center></b></td></tr><tr><td>Стоимость однокамерного глухого окна:</td><td>" + a + " грн." + "</td></tr><tr><td>Стоимость двухкамерного глухого окна:</td><td>" + b + " грн." + "</td></tr><tr><td>Стоимость однокамерного открывающегося окна:</td><td>" + c + " грн." + "</td></tr><tr><td>Стоимость двухкамерного открывающегося окна:</td><td>" + d + " грн." + "</td></tr></table></center></body>"); myWin.document.close(); } </script> И HTML код: <FORM NAME="calculation" METHOD="post" ACTION=""> <table border=0 align=center cellspacing=1 cellpadding=2 BgColor=#0D6A0E> <tr><td><FONT size="2" color="#FFFFFF">Ширина:</font></td> <td><INPUT TYPE="text" ID="Shyr" size="24"></td></tr> <tr><td><FONT size="2" color="#FFFFFF">Высота:</font></td> <td><INPUT TYPE="text" ID="Vys" size="24"></td></tr> <tr><td colspan=2 align=center><INPUT TYPE = "submit" NAME = "Go" VALUE = "Рассчитать" onClick="calculator()"> <INPUT TYPE=reset VALUE=" Сброс "></td></tr></table> </FORM> Может для Вашего примера подойдет ;) |
TRos Спасибо, почти. пара проблем
сокращаю уровнение до нужного мне var a = one + two; :) При выводе "a" не правильно складывает. например 5+5 = 55. 2. У меня не text а radio. И при выборе любой радио-кнопки, берёт значение value первой <INPUT TYPE="radio" ID="one" name="name" value="100"><INPUT TYPE="radio" ID="one" name="name" value="200"><INPUT TYPE="radio" ID="one" name="name" value="300">т.е. 100 в данном случае |
Цитата:
2. Задайте кнопкам разные имена (name) и/или идентификаторы (id) :) |
Часовой пояс GMT +3, время: 07:24. |