Databases
StackOverflow2013
Postsdbo
POHow to pass a checkbox array from form to results page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to pass a checkbox array from form to results page
    text
    copied!<p>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.</p> <p>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.</p> <p>What I need to know is, once they select the checkboxes, <strong>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</strong>.</p> <p>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</p> <p>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.</p> <p>Here is the Javascript:</p> <pre><code>&lt;script type="text/javascript"&gt; &lt;!-- //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&gt;maxChecks){ obj.checked=false checkCount=checkCount-1 alert('you may only choose up to '+maxChecks+' options') } } //--&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; &lt;!-- $(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 &lt; 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 &lt; 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"); } } }); }); //--&gt; &lt;/script&gt; </code></pre> <p>Here is an example of the input fields:</p> <pre><code> &lt;td width="20" align="center" valign="middle"&gt;&lt;label id="1"&gt;&lt;/label&gt;&lt;input name="checkbox" type="checkbox" value="1" onclick="setChecks(this)"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;label id="2"&gt;&lt;/label&gt;&lt;input name="checkbox" type="checkbox" value="2" onclick="setChecks(this)"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;label id="3"&gt;&lt;/label&gt;&lt;input name="checkbox" type="checkbox" value="3" onclick="setChecks(this)"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;label id="4"&gt;&lt;/label&gt;&lt;input name="checkbox" type="checkbox" value="4" onclick="setChecks(this)"/&gt;&lt;/td&gt; &lt;td width="20" align="center" valign="middle"&gt;&lt;label id="5"&gt;&lt;/label&gt;&lt;input name="checkbox" type="checkbox" value="5" onclick="setChecks(this)"/&gt;&lt;/td&gt; and so on up to 20 </code></pre> <p>I am a noobie, and I pieced together what I have so far, from various sources.</p> <p>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.</p> <p>Any help would be appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload