Check value in input text field with that of JSON array

Question

The problem:

I have a function that partially works and for some reason it gets stuck with the value 100. All other values work without a problem. The function compares the value of an input field with the correspondent value in a JSON array.

Scenario:

Take for instance you make the choice 3 then 1 then 1, you will end up with value 12. If you enter 100 in the input field and then move on an error will show up as indicated by the addClass(). 100 is not less than 12 and should not allow the addClass() to add the error. Where is the error here?

The HTML code:

<div id="ref" class="control-group">
    <label class="control-label">Number of references:</label>

    <div class="controls">
        <div class="input-prepend">
            <input class="input-small" id="references" name="references" type="text">
        </div>
    </div>
</div>

The array is generated by PHP and transformed to JavaScript through json_encode() according to the following:

var numbers = <?php echo json_encode($numbers); ?>;

The array:

{
    "1":{
        "1":{
            "1":"36",
            "2":"63"
        },
        "2":{
            "1":"54",
            "2":"63"
        }
    },
    "2":{
        "1":{
            "1":"60",
            "2":"105"
        },
        "2":{
            "1":"90",
            "2":"105"
        }
    },
    "3":{
        "1":{
            "1":"12",
            "2":"21"
        },
        "2":{
            "1":"18",
            "2":"24"
        }
    }
}

The jQuery code:

<script type="text/javascript">
    $(document).ready(function()
    {           
        $('#references').change(function() 
        {
            var choice1 = $('input[name=level]:checked').val();

            if (choice1 == '1') 
            {
                var choice2 = $('input[name=authors]:checked').val();
            } 
            else 
            {
                var choice2 = $('input[name=credits]:checked').val();
            }

            var number = numbers[3][choice1][choice2];

            if ($(this).val() < number) 
            {
                $('#ref').addClass('error');
            } 
            else 
            {
                $('#ref').removeClass('error');
            }
        });
    });
</script>

Answer 1

You are doing a string comparison there. In string comparision "100" < "12" = true . Try doing a number comparison like below,

if (parseInt($(this).val(), 10) < parseInt(number, 10))

Answer 2

Right now, all your numbers are strings... so the javascript engine isn't treating your numbers as true numbers.

Try wrapping parseInt() around anything that you expect to be a number:

<script type="text/javascript">
    $(document).ready(function()
    {           
        $('#references').change(function() 
        {
            var choice1 = $('input[name=level]:checked').val();

            if (choice1 == '1') 
            {
                var choice2 = $('input[name=authors]:checked').val();
            } 
            else 
            {
                var choice2 = $('input[name=credits]:checked').val();
            }

            var number = parseInt( numbers[3][choice1][choice2], 10);

            if (parseInt( $(this).val(), 10) < number) 
            {
                $('#ref').addClass('error');
            } 
            else 
            {
                $('#ref').removeClass('error');
            }
        });
    });
</script>