...

View Full Version : Set selects, selected, by link or checkbox



tripwater
12-21-2005, 05:35 PM
I have a form that has select boxes for the hours, mins and meridiems for each day of the week. It is a form that deals with a department within a company and the hours of operation.

What I would like to do is set a link (or checkbox if easier) beside all of the days that says "Mark same as above" and when clicked, it would take that row of selects and set them all to the same as the fields above them.

The reason for this is the form has a From and a To range, so they would have to select the hour, minute, meridiem for the From range then do it again for the To range and repeat this 7 times (once for each day of week). If a dept happens to have the same hours for 5 days out of the week, there is no need to make them keep selecting the same choices when they could click a link or checkbox to set each one individually like the row above it.

I was wondering if I could somehow take the current selections say for monday and have a link beside tuesday that would pass a query string to the page and set tuesday.

//Let's say the form name is "depts"

//the fields for monday and tuesday are "mon_from_hour", "mon_from_min", "mon_from_meridiem", "tue_from_hour", "tue_from_min", "tue_from_meridiem"




//link beside the tuesday row: (I know this is incorrect but a psuedo code link would look like:)
<a href="testpage.php?mondayhour=document.depts.mon_from_hour.value">Mark same as above</a>

then once clicked (for the sake of time I will only do the hour here...because if I can get this to work, I can get the rest)



<select name=\"mon_from_hour\">";

//PHP code:
for ($i = 1; $i <= 12; $i++)
{
if ($_GET["mondayhour"] == $i)
$value .= "<option value=\"".$i."\" selected>".$i."</option>";

if ($_GET["mondayhour"] <> $i)
$value .= "<option value=\"".$i."\">".$i."</option>";
}

$value .= "</select>";

echo $value;



or with checkbox



<script>
function setit()
{
if (document.depts.tuesday_set.checked)
document.depts.tue_from.hour.value = document.depts.mon_from.hour.value;

//or however you would say "Set the Tuesday from hour that equals monday's from hour to selected"
}

</script>


<input type=checkbox name=tuesday_set onclick=\"return setit()\"> Mark same


How can I pull this off? Even if I don't use a link to call the page and pass a query string, can I use a checkbox instead? And when checked it set the selected values for that row to the row above it?

Thank you for any help with this.

vwphillips
12-21-2005, 06:48 PM
save me thinking and have a look at

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f12

this first

tripwater
12-21-2005, 07:17 PM
Thanks for the reply, but none of the scripts on that page seem to help. I only see select disabling,No Duplicate Selects and Move Select Box Option none of which show me how to take info from one select(droplist) and set the selected option on another select(droplist) to what is currently selected in the first by way of a link or checkbox.

See, I don't want the user to have to select anything in the droplist if what they want is already set in the row above. They would just click a link or checkbox and the fields would all be set to the same as teh row above.

Thanks again

vwphillips
12-21-2005, 10:33 PM
have a look as this DRAFT


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// AsMaster Select (21-12-2005) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// A checkbox enables a selectlist duplicating the selected index of a master SelectList

// Application Notes
// The SelectLists and Check boxes must be nested in an element with a unique ID
// The check boxes must have a onclick event zxcAsMasterSelect(this,'Grp1',0,1);"
// Where:
// parameter 0 = the checkbox object (object)
// parameter 1 = the unique ID of the parent element (string)
// parameter 2 = the number (order in the parent element) of the master selectlist (digit 0 to n)
// parameter 3 = the number (order in the parent element) of the slave selectlist (digit 0 to n)

// All function, variable names are prefixed with 'zxc' to minimise conflicts with other JavaScripts

// The functional Code(2k) is best as an external javascript

// Tested with IE6 and Mozilla FireFox

// Functional Code - NO NEED to Change

function zxcAsMasterSelect(zxcobj,zxcpid,zxcmaster,zxcslave){
var zxcpobj=document.getElementById(zxcpid);
zxcpobj.sel=zxcpobj.getElementsByTagName('SELECT');
if (!zxcpobj.sel[zxcmaster].ary){
zxcpobj.sel[zxcmaster].ary=new Array();
}
if (zxcobj.checked){
zxcpobj.sel[zxcmaster].ary.push(zxcpobj.sel[zxcslave]);
zxcpobj.sel[zxcslave].selectedIndex=zxcpobj.sel[zxcmaster].selectedIndex;
zxcpobj.sel[zxcslave].setAttribute('disabled','disabled');
}
else {
zxcpobj.sel[zxcslave].removeAttribute('disabled');
zxcpobj.sel[zxcmaster].ary=zxcpobj.sel[zxcmaster].ary.remove(zxcpobj.sel[zxcmaster].ary,zxcpobj.sel[zxcslave]);
}
zxcpobj.sel[zxcmaster].ary=zxcpobj.sel[zxcmaster].ary.noduplicates(zxcpobj.sel[zxcmaster].ary);
zxcAddChange(zxcpobj.sel[zxcmaster])
}

