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>

Selvakumar Arumugam · Accepted Answer · 2012-06-01 15:42:13Z

5

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

answered Jun 1, 2012 at 15:42

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

4 Comments

kexxcream Over a year ago

So stupid of me, didn't think of the data type. Thank you for pointing it out. Have to be more careful next time!

Selvakumar Arumugam Over a year ago

@kexxcream May I ask If I missed something in my post?

Ryan Wheale Over a year ago

If I could reassign points, I'd give it to you. You beat me to the punch.

Selvakumar Arumugam Over a year ago

@RyanWheale The intention was to understand If i missed something obvious.. I don't want points as I got enuf for what was posted here..

Ryan Wheale · Accepted Answer · 2012-06-01 15:46:50Z

1

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>

answered Jun 1, 2012 at 15:46

Ryan Wheale

28.7k11 gold badges87 silver badges105 bronze badges

1 Comment

Ryan Wheale Over a year ago

doh... another answer posted... my bad

Collectives™ on Stack Overflow

Check value in input text field with that of JSON array

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related