Создание простого скрипта "калькулятор услуг" (заплочу 150 рублей)

[rashid86]

Нужен скрипт калькулятор с использованием несколько чекбоксов, многострочным списком, поле ввода чисел и подчитыванием итоговую сумму...
Например:

Находил много скриптов, но все они неподойдут.

Создайте, или подскажите как сконструировать такой калькулятор услуг, чтобы было понятно для копирования и добавления дополнительной услуг в калькулятор.

Заплочу 150 рублей через qiwi кошелек тому, кто поможет мне создать.

[rashid86]

Вот например я хотел сделать на подобе этого калькулятора, но неполучился(

<table>
  <tr>
    <td width="319">Выезд проектировщика-оценщика</td>
    <td align="center"><input type="checkbox" id="b1" /></td>
  </tr>
</table>
<table class="table" border="1">
  <tr>
    <td width="319">Низкое давление - до 5 кПа (0,05 кгс/см2)</td>
    <td align="center"><input type="checkbox" class="platform" id="a1" /></td>
  </tr>
  <tr>
    <td>Среднее давление - до 0,3 мПа (3 кгс/см2)</td>
    <td align="center"><input type="checkbox" class="platform" id="a2" /></td>
  </tr>
  <tr>
    <td>Высокое давление - до 0,6 мПа (6 кгс/см2)</td>
    <td align="center"><input type="checkbox" class="platform" id="a3" /></td>
  </tr>
  <tr>
    <td>Высокое давление - до 1,2 мПа (12 кгс/см2)</td>
    <td align="center"><input type="checkbox" class="platform" id="a4" /></td>
  </tr>
</table>
<table>
  <tr>
    <td width="319">Рабочий проект</td>
    <td align="center"><input type="checkbox" id="d1" /></td>
  </tr>
</table>
<table>
  <tr>
    <td width="319">Получение тех.условие</td>
    <td align="center"><input type="checkbox" id="d2" /></td>
  </tr>
</table>
<table>
  <tr>
    <td width="319">Исполнительная Техническая Документация</td>
    <td><input type="checkbox" id="d3" /></td>
  </tr>
  <tr>
    <td width="246">Прокол через дорогу</td>
    <td><input type="checkbox" id="d4" /></td>
  </tr>
  <tr>
    <td>Сталь O 159</td>
    <td align="center"><input id="e1" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  <tr>
    <td>Сталь O 57</td>
    <td align="center"><input id="e2" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  <tr>
    <td>Сталь O 20</td>
    <td align="center"><input id="e3" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  <tr>
    <td>Сталь O 15</td>
    <td align="center"><input id="e4" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  <tr>
    <td>Полиэтилен O 32</td>
    <td align="center"><input id="e5" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  <tr>
    <td>Выход труб из земли</td>
    <td align="center"><input id="e6" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Котел</td>
    <td align="center"><input id="e7" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Газовая плита</td>
    <td align="center"><input id="e8" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Печь</td>
    <td align="center"><input id="e9" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Водонагреватель (бойлер)</td>
    <td align="center"><input id="e10" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Проход через стену</td>
    <td align="center"><input id="e11" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Длина копки траншеи (м)</td>
    <td align="center"><input id="e12" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
</table>
<table class="table" border="1">
  <tr>
    <td width="319">Счетчик G4 (0,04 м3/ч до 6,0 м3/ч)</td>
    <td align="center"><input type="checkbox" class="platform2" id="f1" /></td>
  </tr>
  <tr>
    <td>Счетчик G6 (6,0 м3/ч до 10,0 м3/ч)</td>
    <td align="center"><input type="checkbox" class="platform2" id="f2" /></td>
  </tr>
  <tr>
    <td>Счетчик G10 (10,0 м3/ч до 16,0 м3/ч)</td>
    <td align="center"><input type="checkbox" class="platform2" id="f3" /></td>
  </tr>
  <tr>
    <td>Счетчик G16 (16,0 м3/ч до 25,0 м3/ч)</td>
    <td align="center"><input type="checkbox" class="platform2" id="f4" /></td>
  </tr>
  <tr>
    <td>Счетчик G25 (25,0 м3/ч до 40,0 м3/ч)</td>
    <td align="center"><input type="checkbox" class="platform2" id="f5" /></td>
  </tr>
</table>
<table class="table">
  <tr>
    <td width="319">ИТОГО:</td>
    <td id="total">0</td>
    <td>тенге</td>
  </tr>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script type="text/javascript">
var prices = {"a1":80,"a2":120,"a3":200,"a4":300,"b1":0,"d1":5,"d2":3,"d3":50,"d4":5,"e1":3,"e2":2,"e3":1,"e4":0.5,"e5":2,"e6":0.9,"e7":0.3,"e8":0.3,"e9":0.3,"e10":0.3,"e11":1,"e12":0.1,"f1":3,"f2":5,"f3":7,"f4":9,"f5":11};

$(document).ready (function() {
	$('input.platform').click (function() {
		if ($(this).attr ('checked')) {
			$('input.platform').attr ('checked', false);
			$(this).attr ('checked', true);}
			{
			$('input.platform2').attr ('checked', false);
			$(this).attr ('checked', true);}
	});
	
	$('input.animation').click (function() {
		if ($(this).attr ('checked')) {
			$('input.animation').attr ('checked', false);
			$(this).attr ('checked', true);
		}
	});
	
	$('input').click (function() {
		check_total();
	});
	
	$('.numfield').keyup (function() {
		var val = $(this).val().replace (/[^0-9]+/g, '');
		$(this).val (val);
		check_total();
	}).blur (function() {
		if ($(this).val() == '') {
			$(this).val (0);
		}
	});
	
	check_total();
});

function check_total()
{
	var sum = 0;
	$('input:checked').each (function() {
		sum += prices[$(this).attr ('id')];
	});
	$('.numfield').each (function() {
		sum += prices[$(this).attr ('id')] * $(this).val();
	})
	$('#total').html (number_format (sum * 1000, 0, '', ' '));
}

function number_format (number, decimals, dec_point, thousands_sep) {
    number = (number + '').replace(',', '').replace(' ', '');
    var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        s = '',
        toFixedFix = function (n, prec) {
            var k = Math.pow(10, prec);
            return '' + Math.round(n * k) / k;
        };
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

</script>

Пример:
http://gumarika.ucoz.org/index/orien...ost_uslugi/0-6
Что то типа такого замутить...

Ну можно например объединить 2 скрипта с исходном html в один скрипт, например тут:
http://www.nakedart.ru/about-studio/calculator.html
и тут +
http://pnz.internet.it-consult.su/onlinecalculator.html
тоесть соединить 3 типа расчета в один скрипт, в одну страничку))
1) чекбокс (типа выбор услуг "да" или "нет"
2) многострочный список "несколько вариантов из данной услуги"
3) поле ввода чисел "колличество, штук"
и общая сумма в поле ввода или на голой страничке...

