| tp-20 | 19.06.2018 19:52 |
Привязка input radio к слайдеру jQuery-UI
Есть простой калькулятор для рассчёта прибыли.
Там есть три тарифных плана.
START: 100-1000
STANDART: 1001-3000
PREMIUM: 3001-5000
Нужно добиться того, чтобы при вводе в текстовое поле определённого числа в диапазоне от 100 до 5000, один из input radio становился активным автоматически. Т.е. нужно связать радиокнопки, ползунок и числовое поле (ползунок и числовое поле уже взаимосвязаны). Тут ещё сложность в том, что планы перебираются циклом foreach в смарте.
Вёрстка калькулятора:
Скрипт такой:
И картинка для удобного восприятия:
ipic
Там есть три тарифных плана.
START: 100-1000
STANDART: 1001-3000
PREMIUM: 3001-5000
Нужно добиться того, чтобы при вводе в текстовое поле определённого числа в диапазоне от 100 до 5000, один из input radio становился активным автоматически. Т.е. нужно связать радиокнопки, ползунок и числовое поле (ползунок и числовое поле уже взаимосвязаны). Тут ещё сложность в том, что планы перебираются циклом foreach в смарте.
Вёрстка калькулятора:
<form method="post" name="calc" onsubmit="recalc(); return false;">
<div>
<ul>
{foreach from=$calc_pselect item=i key=k}
<li><label class="radio"><input type="radio" name="plan" value="{$k}" checked><div>{$i}</div></label>
</li>
{/foreach}
</ul>
</div>
<div>
<input name="sum" id="calc_sum" type="text" class="minCost" value=""/>
<div class="slider"></div>
</div>
<div>
<input name="calc_btn" value="Рассчитать" type="submit">
</div>
{_getFormSecurity form='calc'}
</form>
Скрипт такой:
jQuery(document).ready(function($) {
var input = $('input.minCost');
var slider = $('.slider').slider({
range: 'max',
min: 100,
max: 5000,
value: 100,
step: 10,
animate: 300,
slide: function(event, ui) {
input.val(ui.value);
}
});
input.val(slider.slider('value'));
input.on('change', function() {
slider.slider('value', $(this).val());
});
jQuery("input.minCost").change(function(){
var value1=jQuery(input).val();
if (value1 > 5000) { value1 = 5000; jQuery(input).val(5000)}
if (value1 < 100) { value1 = 100; jQuery(input).val(100)}
jQuery(".slider").slider("values",0,value1);
});
// фильтрация ввода в поля
jQuery('input').keypress(function(event){
var key, keyChar;
if(!event) var event = window.event;
if (event.keyCode) key = event.keyCode;
else if(event.which) key = event.which;
if(key==null || key==0 || key==8 || key==13 || key==9 || key==46 || key==37 || key==39 ) return true;
keyChar=String.fromCharCode(key);
if(!/\d/.test(keyChar)) return false;
});
});
И картинка для удобного восприятия:
ipic