Show different div based on score in hidden field

Question

I have been searching around for some time but cannot get anywhere with this one. I need to calculate the score from 2 select options (score1 x score2) and then store the result in a hidden field. This I working, the issue I have is displaying a DIV based on the score. I can only trigger the divs to show if I change the input to a TEXT type input and change it manually...not programatically. I have pulled together some sample code based on my actual code below. Your help would be very much appreciated.

<form action="" name="test" id="test">
    <select name="score1" id="score1" onchange="calculate()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <select name="score2" id="score2" onchange="calculate()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <input type="hidden" name="totalScore" id="totalScore">

    <div class="less-than-5" style="display:none;">low score</div>
    <div class="less-than-10" style="display:none;">med score</div>
    <div class="less-than-25" style="display:none;">high score</div>

    <button type="submit">Save</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
    calculate = function()
    {
        var score1a = document.getElementById('score1').value;
        var score2a = document.getElementById('score2').value; 
        document.getElementById('totalScore').value = parseFloat(score1a).toFixed(2)*parseFloat(score2a).toFixed(2);;
   }
</script>

<script>
    $(function() {
        $("#totalScore").bind('change', function() {
            $(".less-than-5,.less-than-10,.less-than-25").hide();
            var myValue = $(this).val();
            if(myValue  <= 5){
               $(".less-than-5").show()
            } 
            else if(myValue <= 10)
            {
                $(".less-than-10").show()
            }
            else if(myValue >= 11)
            {
                $(".less-than-25").show()
            }
        });
    });

</script>

score 1 · Answer 1 · answered Nov 20 '17 at 15:21

1

You can't catch an event when you change input programatically.but you can trigger event manually.

answered Nov 20 '17 at 15:21

Amor

77
2
5

score 1 · Accepted Answer · answered Nov 20 '17 at 15:29

Why not just put your function to show the divs at the end of calculate() It doesn't need to be an event listener.

        calculate = function()
        {
            var score1a = document.getElementById('score1').value;
            var score2a = document.getElementById('score2').value; 
            document.getElementById('totalScore').value = parseFloat(score1a).toFixed(2)*parseFloat(score2a).toFixed(2);;
            updateDIV();
       }

     updateDIV = function() {
                $(".less-than-5,.less-than-10,.less-than-25").hide();
                var myValue = $('#totalScore').val();
                if(myValue  <= 5){
                   $(".less-than-5").show()
                } 
                else if(myValue <= 10)
                {
                    $(".less-than-10").show()
                }
                else if(myValue >= 11)
                {
                    $(".less-than-25").show()
                }
            };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form action="" name="test" id="test">
        <select name="score1" id="score1" onchange="calculate()">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>

        <select name="score2" id="score2" onchange="calculate()">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>

        <input type="hidden" name="totalScore" id="totalScore">

        <div class="less-than-5" style="display:none;">low score</div>
        <div class="less-than-10" style="display:none;">med score</div>
        <div class="less-than-25" style="display:none;">high score</div>

        <button type="submit">Save</button>
    </form>

Muhammad Usman · Answer 3 · 2017-11-20T15:36:33.740

Use $yourInput.trigger('change'); Or $(".yourInput").change(); after you've changed the value.

Here is an example snippet (copied from jquery web)

$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

$( "#other" ).click(function() {
   $(".target").val("x")
  $( ".target" ).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <input class="target" type="text" value="Field 1">
   
</form>
<button id="other">Button</button>

Show different div based on score in hidden field

3 Answers3