CODEWITHSUNDEEP
javascriptjquery
Liam Fell
Liam Fell

Reputation: 1320

Updating a text field dynamically using jQuery

This is my first attempt at using jQuery. I'm attempting to implementing a basic finance calculator.

I'm using jQuery UI range sliders. The script for these is as follows:

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" ) );
  });

I also have several text fields on the page, I'm attempting to update these text fields dynamically as the values of the range sliders change on the page.

Here's one text field ax an exmaple:

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

What is the best way to ad a value to these text fields and change it dynamically as the values of the sliders change?

Thanks

Here is the full 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>

Upvotes: 0

Views: 159

Answers (1)

Ismail Moghul
Ismail Moghul

Reputation: 2974

Add an extra function in the slide event change function so that it updates the value of the input field - i.e. something like this:

Change:

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

to 

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

This should update the value of the #monthly-repayments input form each time the value of the slider changes

Upvotes: 1

Related Questions