How to pass a checkbox array from form to results page.

Question

Im trying to build a page that will allow a user to select a maximum of 8 out of 20 checkboxes, in a specific order, on a single form.

Im trying to make a page that will only be viewable if the right sequence of checkboxes are clicked, a neat way to let only those who have the checkbox sequence in on a certain part of my website.

What I need to know is, once they select the checkboxes, how can I not only pass it on to a test page to view the data, but also, how to pass the data showing the exact sequence of how the checkboxes were checked.

Example: The check boxes are numbered one from twenty. If they select checkbox1,checkbox4,checkbox2,checkbox7,etc, Id like the data to be passed on in the exact order checked, 1,4,2,7,etc

So far, I have have the form done, Id like to know what I need to add to the javascript in order to pass the variables on exactly as checked.

Here is the Javascript:

<script type="text/javascript">
<!--

//initial checkCount of zero 
var checkCount=0

//maximum number of allowed checked boxes 
var maxChecks=3

function setChecks(obj){ 
//increment/decrement checkCount 
if(obj.checked){ 
checkCount=checkCount+1 
}else{ 
checkCount=checkCount-1 
}

//if they checked a 4th box, uncheck the box, then decrement checkcount and pop alert 
if (checkCount>maxChecks){ 
obj.checked=false 
checkCount=checkCount-1 
alert('you may only choose up to '+maxChecks+' options') 
}

}

//--> 
</script>



<script type="text/javascript">
<!--
$(document).ready(function () { 
    var array = []; 
    $('input[name="checkbox"]').click(function () { 
        if ($(this).attr('checked')) { 
            // Add the new element if checked: 
            array.push($(this).attr('value')); 
        } 
        else { 
            // Remove the element if unchecked: 
            for (var i = 0; i < array.length; i++) { 
                if (array[i] == $(this).attr('value')) { 
                    array.splice(i, 1); 
                } 
            } 
        } 
        // Clear all labels: 
        $("label").each(function (i, elem) { 
            $(elem).html(""); 
        }); 
        // Check the array and update labels. 
        for (var i = 0; i < array.length; i++) { 
            if (i == 0) { 
                $("#" + array[i].toUpperCase()).html("1"); 
            } 
            if (i == 1) { 
                $("#" + array[i].toUpperCase()).html("2"); 
            }
            if (i == 2) { 
                $("#" + array[i].toUpperCase()).html("3"); 
            } 
            if (i == 3) { 
                $("#" + array[i].toUpperCase()).html("4"); 
            } 
            if (i == 4) { 
                $("#" + array[i].toUpperCase()).html("5"); 
            } 
            if (i == 5) { 
                $("#" + array[i].toUpperCase()).html("6"); 
            } 
            if (i == 6) { 
                $("#" + array[i].toUpperCase()).html("7"); 
            } 
            if (i == 7) { 
                $("#" + array[i].toUpperCase()).html("8"); 
            }  
        } 
    }); 
});
//-->
</script>

Here is an example of the input fields:

    <td width="20" align="center" valign="middle"><label id="1"></label><input name="checkbox" type="checkbox" value="1" onclick="setChecks(this)"/></td>
    <td width="20" align="center" valign="middle"><label id="2"></label><input name="checkbox" type="checkbox" value="2" onclick="setChecks(this)"/></td>
    <td width="20" align="center" valign="middle"><label id="3"></label><input name="checkbox" type="checkbox" value="3" onclick="setChecks(this)"/></td>
    <td width="20" align="center" valign="middle"><label id="4"></label><input name="checkbox" type="checkbox" value="4" onclick="setChecks(this)"/></td>
    <td width="20" align="center" valign="middle"><label id="5"></label><input name="checkbox" type="checkbox" value="5" onclick="setChecks(this)"/></td>

and so on up to 20

I am a noobie, and I pieced together what I have so far, from various sources.

I am having trouble understanding how to grab the array data from the second snippet of javascript, and passing it along to a php page I need to create that will echo it in order to test to see if it is indeed passing along the variables in the exact order they were clicked.

Any help would be appreciated.

Answer 1

Just push the IDs of the checkboxes onto an Array, then convert that to a string and post it back. Array[0] will be the first, etc. If Array.length > 7, disable the other checkboxes that are not in the array. That should be simple enough.

Answer 2

There is a very similar question here that asks for a way to detect the order of selected checkboxes.

Full code in jsFiddle

Select/Unselect the checkbox then click the textarea to see your array.

What I did there is simply add new element on the array when user select a checkbox. If he deselect it will find the index by its value and remove from the array.

Then you can check the length using arrayName.length, if it matches your condition then you can submit.