[rashid86]

Нет, неполучаеться три типа расчета соединить в один расчет( неделю мучаюсь...неужели это невозможно?
...Или 150 рублей это не деньги?...

[Serg_pnz]

От 1000 рублей стоит более-мение нормальный калькулятор.
За 150, извините, я даже код не буду прочитывать даже по диагонали.
НО! Если попросить по-нормальному, без гонора, возможно кто-то и поможет.

[rashid86]

Кстати, с праздником всем женщинам!
Конечно, отличный вариант дал Наш сенсей "nasqad"
тоесть прописать вовсех инпутах именно одинаковый ID, это очень упрощает работу и очень удобно, но он что то не работает
Я не мастер в JavaScript, но вышла синтактическая ошибка в скрипте на строке "summary += ($.isNumeric(temp) && $.isNumeric(this.value) ? temp*this.value : 0;" и заметил эту ошибку сам Dreamweawer CS5, да и после этой строки исходные коды как бы игнорируют...//
HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<body>
<table>
  <tr>
    <td width="319">Выезд проектировщика-оценщика</td>
    <td align="center"><input data-price="200" type="checkbox" id="calculation" /></td>
  </tr>
</table>
<table class="table" border="1">
  <tr>
    <td width="319">Низкое давление - до 5 кПа (0,05 кгс/см2)</td>
    <td align="center"><input data-price="200" type="checkbox" class="platform" id="calculation" /></td>
  </tr>
  <tr>
    <td>Среднее давление - до 0,3 мПа (3 кгс/см2)</td>
    <td align="center"><input data-price="200" type="checkbox" class="platform" id="calculation" /></td>
  </tr>
  <tr>
    <td>Высокое давление - до 0,6 мПа (6 кгс/см2)</td>
    <td align="center"><input data-price="200" type="checkbox" class="platform" id="calculation" /></td>
  </tr>
  <tr>
    <td>Высокое давление - до 1,2 мПа (12 кгс/см2)</td>
    <td align="center"><input data-price="200" type="checkbox" class="platform" id="calculation" /></td>
  </tr>
</table>
<table>
  <tr>
    <td width="319">Рабочий проект</td>
    <td align="center"><input data-price="200" type="checkbox" id="calculation" /></td>
  </tr>
</table>
<table>
  <tr>
    <td width="319">Получение тех.условие</td>
    <td align="center"><input data-price="200" type="checkbox" id="calculation" /></td>
  </tr>
</table>
<table>
  <tr>
    <td width="319">Исполнительная Техническая Документация</td>
    <td><input data-price="200" type="checkbox" id="calculation" /></td>
  </tr>
  <tr>
    <td width="246">Прокол через дорогу</td>
    <td><input data-price="200" type="checkbox" id="calculation" /></td>
  </tr>
  <tr>
    <td>Сталь O 159</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  <tr>
    <td>Сталь O 57</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  <tr>
    <td>Сталь O 20</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  <tr>
    <td>Сталь O 15</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  <tr>
    <td>Полиэтилен O 32</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  <tr>
    <td>Выход труб из земли</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Котел</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Газовая плита</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Печь</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Водонагреватель (бойлер)</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Проход через стену</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>штук</td>
  </tr>
  <tr>
    <td>Длина копки траншеи (м)</td>
    <td align="center"><input data-price="200" id="calculation" class="numfield" maxlength="5" value="0" /></td>
    <td>метров</td>
  </tr>
  </id>
</table>
<table class="table" border="1">
  <tr>
    <td width="319">Счетчик G4 (0,04 м3/ч до 6,0 м3/ч)</td>
    <td align="center"><input data-price="200" type="checkbox" class="platform2" id="calculation" /></td>
  </tr>
  <tr>
    <td>Счетчик G6 (6,0 м3/ч до 10,0 м3/ч)</td>
    <td align="center"><input data-price="200" type="checkbox" class="platform2" id="calculation" /></td>
  </tr>
  <tr>
    <td>Счетчик G10 (10,0 м3/ч до 16,0 м3/ч)</td>
    <td align="center"><input data-price="200" type="checkbox" class="platform2" id="calculation" /></td>
  </tr>
  <tr>
    <td>Счетчик G16 (16,0 м3/ч до 25,0 м3/ч)</td>
    <td align="center"><input data-price="200" type="checkbox" class="platform2" id="calculation" /></td>
  </tr>
  <tr>
    <td>Счетчик G25 (25,0 м3/ч до 40,0 м3/ч)</td>
    <td align="center"><input data-price="200" type="checkbox" class="platform2" id="calculation" /></td>
  </tr>
  </id>
</table>
<table class="table">
  <tr>
    <td width="319">ИТОГО:</td>
    <td id="calculation">0</td>
    <td>тенге</td>
  </tr>
</table>
</body>
</html>

В этот HTML исходник вдул этот код javascript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>
var elements = $('#calculation > input').change(function() {
	var summary = 0;
	elements.each(function() {
		var temp, tag = this.tagName;
		if(tag = 'select') {
			temp = $(':selected', this).attr('data-price');
			summary += $.isNumeric(temp) ? +temp : 0;
		} else if(tag = 'checkbox') {
			temp = $(this).is(':checked') && $(this).attr('data-price');
			summary += $.isNumeric(temp) ? +temp : 0;
		} else if(tag = 'input') {
			temp = this.value && +this.value > 0 && $(this).attr('data-price');
			summary += ($.isNumeric(temp) && $.isNumeric(this.value) ? temp*this.value : 0;
		}
//"select" == tag ? (temp = $(":selected", this).attr("data-price"), $.isNumeric(temp)) : "checkbox" == tag ? (temp = $(this).is(":checked") && $(this).attr("data-price"), $.isNumeric(temp)) : "input" == tag && (temp = this.value && 0 < +this.value && $(this).attr("data-price"), $.isNumeric(temp) && $.isNumeric(this.value));
	});
	alert(summary);
})
</script>

И если получиться, то я сомневаюсь, что будет работать 3 тип расчета: "многострочный список "несколько вариантов из данной услуги"" так как все ID одинаковые...
Может кто нибудь сможет разобраться в яваскрипте? если получиться, то я вставлю всё на сайт менять буду только HTML код.

[rashid86]

Так и не удовлетворен ответом(

[bes]

Так и не удовлетворен ответом(

Логично, за несколько месяцев можно было всё и самому сделать
500р, нормальный скриншот или ссылка на таблицу, в которой нужно произвести расчёт (если интересно, пишите в личку)

[norlin]

p.s. нельзя задавать элементам один и тот же id. На странице каждый id должен быть уникальным