Javascript Cascading Form Values - part 2
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
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
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
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;
}
}
}
}
}
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 
February 1st, 2008 at 3:52 pm
Now that I’ve added the arrow image (down.gif), the example should be more understandable.
March 25th, 2008 at 8:24 pm
I was confused by the submit and delete buttons. Now that I played with it and understand how it works its pretty nifty. Thanks!
August 7th, 2008 at 4:37 am
Amazing script very handy on updating the form values. Unfortunately i am having great difficulty in actually using these values to update the database when posted. I dont want to take too much of your time but if you could point be in the right direction that would be a great help.
October 13th, 2008 at 12:56 am
This blog Is very informative , I am really pleased to post my comment on this blog . It helped me with ocean of knowledge so I really belive you will do much better in the future . Good job web master .