Подсчёт суммы значений выбранных 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, время: 15:41. |