Oh, the joys of updating or upgrading software that is not of your own work. Makes you truly realize how lucky you are for all that education you slept through in college.

Occasionally, I’ll get projects both inside and outside of work to add functionality to an existing application, sometimes without there being an internal development kit (meaning: creating an outside application to handle the new stuff externally).

There’s a large software package that I’ve been working on in my job for the last year that contains a sometimes useful internal “language” (thought it’s not truly a language, more like a markup set, with a way to write SQL commands to show tabular (or sometimes not so tabular) data) which allows me to retrieve information on a HTML page.

Well, we’re in the process of upgrading the software (which will occur during the summer, I hope), and so the data must translate between iterations. But due to the time difference, sometimes there is functionality in the newer version that does not exist in the older, and I have to find a way of mimicking the functionality.

If you have ever needed to store tabular data, such as when you have to store a list of check box values for one parent record,  into a single (usually co-opted) text field and all you have is HTML/JavaScript to use, you’re in luck. Explanation below.

In my example, you are recording which check boxes have been checked from a list of twenty, each labeled “Value 01″ thru “value 20″. Their values are 01 through 20. They are all named “datacbs”.

First, find a way of placing the data into a Text Area (or a hidden field): these unlimited spaces are great for storing a large amount of data. Hide the text area with a small piece of markup: style="display: none;", which you can then remove during testing.

Second, agree on a separator character (the most commonly used one is a comma). If you have multiple values per entry (such as an id and a value) choose two (like a comma to separate id from value, and a semicolon to separate complete entries) and then make sure everyone uses these rules.

Now the decision. If your check boxes are dynamic, you’ll need to include the ids and the values. Mine are static, so I will only need to include the values. I separate the values with a comma, since I know that none of my values will ever have a comma in it.

Set up the check boxes on the HTML page with the hidden text area:

<div id="divCBFields">
    <input name="datacbs" type="checkbox" value="1" />Value 01<br />
    <input name="datacbs" type="checkbox" value="2" />Value 02<br />
    <input name="datacbs" type="checkbox" value="3" />Value 03<br />
    ...
    <input name="datacbs" type="checkbox" value="20" />Value 20<br />
</div>
<textarea id="storeddata" name="storeddata"> </textarea>

Now for the JavaScript. You’ll need three functions: One to read the data and populate the checkboxes correctly, one to modify the text area after a click is registered on a check box, and one to add the event listeners to the check boxes.

The first, the AddListener() function, should be run in the body “onload” event (or in an in-place script block). Note that I gave the check boxes all the same name; this will make life much easier if the number of check boxes ever change.

function AddListeners() {
    var cbs = document.getElementsByName("datacbs");

    for (var i = 0; i < cbs.length; i++) {
        if (cbs[i].type == "checkbox") {
            if (cbs[i].attachEvent)
                cbs[i].attachEvent('onclick', updateTAData);
            else if (cbs[i].addEventListener)
                cbs[i].addEventListener('click', updateTAData, false);
        }
    }
}

Note that in this method, I attach a new event (without overwriting what’s already attached) to each check box.

The next method, updateTAData(), is the method that will be called every time a check box in the div container is clicked. It will take the value of the check box and add it to the text area data.

function updateTAData() {
    var finalval = "";
    var storeddata = document.getElementById("storeddata");
    var cbs = document.getElementsByName("datacbs");

    for (var i = 0; i < cbs.length; i++) {
        if (cbs[i].type == "checkbox" && cbs[i].checked) {
            if (finalval.length > 0) finalval += ",";
            finalval += cbs[i].value;
        }
    }

    storeddata.value = finalval;
}

You shouldn’t have any problem with this structure, especially if you want the check boxes spread over multiple containers, as long as you do as I did and name them all the same. There is also code out there for “getElementsByClassName()” that will allow you to assign a class to each checkbox and then gather them from that, but I am going bare-bones here. it’s your choice which you want to do. I personally choose it this way because I know that these check boxes are going to be the only thing named with this name (sometimes, you can’t tell if dynamic controls are created with a name you’re using in your code – best to be on the safe side and choose a longer, individual name)

The last function, readTAData(), is used after loading (which is handled like the event-attachment code; you can place it in the body onload event, or you can run it from a script block at the bottom of the page (or at least after the check boxes and text area).

function readTAData() {
    var storeddata = document.getElementById("storeddata");
    var cbs = document.getElementsByName("datacbs");

    var dataparts = storeddata.value.split(",");    for (var i = 0; i < dataparts.length; i++) {
        for (var a = 0; a < cbs.length; a++) {
            if (cbs[a].value == dataparts[i]) {
                cbs[a].checked = true;
                continue;
            }
        }
    }
}

Note that I have to loop through the entire list of check boxes for each value. (I included the “continue;” command to make the inner loop break and continue on to the next value from the outer loop. This speeds up the process a little). It’s not terribly fast, but it will work for a small set of check boxes. If you need to use a larger amount of check boxes (say, in the hundreds), you can always grab a nice search algorithm to speed things along.

Finally, if you hadn’t already put the two methods into the onload event of the body, you can simply add the following to the bottom of the HTML page (before the ending </body> tag, but below the text area and check boxes) to run the code on load.

<script language="javascript">
    AddListeners();
    readTAData();
</script>

Here endeth the lesson. That’s all that’s needed. If you don’t hide your text area, you can click the check boxes and watch it update the field. It’s quite neat. While anything I use is obviously going to be a little more intensely optimized and include application-specific code, this little “tutorial” should give you a good start on handling a set of data like this. Normally, and I can’t stress this enough, if you have multiple bits of data that references one object, don’t store it like this unless you don’t have a choice; create a new table and index it. Every time I see something like this I feel a little dirty, but sometimes you don’t have a choice.