Detect order in which checkboxes are clicked

Question

Hello, I am trying to make a page that allows users to select 8 checkboxes from a total of 25.

Im wondering, how to detect the exact order in which they check them. I am using a plain html front page that will be verified by a form action pointing to a php page.

Im trying to get a result like (checkbox1,checkbox2,checkbox6,checkbox3,checkbox7,etc) for eight checkboxes, and the exact order in which they were clicked.

I think I have found what I am looking for,Im not too sure, but Im having trouble implementing it.

This is what I have so far, I guess my question is, what type of php do I need to gather this info once a user has submitted the form.

For the form I have:

<form id="form1" name="form1" method="post" action="check_combination.php">
    <label id="lblA1"></label> 
    <input name="checkbox1" type="checkbox" value="a1" onclick="setChecks(this)"/> Option 1 
    <label id="lblA2"></label> 
    <input name="checkbox1" type="checkbox" value="a2" onclick="setChecks(this)"/> Option 2 
    <label id="lblA3"></label> 
    <input name="checkbox1" type="checkbox" value="a3" onclick="setChecks(this)"/> Option 3 
    <label id="lblA4"></label> 
    <input name="checkbox1" type="checkbox" value="a4" onclick="setChecks(this)"/> Option 4
</form>

For the Javascript I have:

<script type="text/javascript">
<!--
//initial checkCount of zero
var checkCount=0

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

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="checkbox1"]').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) { 
                $("#lbl" + array[i].toUpperCase()).html("first"); 
            } 
            if (i == 1) { 
                $("#lbl" + array[i].toUpperCase()).html("second"); 
            } 
        } 
    }); 
});
//-->
</script>

I have gotten the part that only allows 8 checkboxes to be checked, but Im stuck as to what I need to do to actually parse the data once it has been submitted to a page with a name like check_combination.php.

I would appreciate any help

Answer 1

• create a hidden input field with the order
• update this input field when something changes
• you'll have the order ready to be processed by PHP