А как можно сделать чтобы при вводе одного поля, пересчитывались остальные поля?
Пример:
<div class="calc">
<div class="items">
<div class="block">
<label for="amount">Площадь дома:</label><br />
<input type="text" name="amount" id="amount"><br />
</div>
<div class="block">
<label for="amount">Стоимость монтажа:</label><br />
<input type="text" id="price" readonly><br />
</div>
<div class="block">
<label for="amount">Производство элементов:</label><br />
<input type="text" id="price_2" readonly><br />
</div>
<div class="block">
<label for="amount">Общая стоимость</label><br />
<input type="text" id="price_3" readonly><br />
</div>
</div>
<div id="slider-range-min"></div>
</div>
и мой js
$( "#slider-range-min" ).slider({
// orientation: "vertical",
step: 10,
range: "min",
min: 50,
max: 500,
value: 100,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + " м" );
// $( "#amount_1" ).val( ui.value[ 1 ] );
$( "#price" ).val( ui.value * 650 + " руб");
$( "#price_2" ).val( ui.value * 1200 + " руб");
$( "#price_3" ).val( ui.value * 1850 + " руб");
}
});
$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) );
$( "#price" ).val( $( "#slider-range-min" ).slider( "value" ) * 650 + " руб" );
$( "#price_2" ).val( $( "#slider-range-min" ).slider( "value" ) * 1200 + " руб" );
$( "#price_3" ).val( $( "#slider-range-min" ).slider( "value" ) * 1850 + " руб" );
$("input#amount").change(function(){
var value1=$("input#amount").val();
var value2=$("input#price").val();
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
$("input#amount").val(value1);
$("input#price").val(value2);
}
$("#slider-range-min").slider("value" ,value1);
});
При передвижении ползунка все инпуты пересчитываются как надо. Но когда вводим значение в поле "Площадь дома" ползунок перескакивает на нужное положение, но остальные инпуты не пересчитываются.