CODEWITHSUNDEEP
javascriptjquery
Danny Pelletier
Danny Pelletier

Reputation: 19

detect textbox change when the jquery UI slider moves

I have this fiddle http://jsfiddle.net/48Hpa/ , it calculates the sum automatically when I enter the keyword by myself, when I change the slider, the textbox value changes, but I don't see the sum. Why is this? How can I make this work? Thank you very much.

$(document).ready(function(){

    $(function() {
        $( "#slider1" ).slider({
          range: "min",
          value: 36,
          min: 1,
          max: 36,
          slide: function( event, ui ) {
            $( ".amount1" ).val( ui.value);
          }
        });
        $( ".amount1" ).val($( "#slider1" ).slider( "value" ));
      });

    $(function() {
        $( "#slider2" ).slider({
          range: "min",
          value: 50000,
          min: 1,
          max: 50000,
          slide: function( event, ui ) {
            $( ".amount2" ).val( ui.value );
          }
        });
        $( ".amount2" ).val( $( "#slider2" ).slider( "value" ));
      });


    function writesum() {
      var months = $('.amount1').val();
      var credits = $('.amount2').val();
      var payment = Number(months) + Number(credits);
          $('.amount3').val(payment);
    }

    $(".amount1").on('input',function(){
        jQuery(writesum);
    });

    $(".amount2").on('input',function(){
        jQuery(writesum);
    });

});

Upvotes: 2

Views: 707

Answers (2)

racerror
racerror

Reputation: 1629

You need to trigger a change event on the input fields when you change their value with code.

Also, I suggest using the change event.

        $( "#slider1" ).slider({
         ...
          slide: function( event, ui ) {
            $( ".amount1" ).val( ui.value)
                           .trigger('change');
          }
        });

        $( "#slider2" ).slider({
          ...
          slide: function( event, ui ) {
            $( ".amount2" ).val( ui.value )
                           .trigger('change');
          }

    ...

    $(".amount1, .amount2").on('change', function() {
        writesum();
    });

Upvotes: 0

Ollie Bennett
Ollie Bennett

Reputation: 4484

How about just calling writesum() whenever the slider moves?

i.e. http://jsfiddle.net/48Hpa/1/

Upvotes: 1

Related Questions