Question

Problem:

To make a selection of radio buttons and compare a number from a text field with a number in array. If true, then take no action, else switch div with another div.

The HTML code:

<!-- Step 1 - Choose level -->
<label class="control-label">Level:</label>
<label class="radio"><input type="radio" name="level" id="level" value="1">C-level</label> 
<label class="radio"><input type="radio" name="level" id="level" value="2">D-level</label>

<!-- Step 2 - This apply only if choice 1 (C-level) is chosen -->
<label class="control-label">Number of authors:</label>
<label class="radio"><input type="radio" name="authors" id="authors" value="1">1 author</label> 
<label class="radio"><input type="radio" name="authors" id="authors" value="2">2 authors</label>

<!-- Step 2 - This apply only if choice 2 (D-level) is chosen -->
<label class="control-label">Credits:</label>
<label class="radio"><input type="radio" name="credits" id="credits" value="1">15 credits</label> 
<label class="radio"><input type="radio" name="credits" id="credits" value="2">30 credits</label>

<!-- Step 3 - This apply for both choice 1 and 2 -->
<label class="control-label">Type of study:</label>
<label class="radio"><input type="radio" name="study" id="study" value="1">Within</label> 
<label class="radio"><input type="radio" name="study" id="study" value="2">Between</label>

<!-- Check the number in this input field against the criteria in $within or $between -->
<label class="control-label">Participants:</label>
<input class="input-small" id="participants" name="participants" type="text">

The jQuery code:

<script type="text/javascript">
    $(document).ready(function()
    {       
        var numbers = {
            '1': {  // whithin
                '1': {  // C
                    '1': 36,
                    '2': 63
                },
                '2': {  // D
                    '1': 54,
                    '2': 63
                }
            },
            '2': {  // between
                '1': { // C
                    '1': 60,
                    '2': 105
                },
                '2': { // D
                    '1': 90,
                    '2': 105
                }
                // ...
            }
        };

        $('#participants').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 choice3 = $('input[name=study]:checked').val();
            var number = numbers[choice3][choice1][choice2];

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

Extended explanation:

The idea is to take the value of each selection and add them up to see if they correspond to the value given in one of the arrays.

Scenario:

1. User selects “C-level” (value=1), then selects “2 authors” (value=2), equals 12 when concatenated.
2. User selects “Between” (value=2) and types in the number 95 in text field (id/name=number).
3. When user moves focus from text field, jQuery should compare.

Result:

jQuery goes into the array $between, looks up the value 12 and see it’s 105. 95 is less and not equal to 105, therefore DIV 1 should be replaced with DIV 2 (while keeping the value the user has typed in).

DIV Code:

<div id="part" class="control-group">
    <label class="control-label">Participants:</label>

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

If user types in a different value and moves focus, recalculation should be done. If value in text field is equal to or above the value in the array, then do nothing.

Any help is appreciated and I wouldn’t have typed this if I wasn’t really stuck! Thanks in advance.

Answer 1

var numbers = {
    '1': {  // whithin
        '1': {  // C
            '1': 36,
            '2': 63
        },
        '2': {  // D
            '1': 54,
            '2': 63
        }
    },
    '2': {  // between
        // ...
    }
};
$('#number').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 choice3 = $('input[name=study]:checked').val();
    var number = numbers[choice3][choice1][choice2];
    if ($(this).val() < number) {
        $('#yourDiv').addClass('error');
    } else {
        $('#yourDiv').removeClass('error');
    }
});

I would suggest to use strings instead of 1/2 – it is easier to understand and less error-prone.

If that PHP array is dynamic, you can set javascript array using function json_encode:

<script>
    var numbers = <?php echo json_encode($numbers); ?>;
    // rest of code
</script>