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...

`oninput` event - https://www.w3schools.com/jsref/event_oninput.asp — mihkov, Oct 03 '17 at 18:06
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=""` 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 Dee, Oct 03 '17 at 18:25

score 3 · Accepted Answer · edited Oct 16 '17 at 12:36

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>

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 Dee, Oct 04 '17 at 13:54
I updated the fiddle to illustrate this: https://jsfiddle.net/don01001100/91sn6bLr/1/ And take a look at this Stack Overflow answer for a little more discussion on the `input` event: https://stackoverflow.com/a/17384341/1102726 — Becca Dee, Oct 04 '17 at 13:54

score -1 · Answer 2 · answered Oct 03 '17 at 18:26

-1

Use oninput instead of onchange.

answered Oct 03 '17 at 18:26

ayunami2000

441
6
10

Best way to trigger jquery with range input

2 Answers2