IE Javascript values not updating

Question

I have a HTML range control, that using javascript passes values back to a HTML Class.

Please see the below code:

HTML

        <div class="userbox">
                <h3> Number of Users:&nbsp;&nbsp;&nbsp;<span class="usercount4">5</span><h3>
                <input type=range min=5 max=50  value="5" step=1 id=usercount4></input>
        </div>

        <div class="serverbox">     
                <h3> Number of Channels:&nbsp;&nbsp;&nbsp;<span class="servercount4">&nbsp;1</span><h3>
                <input type=range min=5 max=150  value="5" step=5 id=servercount4></input>                                                      
        </div>

        <div class="totalbox">  
                <h3>Total:&nbsp;&nbsp;&nbsp;<h3>
                <span class="total4">£30</span><p style="display: inline"> &nbsp;&nbsp;/ month</p>
        </div>

JAVASCRIPT

                    $(document).ready(function() {

                    var total4;
                    var count4 = $('#usercount4').val();
                    var addToTotal4 = function(){
                        total4 += parseFloat(this.value, 10);
                    };

                    var compute4 = function() {
                        total4 = 0;
                        $('.option4:checked ,#servercount4 ,#usercount4').each(addToTotal4);
                        $('.total4').text('£' + (total4 + ($('#usercount4').val()*5)-($('#usercount4').val())).toFixed(0));             
                    };

                    $('.option4, #servercount4 , #usercount4').change(compute4);

                    $('#usercount4').on('input', function(){
                        $('.usercount4').text($('#usercount4').val());

                    });

                    $('#servercount4').on('input', function(){
                        $('.servercount4').text($('#servercount4').val()/5);
                    });

                    $('#usercount4').on('input', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val()*5))));
                    });

                    $('#servercount4').on('input', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val()*5))));
                    });

                });

The code works fine on Edge, Safari and Firefox. But on IE the total4 field updates but the usercount4 and servercount4 fields do not.

A working demo can be seen here (the code is from the last set of range controls on the page)

www.yellowsand.co.uk/#telephony

Any help greatly appreciated.

http://stackoverflow.com/questions/17384218/jquery-input-event#17384341 — Bharadwaj, May 12 '16 at 08:48
Thanks but I am testing on IE 11, so the oninput event should be a supported function — user3580480, May 12 '16 at 08:56
I don't think so, there is no guaranty that IE will work for any standards. — Bharadwaj, May 12 '16 at 08:57
It also doesn't explain why some of my values are updating and others are not. Thanks, but I don't think this is the answer I need. — user3580480, May 12 '16 at 09:08

Gnucki · Accepted Answer · 2016-05-12T09:26:44.073

Try that:

                    $(document).ready(function() {

                    var total4;
                    var count4 = $('#usercount4').val();
                    var addToTotal4 = function(){
                        total4 += parseFloat(this.value);
                    };

                    var compute4 = function() {
                        total4 = 0;
                        $('.option4:checked ,#servercount4 ,#usercount4').each(addToTotal4);
                        $('.total4').text('£' + (total4 + (parseFloat($('#usercount4').val())*5)-(parseFloat($('#usercount4').val()))).toFixed(0));             
                    };

                    $('.option4, #servercount4 , #usercount4').change(compute4);

                    $('#usercount4').on('input change', function(){
                        $('.usercount4').text($('#usercount4').val());

                    });

                    $('#servercount4').on('input change', function(){
                        $('.servercount4').text(parseFloat($('#servercount4').val())/5);
                    });

                    $('#usercount4').on('input change', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val())*5)));
                    });

                    $('#servercount4').on('input change', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val())*5)));
                    });

                });

The variable count4 is not used.

You should really consider refactoring your code!

Thanks, but what did you change, the code provided looks the same as the original? Also it works in the same way. Ok on Edge, but usercount4 and servercount4 values do not update. — user3580480, May 12 '16 at 08:53
Try the new version of the code I just modified. I changed some computing operations. I thought it could be the problem for IE because there was some hard conversions. But it seems this is the input event which does not trigger. I added change event handling. I do not know if it is going to do the job.. — Gnucki, May 12 '16 at 09:30

IE Javascript values not updating

1 Answers1