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

Question

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?

Why on earth would you not just change the value of these to what you require on the server side before creating this page and avoid all this headache. — Ohgodwhy, Jul 02 '14 at 01:49
That solves one problem. I can easily edit the question coding to make it so that its `value="2" and etc. but the question then goes. Do I still send this in as an array and process server side as a foreach loop or is there another method for me to use. — Paul Williams, Jul 02 '14 at 01:57
What is wrong with iterating the `ufs_resources[]`? this is the practical way to process data..Unless there is some limitation in place that hasn't been brought up....[Also, here's your selector and iterator in pure javascript](http://jsfiddle.net/3A4yw/) — Ohgodwhy, Jul 02 '14 at 01:57
I'm not sure if the coding will allow for url's that contain the [] characters to be sent. The code literally scrubs $_GET strings for anything that remotely looks like a hacking attempt and would remove them from the string. — Paul Williams, Jul 02 '14 at 02:00
I've never used Zen Cart, but that sounds like a wholly unreasonable approach that hundreds (if not thousands) before you would have screamed about from the top of a mountain. Furthermore, why not use `$_POST`? — Ohgodwhy, Jul 02 '14 at 02:01
@PaulWilliams I'm not sure if I understood your question but I'll try :) Check out my answer. — hex494D49, Jul 02 '14 at 02:05
@Ohgodwhy, the innate coding of Zen-Cart uses `$_GET`. Trust me, if I had my way I'd change every single instance of a GET method being used to post. — Paul Williams, Jul 02 '14 at 02:07

hex494D49 · Accepted Answer · 2014-07-02T02:22:04.617

2

// 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

edited Jul 02 '14 at 02:22

answered Jul 02 '14 at 02:05

hex494D49

9,109
3
38
47

This is close. But instead of an array being built, is there a way to just get a sum of the values and assign it to the hidden value? – Paul Williams Jul 02 '14 at 02:08
@PaulWilliams Yes, of course :) As you can see, I'll only comment the old parts so you can choose between the sum or string. – hex494D49 Jul 02 '14 at 02:10
After a lot of work and hacking around, I managed to get this work how I wanted it to. Thanks! – Paul Williams Jul 03 '14 at 00:53

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

1 Answers1