Динамическое обновление текстового поля с помощью jQuery

Question

Это моя первая попытка использования jQuery. Я пытаюсь реализовать базовый калькулятор финансов.

Я использую ползунки диапазона jQuery UI. Сценарий для них заключается в следующем:

jQuery(document).ready(function($) { 
    $("#slider-deposit").slider({ 
     value: 100, 
     min: <?php echo json_encode($minDeposit); ?>, 
     max: <?php echo json_encode($maxDeposit); ?>, 
     step: 1, 
     slide: function(event, ui) { 
     $("#amount-deposit").val("" + ui.value); 
     } 
    }); 
    $("#amount-deposit").val("" + $("#slider-deposit").slider("value")); 
    }); 

    jQuery(document).ready(function($) { 
     $("#slider-payback").slider({ 
     value:100, 
     min: 12, 
     max: 36, 
     step: 12, 
     slide: function(event, ui) { 
     $("#payback-period").val("" + ui.value); 
     } 
    }); 
    $("#payback-period").val("" + $("#slider-payback").slider("value")); 
    }); 

У меня также есть несколько текстовых полей на странице, я пытаюсь обновить эти текстовые поля динамически значения ползунков диапазона изменить на этой странице.

Вот один текстовое поле топор exmaple:

<input type="text" id="monthly-repayments" readonly style="border:0; color:#f6931f;"> 

Каков наилучший способ объявления значение этих текстовых полей и изменить его динамически значения ползунков изменить?

Благодаря

Вот полный HTML:

<div> 
    <label for="amount-depoist">Deposit amount:</label> 
    <input type="text" id="amount-deposit" readonly style="border:0; color:#f6931f;"> 
    <div id="slider-deposit"></div> 
</div> 

<div> 
    <label for="payback-period">Payback Period:</label> 
    <input type="text" id="payback-period" readonly style="border:0; color:#f6931f;"> 
<div id="slider-payback"></div> 
<div> 

<div> 
    <label for="apr_rate">APR:</label> 
    <input type="text" id="apr_rate" readonly style="border:0; color:#f6931f;"> 
</div> 

<div> 
    <label for="monthly-repayments">Monthly Payments:</label> 
    <input type="text" id="monthly-repayments" readonly style="border:0; color:#f6931f;"> 
</div> 

<div> 
    <label for="total_payable">Total Payable:</label> 
    <input type="text" id="total_payable" readonly style="border:0; color:#f6931f;"> 
</div> 
</div> 

Answer 1

Добавить дополнительную функцию в функции изменения событий слайд, так что он обновляет значение поля ввода - то есть что-то вроде этого:

Изменение:

slide: function(event, ui) { 
    $("#payback-period").val("" + ui.value); 
    } 

в

slide: function(event, ui) { 
    $("#payback-period").val("" + ui.value); 
    $('#monthly-repayments').val("" + ui.value); 
    } 

Это должно обновить значение #monthly-repayments формы ввода каждый раз, когда значение ползунка изменяется