Помогите с формой калькулятора

[Нusuf]

Здравствуйете

ребята' date=' помогите, пожалуйста, вот с такой формой калькулятора

вот как на этом сайте:

http://www.su22.ru/partner/?TOTAL_COST=1771100#calc

с этого сайта я выхватила код этой формы:

<form id="UNIT9_CALCULATE_FORM" onsubmit="return jsAjaxUtil.InsertFormDataToNode(this, 'comp_f19baeb6ffb2fe6064d68cd481960fc1', true);" action="/partner/?TOTAL_COST=1771100" method="post">

<input type="hidden" value="f19baeb6ffb2fe6064d68cd481960fc1" name="bxajaxid">

<p>

<label for="TOTAL_COST">Стоимость квартиры</label>

<br>

<input id="TOTAL_COST" class="text" type="text" value="1500000" name="TOTAL_COST">

рублей

</p>

<div id="total_cost_slider" class="calculate_slider ui-slider ui-slider-horizontal">

<a class="ui-slider-handle ui-slider-handle-left" href="#" style="left: 30%;"></a>

</div>

<p></p>

<p>

<label for="FIRST_PAYMENT">Первоначальный взнос</label>

<br>

<input id="FIRST_PAYMENT" class="text" type="text" value="15000" name="FIRST_PAYMENT">

рублей (

<span id="part_of_total_cost">1%</span>

)

</p>

<div id="first_payment_slider" class="calculate_slider ui-slider ui-slider-horizontal">

<a class="ui-slider-handle ui-slider-handle-left" href="#" style="left: 1%;"></a>

</div>

<p></p>

<p>

<label for="CREDIT_TIME">Срок кредита</label>

<br>

<input id="CREDIT_TIME" class="text" type="text" value="170" name="CREDIT_TIME">

месяцев

</p>

<div id="credit_time_slider" class="calculate_slider ui-slider ui-slider-horizontal">

<a class="ui-slider-handle ui-slider-handle-left" href="#" style="left: 47.2222%;"></a>

</div>

<p></p>

<p>

<input id="" class="button_orange" type="submit" value="Рассчитать" name="">

</p>

</form>

видно, что все поля формы - обычные текстовые. Такими они у меня и получаются, если я скопировала и воспроизвела это в броузере.

Вопрос: а как же у них на сайте эти поля с ползунками получаются?

я попробовала сделать форму с ползунками с помощью html5 (там теперь есть renger), но всё равно ползунок в броузере не отражается - ни в мозилле, ни в IE (в последних версиях)

что делать , не знаю.

подскажите. Очень надо.

может, кому не очень трудно написать код этой формы с ползунком (там немного строк), просто, может я где-то делаю ошибку.

спасибо.

[Great Rash]

Вопрос: а как же у них на сайте эти поля с ползунками получаются?

Скриптом.

[Нusuf]

Вопрос: а как же у них на сайте эти поля с ползунками получаются?

Скриптом.

скриптом PHP ?

[Great Rash]

Зачем? Там яваскрипт скорее всего.

[dostel1]

все сделано за вас http://javascript.ru/forum/project/28313-udobnyjj-kreditnyjj-kalkulyator.html

[Нusuf]

все сделано за вас http://javascript.ru/forum/project/28313-udobnyjj-kreditnyjj-kalkulyator.html

спасибо большое.

Хороший калькулятор. Возьму на всякий случай.

А с ползунком нет? Люди очень просят, чтобы было как на том сайте ..а я могу только скопировать откуда-ниб.

[dostel1]

ищи плагин jquery.Должен быть

[cyber_ua]

только закончил скрипт ползунка на чистом js, но проблемы с дизайном.

если есть желание помочь с дизайном, а от меня получить скрипт и помощь в установке можете писать на скайп cyberx141.

[Нusuf]

только закончил скрипт ползунка на чистом js, но проблемы с дизайном.

если есть желание помочь с дизайном, а от меня получить скрипт и помощь в установке можете писать на скайп cyberx141.

давайте, я с огромным удовольствием!!

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

вобщем , давайте. Я посмотрю сейчас, и , возможно, пока есть время на это.

спасибо вам

(написала вам в скайп)

Edited May 16, 2012 by Нusuf

[cyber_ua]

заявки в скайпе нет=(

если не получается добавить давайте я вас добавлю.

тестовую версию загрузил уже в скайпе кину линк=)

[Temiks]

Хм, не этот случайно код?!

<script type="text/javascript">
	$(function() {
		$("#total_cost_slider").slider({
			value: 1771100,
			animate: true,
			min: 0,
			max: 5000000,
			step: 100,
			slide: function(event, ui) {
				$("#TOTAL_COST").val(ui.value);
				$("#first_payment_slider").slider("option" , "max" , ui.value);
				if($("#FIRST_PAYMENT").val() > ui.value) {
					$("#first_payment_slider").slider("value" , ui.value);
					$("#FIRST_PAYMENT").val(ui.value);
				} else {
					$("#first_payment_slider").slider("value" , $("#FIRST_PAYMENT").val());
				}
			}
			});
		$("#TOTAL_COST").val($("#total_cost_slider").slider("value"));

		$("#first_payment_slider").slider({
			value: 885550,
			animate: true, 
			min: 0,
			max: 1771100,
			step: 100,
			slide: function(event, ui) {
				$("#FIRST_PAYMENT").val(ui.value);
				$("#part_of_total_cost").text(Math.round((ui.value / $("#TOTAL_COST").val()) * 100) + "%");
			}
			});
		$("#FIRST_PAYMENT").val($("#first_payment_slider").slider("value"));

		$("#credit_time_slider").slider({
			value: 120,
			animate: true,
			min: 0,
			max: 360,
			step: 1,
			slide: function(event, ui) {
				$("#CREDIT_TIME").val(ui.value);
			}
			});
		$("#CREDIT_TIME").val($("#credit_time_slider").slider("value"));

		$("#TOTAL_COST").blur(function() {
			$("#total_cost_slider").slider("value" , $("#TOTAL_COST").val());
			$("#first_payment_slider").slider("option" , "max" , $(this).val());
			if($("#FIRST_PAYMENT").val() > $(this).val()) {
				$("#first_payment_slider").slider("value" , $(this).val());
				$("#FIRST_PAYMENT").val($(this).val());
			} else {
				$("#first_payment_slider").slider("value" , $("#FIRST_PAYMENT").val());
			}
		});

		$("#FIRST_PAYMENT").blur(function() {
			$("#first_payment_slider").slider("value" , $("#FIRST_PAYMENT").val());
			$("#part_of_total_cost").text(Math.round(($("#FIRST_PAYMENT").val() / $("#TOTAL_COST").val()) * 100) + "%");
		});

		$("#CREDIT_TIME").blur(function() {
			$("#credit_time_slider").slider("value" , $("#CREDIT_TIME").val());
		});
	});
	</script>

А ползунки зарыты тут

<script src="/js/jquery-1.6.1.min.js"></script>
<script src="/js/jquery-ui-1.8.11.custom.min.js"></script>
<script src="/js/jquery.lightbox-0.5.min.js"></script>
<script src="/js/jfunctions.js"></script>

Edited May 16, 2012 by Temiks