Updating a text field dynamically using jQuery

Question

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>

Just because you ask the best way. I'll recommend you to use angular js, because it is design to support two way binding. Look like it suit your requirment — Avinash Jain
– Avinash Jain, Commented Nov 22, 2015 at 19:28
What script does your browser see, because I'm certain that it doesn't – and certainly shouldn't – see any of the <?php...?> statements; what values do those calls resolve to? — David Thomas
– David Thomas, Commented Nov 22, 2015 at 19:31
Sorry, there are some php elements I left out because I didn't think they were necessary . I can add them in in an edit if you like? They are just integer values that I'm passing in to the script. — Liam Fell
– Liam Fell, Commented Nov 22, 2015 at 19:34

Ismail Moghul · Accepted Answer · 2015-11-22 19:37:25Z

1

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

answered Nov 22, 2015 at 19:37

Ismail Moghul

2,9742 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Liam Fell Over a year ago

Ok thanks, how might I do some arithmetic against these values though? For example how might I get the value of 'amount-deposit' and multiply it by 'monthly-repayments' in that slide function event. Thanks

Ismail Moghul Over a year ago

@LiamFell are amount-deposit and monthly-repayments JS variables or do you need to parse them from somewhere?

Liam Fell Over a year ago

They are JS variables. Thanks

Ismail Moghul Over a year ago

var total = amount-deposit * monthly-repayments and then update the following: $('#monthly-repayments').val( total )

Ismail Moghul Over a year ago

Was that what you wanted?

|

Collectives™ on Stack Overflow

Updating a text field dynamically using jQuery

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related