Best way to trigger jquery with range input

Question

I have a problem with my jquery...The function works well with other elements, but not with the range input. I want to calculate a value and I need to access other values for that

<input type="range" name="range" id="range" min="0" max="<?php echo $max_range; ?>" oninput="calc_happy()">
<input type="number" name="range" id="ranged" value=""oninput="calc_happy()">
<select name="work_value" id="work_value" onchange="calc_happy()">
  <option value="-1.0">Low work</option>
  <option value="-1.2">Easy work</option>
  <option value="-1.4">Normal work</option>
  <option value="-1.6">Hard work</option>
</select>

And here is the Js:

<script>
function calc_happy(){
    var selected = $('#work_value').val();
    var ranged = $('#range').val();
    var happy = Math.round(selected*ranged);
    var nhappy = <?php echo $happy-$wood_minus;?>+happy;    

    $('#w_stats td').eq(7).html(Math.abs(happy));
    $('#w_stats td').eq(5).html(selected);
    //calcul new happy
    $('p4').html(nhappy);
    $('p2').html(happy);

    if(nhappy <= 1){
        $('#img').attr("src","../design/images/stats/sad.bmp");
    }
}
</script>
<script>
    window.onload = function() {
        $('#work_value').val('<?php echo $wood_w; ?>');
        $('#range').val('<?php echo $wood_minus/$wood_w; ?>' );
        $('#ranged').val('<?php echo $wood_minus/$wood_w; ?>' );
    }
</script>
<script>
    function putvalue(){
        $('#ranged').val($('#range').val());
    }
    function putvalue2(){
        $('#range').val($('#ranged').val());
    }

</script>

The script is working well for the select input, but not for the other triggers... Please, mind my poor coding, I appreciate any advice and notice it for future. Thanks! Edit: and the piece of code

   window.onload = function() {
        $('#work_value').val('<?php echo $wood_w; ?>');
}

receive values from db which match with option values, but sometimes is working, sometimes not...even with multiple refreshes...

Since you asked for advice on your coding, I would either use all jQuery stuff or not use it at all. I find code is clearer if you do the same sort of thing the same way. You can also embed value="<?php echo $wood_w; ?>" for the number and range input rather than using jQuery's val, though the select is a little trickier, so I see why you'd go down the val route. — Becca
– Becca, Commented Oct 3, 2017 at 18:25

Liam · Accepted Answer · 2017-10-16 12:36:31Z

3

You can do:

$("#range, #ranged, #work_value").on("change keyup input", calc_happy);

Here's the code. I added some debug code:

    $(document).ready(function() {
        $('#work_value').val('-1.4');
        $('#range').val('5' );
        $('#ranged').val('7' );

        $("#range, #ranged, #work_value").on("change keyup input", calc_happy);
    })

    function calc_happy(){

        var selected = $('#work_value').val();
        var ranged = $('#range').val();
        var happy = Math.round(selected*ranged);
        var nhappy = 12+happy;    
        
        var $result = $("#result");
        var $newDiv = $("<div />");
        $newDiv.text("selected: " + selected + ", ranged: " + ranged + ", happy: " + happy);
        $result.prepend($newDiv);

        $('#w_stats td').eq(7).html(Math.abs(happy));
        $('#w_stats td').eq(5).html(selected);
        //calcul new happy
        $('p4').html(nhappy);
        $('p2').html(happy);

        if(nhappy <= 1){
            $('#img').attr("src","../design/images/stats/sad.bmp");
        }
    }

    function putvalue(){
      $('#ranged').val($('#range').val());
    }
    function putvalue2(){
      $('#range').val($('#ranged').val());
    }

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <input type="range" name="range" id="range" min="0" max="15" />
    <input type="number" name="range" id="ranged" value="" />
    <select name="work_value" id="work_value">
      <option value="-1.0">Low work</option>
      <option value="-1.2">Easy work</option>
      <option value="-1.4">Normal work</option>
      <option value="-1.6">Hard work</option>
    </select>
    
    <div id="result">
    
    </div>

edited Oct 16, 2017 at 12:36

Liam

30k28 gold badges144 silver badges206 bronze badges

answered Oct 3, 2017 at 18:21

Becca

1,6021 gold badge27 silver badges61 bronze badges

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

3 Comments

Botea Florin Over a year ago

sir, you are amazing! Thanks you, all for advices!

Becca Over a year ago

Happy to help! The one thing to watch out for with this approach is that the event handler can be called multiple times when the user changes the value, since the handler is called for change, keyup, and input events. While that's not a problem in this particular case, it would be if you were be doing something where repeating the handler would be bad (for example, sending an AJAX request that modifies data in a database).

Becca Over a year ago

I updated the fiddle to illustrate this: jsfiddle.net/don01001100/91sn6bLr/1 And take a look at this Stack Overflow answer for a little more discussion on the input event: stackoverflow.com/a/17384341/1102726

ayunami2000 · Accepted Answer · 2017-10-03 18:26:02Z

-1

Use oninput instead of onchange.

answered Oct 3, 2017 at 18:26

ayunami2000

4596 silver badges11 bronze badges

Collectives™ on Stack Overflow

Best way to trigger jquery with range input

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related