A few weeks ago, I started a simple tutorial on how to cascade JavaScript check boxes from one row to the next in order to simplify the manipulation of large forms. This week, I’ll take it a step further by adding the same ability to both drop downs and text fields.

I’ve created a small example to help illustrate the functionality of the cascade. Once you load the cascade example page and click the down arrow next to a text field. It should change all the values in the text fields below to the same value as appears in the text box you clicked. The same can be done in the active column. Change one of the values in the active column to True and then click the down arrow next to it and all the rows below will change to True.

Without further discussion, here’s the Javascript code:

function cascSelect(theElement) {
var theForm = theElement.form;
var startBox = theElement.name;
for(z=0; z

if(theForm[z].type == ‘checkbox’ && theForm[z].name != ‘checkall’){
var checkNames = theForm[z].name;
if(checkNames == startBox.replace(/casca/, ‘checkeddelete’)) {
var startValue = (theForm[z].checked);
var startKey = z;
}
if (z > startKey) {
theForm[z].checked = startValue;
}
}
}
}
function cascScore(theElement) {
var theForm = theElement.form;
var startBox = theElement.name;
for(z=0; z if(theForm[z].type == ‘text’){
var checkNames = theForm[z].name;
var tmp = startBox.replace(/cascScore/, ”);
tmp += ’score’;
if(checkNames == tmp) {
var startValue = (theForm[z].value);
var startKey = z;
}
if(theForm[z].name.match(/[0-9]score/)) {
if (z > startKey) {
theForm[z].value = startValue;
}
}
}
}
}
function selectTrueFalse(theElement) {
var theForm = theElement.form;
var startBox = theElement.name;
for(z=0; z if(theForm[z].type == ’select-one’){
var checkNames = theForm[z].name;
var tmp = startBox.replace(/selectTrueFalse/, ”);
tmp += ‘active’;
if(checkNames == tmp) {
var startValue = (theForm[z].value);
var startKey = z;
}
if(theForm[z].name.match(/[0-9]active/)) {
if (z > startKey) {
theForm[z].value = startValue;
}
}
}
}
} The only thing you have to watch for is the naming scheme. I was pretty lazy when I put all of this together and so it doesn’t follow any clean schema so to speak. Make sure the form fields have the same name as the JavaScript functions and you should be set.

Hope this helps some of you out, like I said before it may have saved me a few hours of work had I known it existed previously. It can be cleaned up quite a bit and I know all three functions could be lumped together into a more dynamic function if you like, but I’m not going to trouble with that here.

Cheers! Charles

In the ten years that I’ve been doing online programming, I’ve spent at least half of that time working on the backends or administrative portions of content management systems. Content Management Systems or CMS as they’re often called are dynamically driven websites. Great, but what the hell does that mean? A CMS is an online tool that allows users to build very large websites without needing knowledge of the workings behind the text.

Take WordPress for instance, it’s a blog publishing tool (and happens to be the tool I chose to publish this blog entry). It’s also a variation of a CMS. It allows users to enter text in a similar way to writing in Microsoft Word and have it appear on a website following a specific template. Once the CMS templates are setup, the display will have the same formatting even though the content is different. The user just writes the content and chooses when to display it. The programming behind the scenes decides how to display it and how to manage all the rest of the workings.

One of my clients wanted a way to edit multiple entries at a time which is fairly simple, you output the listings into a grid display in a table; I won’t bore you with how to do that. The complex part was finding a solution to choose multiple blocks of entries to edit, kind of like a select all but not quite, more of a select some but faster than selecting them one by one.

Either he or one of his programmers decided top create a cascading tool that would allow users to select a row, click on the submit button in that row and each of the rows below that one selected. By contrast, deselecting the row further down the page and hitting that row’s submit button would deselect all the rows below that one.

Here’s an example and below is the Javscript I created to do this:
// JavaScript Document
function cascSelect(theElement) {
var theForm = theElement.form;
var startBox = theElement.name;
for(z=0; z<theForm.length;z++){
if(theForm[z].type == 'checkbox' && theForm[z].name != 'checkall'){
var checkNames = theForm[z].name;
if(checkNames == startBox.replace(/pos/, 'chk')) {
var startValue = (theForm[z].checked);
var startKey = z;
}
if (z > startKey) {
theForm[z].checked = startValue;
}
}
}
}

You might be wondering what the usefulness of the cascade might be. Think about having 200 rows on the page instead of the six I placed on the examples. What if you wanted to change the values for twenty of those rows without having to select each one individually. This will facilitate that goal.

I’ve used similar solutions which were stored in session cookies and selected via submit rather than javascript functions however using javascript will allow us to cascade values as I will show in my next entry. I hope this is helpful to someone, I might have saved a bunch of hours had I known this solution existed.

Charles