Search code examples
phpbit-fields

Using Javascript (not JQuery) to tally a range of checkboxes,

I'm currently working on a php script that will be used to perform a search query on a database. (Below is the form, coding and appearance, the backend is ZenCart 1.5.1 (not that it should matter))

Imgur

<div style="float:left;width: 100%; border-top: 1px solid #000000;">
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="air" id="resources-air"><label class="checkboxLabel" for="resources-air">Air</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="all" id="resources-all"><label class="checkboxLabel" for="resources-all">All</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="chaos" id="resources-chaos"><label class="checkboxLabel" for="resources-chaos">Chaos</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="death" id="resources-death"><label class="checkboxLabel" for="resources-death">Death</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="earth" id="resources-earth"><label class="checkboxLabel" for="resources-earth">Earth</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="evil" id="resources-evil"><label class="checkboxLabel" for="resources-evil">Evil</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="fire" id="resources-fire"><label class="checkboxLabel" for="resources-fire">Fire</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="good" id="resources-good"><label class="checkboxLabel" for="resources-good">Good</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="life" id="resources-life"><label class="checkboxLabel" for="resources-life">Life</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="order" id="resources-order"><label class="checkboxLabel" for="resources-order">Order</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="void" id="resources-void"><label class="checkboxLabel" for="resources-void">Void</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="water" id="resources-water"><label class="checkboxLabel" for="resources-water">Water</label></div>
    <div style="width: 130px; float: left;"><input type="checkbox" name="ufs_resources[]" value="infinity" id="resources-infinity"><label class="checkboxLabel" for="resources-infinity">Infinity</label></div>
</div>

What I would like to do is change this so that "Air" is 1, "All" is 2, "Chaos" is 4, and so forth and take the total of all these checkboxes and apply it as a hidden value in the form but remove the ufs_resources[] from the soon-to-be-made $_GET on the form's submission. (The reason for this is because ZenCart features a sanitize function that cleans out any non-letters from the URL on the search results page.)

I know there is a way to do this with jQuery but I would like to avoid this if possible and I would like to avoid sending the ufs_resources[] to be processed.

Is there a way to do this with "out-of-the-box" Javascript or PHP?

Solution 
  • // HTML
// this is the hidden textbox holding the checked values (or their sum)
<input type="hidden" name="chosen" id="chosen" value="" />

// JavaScript
// every checked checkbox is actually equal to (i+1)
var t = document.getElementsByName('ufs_resources[]'), a = [], i, sum = 0;
for(i = 0; i < t.length; i++) {
    // if(t[i].checked) a.push(i+1);
    if(t[i].checked) sum = sum + (i+1);
}
document.getElementById('chosen').value = sum; // join('a'); // 1,2,4,8

// PHP
// finally you can receive the content of the hidden textbox as a string (or sum)
// $chosen = explode(",", $_GET["chosen"]); // explode() may be omitted if you don't need an array
$chosen = $_GET["chosen"]; // if you need only the sum 
// of course, you may use POST method as well