function zxcChange(){
if (this.ary.length<1){ return; }
for (var zxc0=0;zxc0<this.ary.length;zxc0++){
this.ary[zxc0].selectedIndex=this.selectedIndex;
}
}

Array.prototype.remove=function(zxcrema,zxcremi){
for (var zxc0=0;zxc0<zxcrema.length;zxc0++){
if (zxcrema[zxc0]==zxcremi){
zxcrema.splice(zxc0,1);
}
}
return zxcrema;
}

Array.prototype.noduplicates=function(zxca){
if (zxca.length<2){ return zxca; }
zxctemp=[zxca[0]];
for (zxc1=0;zxc1<zxca.length;zxc1++){
zxcck=true;
for (zxc2=0;zxc2<zxctemp.length;zxc2++){ if (zxctemp[zxc2]==zxca[zxc1]){ zxcck=false; } }
if (zxcck){ zxctemp[zxctemp.length]=zxca[zxc1]; }
}
return zxctemp;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddChange(zxc){
if (zxc.addChange){ return; }
zxc.addChange=zxcChange;
zxcEventAdd(zxc,'change','addChange');
}


//-->
</script></head>

<body>
<a id="Grp1" >
<select >
<option >Tom</option>
<option >Dick</option>
<option >Harry</option>
<option >Joe</option>
</select> Master Select
<br>
<select>
<option >Tom</option>
<option >Dick</option>
<option >Harry</option>
<option >Joe</option>
</select>
<input type="checkbox" onclick="zxcAsMasterSelect(this,'Grp1',0,1);"> As Master
<br>
<select >
<option >Tom</option>
<option >Dick</option>
<option >Harry</option>
<option >Joe</option>
</select>
<input type="checkbox" onclick="zxcAsMasterSelect(this,'Grp1',0,2);" > As Master
</a>
</body>

</html>

Pyth007
12-22-2005, 01:48 PM
Nice script VWP! I like the small touches you added, like disabling the selects when the box is checked, as well as having the "slaves" reflect the master whenever the master changes (I was just thinking of having the slaves selectedIndex = master's sI when box is clicked, but didn't think about what would happen if the person changed master's value afterward...)

tripwater: This is probably the best way to do this so that you do not have to constantly refresh the page each time the user makes a change. But be aware that this is basically a javascript solution, which means that the client computers would need to have js turned on in order for them to have the added features. It sounds as though this might be an internal web application, which would be good since you'd be able to verify that the users have js turned on. However, if this is a public web site, then just be aware that some users may not be able to use these features (although the scripts are used to enhance the page, and are not required to use the site; without js, the users will just have to suffer through entering in each select instead of using the checkbox feature). If this is the case (that its public web site), you may want to make a note on your page letting users know that the added features require js (maybe "Javascript Enhanced Site"). If you feel you need everyone to be able to use these features, then you may need to resort to a php solution...

vwphillips
12-22-2005, 05:46 PM
thanks Pyth007

this is what I did not have time for last night, 'inheritance' or is 'ancenstry'


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// AsMaster Select (21-12-2005) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// A checkbox enables a selectlist duplicating the selected index of a master SelectList

// Application Notes
// The SelectLists and Check boxes must be nested in an element with a unique ID
// The check boxes must have a onclick event zxcAsMasterSelect(this,'Grp1',0,1);"
// Where:
// parameter 0 = the checkbox object (object)
// parameter 1 = the unique ID of the parent element (string)
// parameter 2 = the number (order in the parent element) of the master selectlist (digit 0 to n)
// parameter 3 = the number (order in the parent element) of the slave selectlist (digit 0 to n)

// All function, variable names are prefixed with 'zxc' to minimise conflicts with other JavaScripts

// The functional Code(2k) is best as an external javascript

// Tested with IE6 and Mozilla FireFox


// Functional Code - NO NEED to Change

function zxcAsMasterSelect(zxcobj,zxcpid,zxcmaster,zxcslave){
var zxcpobj=document.getElementById(zxcpid);
zxcpobj.sel=zxcpobj.getElementsByTagName('SELECT');
if (!zxcpobj.sel[zxcmaster].ary){
zxcpobj.sel[zxcmaster].ary=new Array();
}
if (zxcobj.checked){
zxcpobj.sel[zxcmaster].ary.push(zxcpobj.sel[zxcslave]);
zxcpobj.sel[zxcslave].selectedIndex=zxcpobj.sel[zxcmaster].selectedIndex;
zxcpobj.sel[zxcslave].setAttribute('disabled','disabled');
}
else {
zxcpobj.sel[zxcslave].removeAttribute('disabled');
zxcpobj.sel[zxcmaster].ary=zxcpobj.sel[zxcmaster].ary.remove(zxcpobj.sel[zxcmaster].ary,zxcpobj.sel[zxcslave]);
}
zxcpobj.sel[zxcmaster].ary=zxcpobj.sel[zxcmaster].ary.noduplicates(zxcpobj.sel[zxcmaster].ary);
zxcAddChange(zxcpobj.sel[zxcmaster])
}

function zxcChange(){
if (this.ary.length<1){ return; }
for (var zxc0=0;zxc0<this.ary.length;zxc0++){
this.ary[zxc0].selectedIndex=this.selectedIndex;
if (this.ary[zxc0].ary){
if (this.ary[zxc0].ary.length>0){
for (var zxc1=0;zxc1<this.ary[zxc0].ary.length;zxc1++){
this.ary[zxc0].ary[zxc1].selectedIndex=this.ary[zxc0].selectedIndex;
}
}
}
}
}


Array.prototype.remove=function(zxcrema,zxcremi){
for (var zxc0=0;zxc0<zxcrema.length;zxc0++){
if (zxcrema[zxc0]==zxcremi){
zxcrema.splice(zxc0,1);
}
}
return zxcrema;
}

Array.prototype.noduplicates=function(zxca){
if (zxca.length<2){ return zxca; }
zxctemp=[zxca[0]];
for (zxc1=0;zxc1<zxca.length;zxc1++){
zxcck=true;
for (zxc2=0;zxc2<zxctemp.length;zxc2++){ if (zxctemp[zxc2]==zxca[zxc1]){ zxcck=false; } }
if (zxcck){ zxctemp[zxctemp.length]=zxca[zxc1]; }
}
return zxctemp;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddChange(zxc){
if (zxc.addChange){ return; }
zxc.addChange=zxcChange;
zxcEventAdd(zxc,'change','addChange');
}


//-->
</script></head>

<body>
<a id="Grp1" >
<select >
<option >Tom</option>
<option >Dick</option>
<option >Harry</option>
<option >Joe</option>
</select> Master Select
<br>
<select>
<option >Tom</option>
<option >Dick</option>
<option >Harry</option>
<option >Joe</option>
</select>
<input type="checkbox" onclick="zxcAsMasterSelect(this,'Grp1',0,1);"> As Master
<br>
<select >
<option >Tom</option>
<option >Dick</option>
<option >Harry</option>
<option >Joe</option>
</select>
<input type="checkbox" onclick="zxcAsMasterSelect(this,'Grp1',1,2);" > As Master
</a>
</body>

</html>

tripwater
12-22-2005, 06:13 PM
Thank you so very much for your reply. This is really cool. I have one more question...your example shows one set of selects in each row. If I was to try this script on my code which has




<select name="mon_from_hour">
<option value="1">1</option>
</select>

<select name="mon_from_min">
<option value="15">15</option>
</select>

<select name="mon_from_meridiem">
<option value="AM">AM</option>
</select>


<select name="mon_to_hour">
<option value="1">1</option>
</select>


<select name="mon_to_min">
<option value="15">15</option>
</select>


<select name="mon_to_meridiem">
<option value="AM">AM</option>
</select>




This is one row. I would like for all of these selects in Monday to be what Tuesday's selects are changed to if the checkbox beside Tuesday is checked. So I am basically dealing with 6 selects for each day.

Thank you again.

vwphillips
12-22-2005, 06:51 PM
the selects can be in any order/position nested in the same parent element but

the call master and slave numbers must be the the selectlist number (0 to n) for the relavent master and slave in the parent element(I wanted to avoid ids and names).

There may be as many sets of slave and master as required.

thats the theory anyway, limited testing as it is a new script.

edit the ckeck box can be positioned anywhere so long as it has the correct master and slave numbers
but I need to think about your application.
Thinks, there can be more than one function call in the checkbox on click event calling a number of slave and master relationships which should meet your requirement

tripwater
12-22-2005, 07:35 PM
Yes, the checkbox beside the row Tuesday, should ONLY change Tuesday's selects to what Monday is set to and Wednesday's checkbox only set Wednesday to Tuesday's settings respectively.

thank you again for your time. I am still a bit confused but I am going to play with your code a bit and see if I can figure it out.

vwphillips
12-22-2005, 07:54 PM
tested this, works as the theory



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// AsMaster Select (21-12-2005) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// A checkbox enables a selectlist duplicating the selected index of a master SelectList

// Application Notes
// The SelectLists and Check boxes must be nested in an element with a unique ID
// The check boxes must have a onclick event zxcAsMasterSelect(this,'Grp1',0,1);"
// Where:
// parameter 0 = the checkbox object (object)
// parameter 1 = the unique ID of the parent element (string)
// parameter 2 = the number (order in the parent element) of the master selectlist (digit 0 to n)
// parameter 3 = the number (order in the parent element) of the slave selectlist (digit 0 to n)

// All function, variable names are prefixed with 'zxc' to minimise conflicts with other JavaScripts

// The functional Code(2k) is best as an external javascript

// Tested with IE6 and Mozilla FireFox


// Functional Code - NO NEED to Change

function zxcAsMasterSelect(zxcobj,zxcpid,zxcmaster,zxcslave){
var zxcpobj=document.getElementById(zxcpid);
zxcpobj.sel=zxcpobj.getElementsByTagName('SELECT');
if (!zxcpobj.sel[zxcmaster].ary){
zxcpobj.sel[zxcmaster].ary=new Array();
}
if (zxcobj.checked){
zxcpobj.sel[zxcmaster].ary.push(zxcpobj.sel[zxcslave]);
zxcpobj.sel[zxcslave].selectedIndex=zxcpobj.sel[zxcmaster].selectedIndex;
zxcpobj.sel[zxcslave].setAttribute('disabled','disabled');
}
else {
zxcpobj.sel[zxcslave].removeAttribute('disabled');
zxcpobj.sel[zxcmaster].ary=zxcpobj.sel[zxcmaster].ary.remove(zxcpobj.sel[zxcmaster].ary,zxcpobj.sel[zxcslave]);
}
zxcpobj.sel[zxcmaster].ary=zxcpobj.sel[zxcmaster].ary.noduplicates(zxcpobj.sel[zxcmaster].ary);
zxcAddChange(zxcpobj.sel[zxcmaster])
}

function zxcChange(){
if (this.ary.length<1){ return; }
for (var zxc0=0;zxc0<this.ary.length;zxc0++){
this.ary[zxc0].selectedIndex=this.selectedIndex;
if (this.ary[zxc0].ary){
if (this.ary[zxc0].ary.length>0){
for (var zxc1=0;zxc1<this.ary[zxc0].ary.length;zxc1++){
this.ary[zxc0].ary[zxc1].selectedIndex=this.ary[zxc0].selectedIndex;
}
}
}
}
}


Array.prototype.remove=function(zxcrema,zxcremi){
for (var zxc0=0;zxc0<zxcrema.length;zxc0++){
if (zxcrema[zxc0]==zxcremi){
zxcrema.splice(zxc0,1);
}
}
return zxcrema;
}

Array.prototype.noduplicates=function(zxca){
if (zxca.length<2){ return zxca; }
zxctemp=[zxca[0]];
for (zxc1=0;zxc1<zxca.length;zxc1++){
zxcck=true;
for (zxc2=0;zxc2<zxctemp.length;zxc2++){ if (zxctemp[zxc2]==zxca[zxc1]){ zxcck=false; } }
if (zxcck){ zxctemp[zxctemp.length]=zxca[zxc1]; }
}
return zxctemp;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddChange(zxc){
if (zxc.addChange){ return; }
zxc.addChange=zxcChange;
zxcEventAdd(zxc,'change','addChange');
}


//-->
</script></head>

<body>
<a id="Grp1" >
<select >
<option >2000</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
</select>0
<select>
<option >Jan</option>
<option >Feb</option>
<option >March</option>
<option >April</option>
</select>1
<select >
<option > 01 </option>
<option > 02 </option>
<option > 03 </option>
<option > 04 </option>
</select>2
<select >
<option >Not Included</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
</select>3
<br>
<br>
<br>
<select >
<option >2000</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
</select>4
<select>
<option >Jan</option>
<option >Feb</option>
<option >March</option>
<option >April</option>
</select>5
<select >
<option > 01 </option>
<option > 02 </option>
<option > 03 </option>
<option > 04 </option>
</select>6
<select >
<option >Not Included</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
</select>7
<input type="checkbox" onclick="zxcAsMasterSelect(this,'Grp1',0,4);zxcAsMasterSelect(this,'Grp1',1,5);zxcAsMasterSelect(this,'Grp1', 2,6);" >
</a>
</body>

</html>

tripwater
02-16-2006, 06:22 PM
I see that this works perfectly!!!! But I do have one question though, The "a" tag that you have with the id="Grp1" is around the two sets of droplists. I understand that this groups them together. My question is now since I have 7 days in a week, if I group Mon and tuesday with this tag and label it as Grp1, can I then start another group inside this in order to group Tuesday with wednesday and so on?

In other words, each line needs to group with the one below it so every day after Monday will technically grouped with the one before it and the one after it...does this make sense? If so, how will this work with more Than 2 rows? Say, with four?


Below is an example of what I am talking about



<a id="Grp1" >
<select >
<option >2000</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
</select>0
<select>
<option >Jan</option>
<option >Feb</option>
<option >March</option>
<option >April</option>
</select>1
<select >
<option > 01 </option>
<option > 02 </option>
<option > 03 </option>
<option > 04 </option>
</select>2
<select >
<option >Not Included</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
</select>3
<br>
<br>
<br>
//this now needs to not only be grouped with the above row but the one
//below it as well. Because if I check the box to the row below this one, it
//needs to set that row to the values of this one and so on.

<a id="Grp2">//beginning of group two
<select >
<option >2000</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
</select>4
<select>
<option >Jan</option>
<option >Feb</option>
<option >March</option>
<option >April</option>
</select>5
<select >
<option > 01 </option>
<option > 02 </option>
<option > 03 </option>
<option > 04 </option>
</select>6
<select >
<option >Not Included</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
</select>7
<input type="checkbox" onclick="zxcAsMasterSelect(this,'Grp1',0,4);zxcAsMasterSelect(this,'Grp1',1,5);zxcAsMasterSelect(this,'Grp1', 2,6);" >
</a>//end of group 1

<br>
<br>
<br>
<select >
<option >2000</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
</select>4
<select>
<option >Jan</option>
<option >Feb</option>
<option >March</option>
<option >April</option>
</select>5
<select >
<option > 01 </option>
<option > 02 </option>
<option > 03 </option>
<option > 04 </option>
</select>6
<select >
<option >Not Included</option>
<option >2001</option>
<option >2002</option>
<option >2003</option>
</select>7
<input type="checkbox" onclick="zxcAsMasterSelect(this,'Grp2',0,4);zxcAsMasterSelect(this,'Grp2',1,5);zxcAsMasterSelect(this,'Grp1', 2,6);" >
</a>//end of group two


I know the above is incorrect but I hope it shows what I am talking about. Once we leave the first row of dates(Monday), every row(except the last...Sunday) will need to be associated with not only the row above it but the one below it. I do not mean to confuse...what you have is EXACTLY what I need. I need the checkbox to set the current list to the values of the one above it, only I do not see how to do it with more than two rows...since they are grouped together.

THank you again for your help. THis is very close to what I need. I just tried grouping with more than two and could not get it to work is why I ask.

tripwater
02-20-2006, 04:49 PM
Any ideas? Thanks

vwphillips
02-21-2006, 08:56 AM
just noticed this on

so bumped so not to loose

tripwater
02-21-2006, 08:48 PM
I'm sorry, what? Did you mean to put a URL in the above post?

Did you understand my question with applying your code to what I need? Incorporating more than one grouping with each line...

thanks again

vwphillips
02-21-2006, 09:56 PM
still busy

but will look at tomorrow hopefully

tripwater
02-21-2006, 09:58 PM
oh, ok, now your other post makes sense...sorry. It confused me for a sec.

Thanks for your time. No problem. I will check back tomorrow

vwphillips
02-22-2006, 08:22 PM
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
// AsMaster Select Columns (22-Feb-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// <input type="checkbox" name="" onclick="zxcAsMasterSelCol(this,'fred',3,0,[1,2],[1,2]);">Rows 1 & 2 As Row 0 for columns 1 and 2
// where
// parameter 0 = the checkbox object (object)
// parameter 1 = the ID name of the parent object (string)
// parameter 3 = the number of columns (digits)
// parameter 4 = master row (counting rows and columns from 0) (digits)
// parameter 5 = an array each field the number of the slave row (digits)
// parameter 6 = an array each field the number of the slave column (digits)

// Syncronising changes when slave is disabled
// Add the onchange event call
// <select onchange="zxcSync(this);">
// to the selectlists

// Functional Code - NO NEED to Change

function zxcAsMasterSelCol(zxcobj,zxcid,zxcnu,zxcmrow,zxcsrow,zxcscol){
var zxcpar=document.getElementById(zxcid);
var zxcsel=zxcpar.getElementsByTagName('SELECT');
if (!zxcpar.selary){
zxcpar.selary=[];
for (var zxc0=0;zxc0<zxcsel.length;zxc0++){
zxcpar.selary[zxc0]=zxcsel[zxc0];
zxcsel[zxc0].col=zxc0%zxcnu;
zxcsel[zxc0].row=parseInt(zxc0/zxcnu);
zxcsel[zxc0].sary=[];
}
}
// find the master row selects
var zxcmrowary=[];
for (var zxc1=0;zxc1<zxcpar.selary.length;zxc1++){
if (zxcpar.selary[zxc1].row==zxcmrow){
zxcmrowary.push(zxcpar.selary[zxc1]);
}
}
// find the slave row selects
var zxcsrowary=[];
for (var zxc2=0;zxc2<zxcsrow.length;zxc2++){
for (var zxc3=0;zxc3<zxcpar.selary.length;zxc3++){
if (zxcpar.selary[zxc3].row==zxcsrow[zxc2]&&zxcsrow[zxc2]!=zxcmrow){
zxcsrowary.push(zxcpar.selary[zxc3]);
}
}
}
// match specified rows and columns
if (zxcobj.checked){
for (var zxc4=0;zxc4<zxcscol.length;zxc4++){
for (var zxc5=0;zxc5<zxcsrowary.length;zxc5++){
if (zxcsrowary[zxc5].col==zxcscol[zxc4]){
zxcsrowary[zxc5].selectedIndex=zxcmrowary[zxcsrowary[zxc5].col].selectedIndex;
zxcsrowary[zxc5].setAttribute('disabled','disabled');
zxcmrowary[zxcsrowary[zxc5].col].sary.push(zxcsrowary[zxc5]);
}
}
}
}
else {
for (var zxc4=0;zxc4<zxcscol.length;zxc4++){
for (var zxc5=0;zxc5<zxcsrowary.length;zxc5++){
if (zxcsrowary[zxc5].col==zxcscol[zxc4]){
zxcsrowary[zxc5].removeAttribute('disabled');
zxcmrowary[zxcsrowary[zxc5].col].sary=zxcmrowary[zxcsrowary[zxc5].col].sary.remove(zxcsrowary[zxc5]);
}
}
}
}
}

function zxcSync(zxcobj){
if (!zxcobj.sary){ return; }
for (zxc0=0;zxc0<zxcobj.sary.length;zxc0++){
if (zxcobj.sary[zxc0].col==zxcobj.col){
zxcobj.sary[zxc0].selectedIndex=zxcobj.selectedIndex;
}
}
}

Array.prototype.remove=function(zxcremi){
for (this.i=0;this.i<this.length;this.i++){
if (this[this.i]==zxcremi){
this.splice(this.i,1);
}
}
return this;
}


//-->
</script>
</head>
<body>
<a id="fred" >
<select onchange="zxcSync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<select onchange="zxcSync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<select>
<option >Select</option>
<option >Option 1</option>
</select>
<br>
<select >
<option >Select</option>
<option >Option 1</option>
</select>
<select >
<option >Select</option>
<option >Option 1</option>
</select>
<select >
<option >Select</option>
<option >Option 1</option>
</select>
<input type="checkbox" name="" onclick="zxcAsMasterSelCol(this,'fred',3,0,[1,2],[1,2]);">Rows 1 & 2 As Row 0 for columns 1 and 2
<br>
<select >
<option >Select</option>
<option >Option 1</option>
</select>
<select >
<option >Select</option>
<option >Option 1</option>
</select>
<select >
<option >Select</option>
<option >Option 1</option>
<input type="checkbox" name="" onclick="zxcAsMasterSelCol(this,'fred',3,1,[2],[0]);">Rows 2 As Row 1 for column 0
</select>
<br>
</a>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
</form>
</body>
</html>

tripwater
02-22-2006, 08:48 PM
Thank you for your time. I am sorry this is sucha pain but it does not seem to be doing what I am asking. Your last example was perfect except I just needed it to be able to add another row and it only be set to the row above it.

The code you just posted, I tested in Firefox and it only had one checkbox by the second row and it set both rows (2 & 3) to row 1.

Then I tested it in IE and a second checkbox showed up on the 3rd row that was not in Firefox. When I checked the box in row 2 it only set the last 2 selects = to what was set in the top row ( I only need it to set the row just below it, not more than one). And the 3rd row box only sets the first select = tot he one above it.

I guess I am confusing you in what I need.

I will try one more time.

Row A has three selects.
Row B has three selects.
Row C has three selects.
Row D has three selects.
Row E has three selects.
Row F has three selects.
Row G has three selects.

If you set the 3 selects in Row A and then check the box beside row B, it will set all of B's select to the same as row A. Then if you check the box beside row C, it will set all 3 selects to the same as row B. D could be set to C's settings, E could be set to D's settings and so on.

Now it is not necessary to select or set them in order. FOr example, say you set row A's selects, then set Row B's selects to something different but want row C's selects to be the same as B's (the row above it) you then check the box beside row C and it sets all 3 selects to the same as the row above it (row B).

I hope this helps. I think I confused you when I mentioned "grouping" them. I only mentioned it because I saw the you were grouping the rows with IDs. In which case if rows A & B were grouped together by ID, I would also need rows B & C grouped as well because Row C would need to be able to be set to Row B's settings.

I hope this clears things up a bit. Thank you very much again for your time.

tripwater
02-22-2006, 08:49 PM
Browser refreshed and double posted***EDITED***

vwphillips
02-23-2006, 10:36 PM
I do not think that you appreciate the flexibility of the script

read the application notes again, any select in a colum can be a slave to any other column in any other row

I have arraged the HTML to make each column in rows 1 &2 slaves of the row above


<a id="fred" >
<select onchange="zxcSync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<select onchange="zxcSync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<select onchange="zxcSync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<br>
<select onchange="zxcSync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<select onchange="zxcSync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<select onchange="zxcSync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<input type="checkbox" name="" onclick="zxcAsMasterSelCol(this,'fred',3,0,[1],[0,1,2]);">Row 1 As Row 0 for columns 1,2 and 3
<br>
<select >
<option >Select</option>
<option >Option 1</option>
</select>
<select >
<option >Select</option>
<option >Option 1</option>
</select>
<select>
<option >Select</option>
<option >Option 1</option>
<input type="checkbox" name="" onclick="zxcAsMasterSelCol(this,'fred',3,1,[2],[0,1,2]);">Row 2 As Row 1 for columns 1,2 and 3
</select>
<br>
</a>

tripwater
02-23-2006, 10:59 PM
I will study it in more depth tonight. I just tested it is all. I am not a guru of Javascript so I get confused easily. But I will do my best.

thanks

vwphillips
02-23-2006, 11:08 PM
These additional application notes may help


// AsMaster Select Columns (22-Feb-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Multiple SelectLists with a common parent node are partitioned as groups(rows)
// The number of SelectLists in each row is specifed in the event call to activate the script.
// Each SelectList in the row is considered as a column.
// Any SelectList in a column can be a slave to any other column in any other row

// Application Notes

// The script would normally be activated by an onclick event call of a checkbox.
// <input type="checkbox" name="" onclick="f49AsMasterSelCol(this,'fred',3,0,[1,2],[1,2]);">Rows 1 & 2 As Row 0 for columns 1 and 2
// where
// parameter 0 = the checkbox object (object)
// parameter 1 = the ID name of the parent object (string)
// parameter 3 = the number of columns (digits)
// parameter 4 = master row (counting rows and columns from 0) (digits)
// parameter 5 = an array each field the number of the slave row (digits)
// parameter 6 = an array each field the number of the slave column (digits)

// Syncronising changes to reflect the masted when slave is disabled
// Add the onchange event call
// <select onchange="f49Sync(this);">
// to the master SelectList.

// All function, variable names are prefixed with 'f49' to minimise conflicts with other JavaScripts

// The functional Code(2k) is best as an external javascript

// Tested with IE6 and Mozilla FireFox

tripwater
02-24-2006, 04:09 PM
Ok, I studied it and you are right. This is exactly what I need and then some!!! Thank you again for your time. I apologize again for just testing the code and not analyzing it. Once I realized that the functions were "As is" and I only needed to modify the parameters of your function, things became MUCH easier.

Thank you again VW.


I do not have an edit button beside the original post so I will have to place this here... RESOLVED

vwphillips
02-24-2006, 10:30 PM
still playing with this, may be of interest


<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
// AsMaster Select Columns (22-Feb-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Form Elements(INPUT, SELECT & TEXTAREA) with a common parent node are partitioned as groups(rows)
// The number of Form Elements in each row is specifed in the event call to activate the script.
// Each Form Element in the row is considered as a column.
// All Elements in a column must be of the same type.
// Any Element in a column can be a slave to the same column in any other row.

// Application Notes

// The script would normally be activated by an onclick event call of a checkbox.
// <input type="checkbox" name="" onclick="f49AsMasterSelCol(this,'fred',3,0,[1,2],[1,2]);">Rows 1 & 2 As Row 0 for columns 1 and 2
// where
// parameter 0 = the checkbox object (object)
// parameter 1 = the ID name of the parent object (string)
// parameter 3 = the number of columns (digits)
// parameter 4 = master row (counting rows and columns from 0) (digits)
// parameter 5 = an array each field the number of the slave row (digits)
// parameter 6 = an array each field the number of the slave column (digits)

// Syncronising changes to reflect the masted when slave is disabled
// Add the event call to the master element tags
// for INPUT type text - onblur="f49Sync(this);
// for INPUT type radio - onclick="f49Sync(this);
// for INPUT type checkbox - onclick="f49Sync(this);
// for TEXTAREA - onblur="f49Sync(this);
// for SelectLists - onchange="f49Sync(this);

// All function, variable names are prefixed with 'f49' to minimise conflicts with other JavaScripts

// The functional Code(2k) is best as an external javascript

// Tested with IE6 and Mozilla FireFox


// Functional Code - NO NEED to Change

var zxcEleAry=['INPUT','SELECT','TEXTAREA']


function f49AsMasterSelCol(f49obj,f49id,f49nu,f49mrow,f49srow,f49scol){
var f49par=document.getElementById(f49id);
var f49sel=zxcFindEles(f49par);
if (!f49par.selary){
f49par.selary=[];
for (var f490=0;f490<f49sel.length;f490++){
f49par.selary[f490]=f49sel[f490][0];
f49sel[f490][0].col=f490%(f49nu+1);
f49sel[f490][0].row=parseInt(f490/(f49nu+1));
f49sel[f490][0].sary=[];
}
}
// find the master row selects
var f49mrowary=[];
for (var f491=0;f491<f49par.selary.length;f491++){
if (f49par.selary[f491].row==f49mrow){
for (var f491a=0;f491a<f49scol.length;f491a++){
if (f49par.selary[f491].col==f49scol[f491a]){
f49mrowary.push(f49par.selary[f491]);
}
}
}
}
// find the slave row selects
var f49srowary=[];
for (var f492=0;f492<f49srow.length;f492++){
for (var f493=0;f493<f49par.selary.length;f493++){
if (f49par.selary[f493].row==f49srow[f492]&&f49srow[f492]!=f49mrow){
for (var f493a=0;f493a<f49scol.length;f493a++){
if (f49par.selary[f493].col==f49scol[f493a]){
f49srowary.push(f49par.selary[f493]);
}
}
}
}
}
// match specified rows and columns
for (var f495a=0;f495a<f49mrowary.length;f495a++){
if (f49obj.checked){
for (var f495=0;f495<f49srowary.length;f495++){
if (f49srowary[f495].col==f49mrowary[f495a].col){
if (f49srowary[f495].type=='text'||f49srowary[f495].tagName=='TEXTAREA'){
f49srowary[f495].value=f49mrowary[f495a].value;
}
if (f49srowary[f495].type=='checkbox'||f49srowary[f495].type=='radio'){
f49srowary[f495].checked=f49mrowary[f495a].checked;
}
if (f49srowary[f495].tagName=='SELECT'){
f49srowary[f495].selectedIndex=f49mrowary[f495a].selectedIndex;
}
f49srowary[f495].setAttribute('disabled','disabled');
f49mrowary[f495a].sary.push(f49srowary[f495]);
}
}
}
else {
for (var f495=0;f495<f49srowary.length;f495++){
if (f49srowary[f495].col==f49mrowary[f495a].col){
f49srowary[f495].removeAttribute('disabled');
f49mrowary[f495a].sary=f49mrowary[f495a].sary.remove(f49srowary[f495]);
}
}
}
}
}

function f49Sync(f49obj){
if (!f49obj.sary){ return; }
for (f490=0;f490<f49obj.sary.length;f490++){
if (f49obj.sary[f490].col==f49obj.col){
if (f49obj.sary[f490].type=='text'||f49obj.sary[f490].tagName=='TEXTAREA'){
f49obj.sary[f490].value=f49obj.value;
}
if (f49obj.sary[f490].type=='checkbox'||f49obj.sary[f490].type=='radio'){
f49obj.sary[f490].checked=f49obj.checked;
}
if (f49obj.sary[f490].tagName=='SELECT'){
f49obj.sary[f490].selectedIndex=f49obj.selectedIndex;
}
}
}
}

function zxcFindEles(zxcobj){
var zxcary=[];
var zxccn=zxcobj.getElementsByTagName('*')||zxcobj.all;
for (var zxc0=0;zxc0<zxccn.length;zxc0++){
for (var zxc1=0;zxc1<zxcEleAry.length;zxc1++){
if (zxccn[zxc0].tagName==zxcEleAry[zxc1]){
zxcary.push([zxccn[zxc0],zxc0]);
}
}
}
zxcary=zxcary.sort(zxcSortNumeric);
return zxcary;
}

function zxcSortNumeric(zxca,zxcb){
var zxcA=zxca[1];
var zxcB=zxcb[1];
return zxcA-zxcB;
}

Array.prototype.remove=function(f49remi){
for (this.i=0;this.i<this.length;this.i++){
if (this[this.i]==f49remi){
this.splice(this.i,1);
}
}
return this;
}


//-->
</script>
</head>
<body>
<a id="fred" >
<textarea rows="2" cols="20" onblur="f49Sync(this);" ></textarea>
<input type="text" onblur="f49Sync(this);">
<input type="checkbox" name="" onclick="f49Sync(this);" >
<input type="radio" name="r0" onclick="f49Sync(this);" >
<input type="radio" name="r0" onclick="f49Sync(this);" >
<select onchange="f49Sync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<input type="checkbox" name="" >

<br>

<textarea rows="2" cols="20" onblur="f49Sync(this);" ></textarea>
<input type="text" onblur="f49Sync(this);" >
<input type="checkbox" name="" onclick="f49Sync(this);" >
<input type="radio" name="r1" onclick="f49Sync(this);" >
<input type="radio" name="r1" onclick="f49Sync(this);" >
<select onchange="f49Sync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<input type="checkbox" name="" onclick="f49AsMasterSelCol(this,'fred',6,0,[1,2],[0,1,2,3,4,5]);">Row 1 & 2 As Row 0 for all columns

<br>

<textarea rows="2" cols="20" onblur="f49Sync(this);" ></textarea>
<input type="text" onblur="f49Sync(this);" >
<input type="checkbox" name="" onclick="f49Sync(this);" >
<input type="radio" name="r2" onclick="f49Sync(this);" >
<input type="radio" name="r2" onclick="f49Sync(this);" >
<select onchange="f49Sync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<input type="checkbox" name="" onclick="f49AsMasterSelCol(this,'fred',6,1,[2],[0]);">Row 2 As Row 1 for columns 2
<br>

<textarea rows="2" cols="20" onblur="f49Sync(this);" ></textarea>
<input type="text" onblur="f49Sync(this);" >
<input type="checkbox" name="" onclick="f49Sync(this);" >
<input type="radio" name="r2" onclick="f49Sync(this);" >
<input type="radio" name="r2" onclick="f49Sync(this);" >
<select onchange="f49Sync(this);">
<option >Select</option>
<option >Option 1</option>
</select>
<input type="checkbox" name="" onclick="f49AsMasterSelCol(this,'fred',6,1,[3],[0]);">Row 3 column 0 As Row 1 for column 0
<br>
</a>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
<input size=50 name=Show1 >
<input size=50 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
</form>
</body>
</html>

tripwater
02-24-2006, 11:57 PM
This is very cool! I will be able to use this for sure. Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum