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.
June 28th, 2009 at 1:02 am
I am glad that the blog owner has chosen a very interesting matter in order to spread huge knowledge among people.I would like to congratulate for this hard work to the blog owner and would like to be part of his blog by submitting comments.We our selves is an Online Store for Natural Products which contains a wide variety of Herbal products such as Penis Enlargement products, Weight Loss Products, General Health Products. Please visit us and get yourself one of the best Herbal products which does not have any kind of side effects and which will solve your problems.thanks
http://www.naturalherbalsinc.com
June 28th, 2009 at 9:55 am
Get The Best Results with Vimax Penis Enlargement Pills or Your Money Back Guaranteed. Visit http://www.maleenhancement-pills.com
June 29th, 2009 at 2:03 am
Discover the best penis enlargement products, that reviews by best penis enlargement consumer review result to get the best penis enlargement products that really works. get the real penis enlargement truth at http://www.penis4enlargement.com