PDA

View Full Version : Autoload todays date

Gary Williams
07-17-2003, 10:51 PM
Hi All,

On a form, I have 3 combo boxes. One for day, one for month and the third one for the year.

How do I use the get.date function to automatically set the 3 combo boxes to todays date when the page initially loads?

Cheers

Gary
scroots
07-17-2003, 11:25 PM
could you post the code of your select boxes.

scroots
glenngv
07-18-2003, 06:15 AM
Without seeing the actual content of the combo boxes, I guess this could be the code you needed.
Just change appropriate names for those text in italics.


function setCurrentDate(){
var today = new Date();
var d = today.getDate();
var m = today.getMonth()+1;
var y = today.getFullYear();
var dCombo = document.nameOfForm.nameOfDayCombo;
var mCombo = document.nameOfForm.nameOfMonthCombo;
var yCombo = document.nameOfForm.nameOfYearCombo;
setCombo(dCombo,d);
setCombo(mCombo,m);
setCombo(yCombo,y);
}

function setCombo(combo,item){
for (var i=0;i<combo.options.length;i++){
if (item==parseInt(combo.options[i].text,10)){
combo.selectedIndex = i;
break;
}
}
}


....

<body onload="setCurrentDate()">
Gary Williams
07-18-2003, 07:47 AM
Hi Glenn and Scroots,

Having thought about the problem again last night, I managed to come up with this solution:

=========================

<html>
<head>

<script type="text/javascript">

function loaddate(){

var d=new Date()
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

document.formname.day.value=d.getDate();
document.formname.month.value=monthname[d.getMonth()];
document.formname.year.value=d.getYear();

}

</script>
</head>

<body onload="loaddate();">

<FORM name="formname">

<SELECT NAME="day">
<OPTION VALUE="01">1st</OPTION>
<OPTION VALUE="02">2nd</OPTION>
<OPTION VALUE="03">3rd</OPTION>
<OPTION VALUE="04">4th</OPTION>
<OPTION VALUE="05">5th</OPTION>
<OPTION VALUE="06">6th</OPTION>
<OPTION VALUE="07">7th</OPTION>
<OPTION VALUE="08">8th</OPTION>
<OPTION VALUE="09">9th</OPTION>
<OPTION VALUE="10">10th</OPTION>
<OPTION VALUE="11">11th</OPTION>
<OPTION VALUE="12">12th</OPTION>
<OPTION VALUE="13">13th</OPTION>
<OPTION VALUE="14">14th</OPTION>
<OPTION VALUE="15">15th</OPTION>
<OPTION VALUE="16">16th</OPTION>
<OPTION VALUE="17">17th</OPTION>
<OPTION VALUE="18">18th</OPTION>
<OPTION VALUE="19">19th</OPTION>
<OPTION VALUE="20">20th</OPTION>
<OPTION VALUE="21">21st</OPTION>
<OPTION VALUE="22">22nd</OPTION>
<OPTION VALUE="23">23rd</OPTION>
<OPTION VALUE="24">24th</OPTION>
<OPTION VALUE="25">25th</OPTION>
<OPTION VALUE="26">26th</OPTION>
<OPTION VALUE="27">27th</OPTION>
<OPTION VALUE="28">28th</OPTION>
<OPTION VALUE="29">29th</OPTION>
<OPTION VALUE="30">30th</OPTION>
<OPTION VALUE="31">31st</OPTION>
</SELECT>

<SELECT NAME="month">
<OPTION VALUE="Jan">January</OPTION>
<OPTION VALUE="Feb">February</OPTION>
<OPTION VALUE="Mar">March</OPTION>
<OPTION VALUE="Apr">April</OPTION>
<OPTION VALUE="May">May</OPTION>
<OPTION VALUE="Jun">June</OPTION>
<OPTION VALUE="Jul">July</OPTION>
<OPTION VALUE="Aug">August</OPTION>
<OPTION VALUE="Sep">September</OPTION>
<OPTION VALUE="Oct">October</OPTION>
<OPTION VALUE="Nov">November</OPTION>
<OPTION VALUE="Dec">December</OPTION>
</SELECT>

<SELECT NAME="year">
<OPTION VALUE="2003">2003</OPTION>
<OPTION VALUE="2004">2004</OPTION>
<OPTION VALUE="2005">2005</OPTION>
<OPTION VALUE="2006">2006</OPTION>
</SELECT>

</form>
</body>
</html>

===============================

It's not as elegant as Glenn's script but does seem to work. Are there any possible failures in this simple solution?

Regards

Gary
glenngv
07-18-2003, 08:36 AM
Yes, run it in non-IE browsers!
You select the items in the combos the wrong way which IE allows. :rolleyes:
The cross-browser way to select item in a combo is:

document.formName.selectName.options[indexToSelect].selected = true;

or

document.formName.selectedIndex = indexToSelect;

In your case, since you don't know the index of the item to select,
you have to loop thru each item and check if it has the same value with what you are looking for before selecting that item.



function setCurrentDate(){
var today = new Date();
var d = today.getDate();
var m = today.getMonth()+1;
var y = today.getFullYear();
var dCombo = document.formname.day;
var mCombo = document.formname.month;
var yCombo = document.formname.year;
setCombo(dCombo,d);
setCombo(mCombo,m);
setCombo(yCombo,y);
}

function setCombo(combo,item){
for (var i=0;i<combo.options.length;i++){
if (item==parseInt(combo.options[i].value,10)){
combo.selectedIndex = i;
break;
}
}
}


Change the values of the months in the month combo box.
why complicate it when you can have the month values in numbers?


<SELECT NAME="month">
<OPTION VALUE="1">January</OPTION>
<OPTION VALUE="2">February</OPTION>
<OPTION VALUE="3">March</OPTION>
<OPTION VALUE="4">April</OPTION>
<OPTION VALUE="5">May</OPTION>
<OPTION VALUE="6">June</OPTION>
<OPTION VALUE="7">July</OPTION>
<OPTION VALUE="8">August</OPTION>
<OPTION VALUE="9">September</OPTION>
<OPTION VALUE="10">October</OPTION>
<OPTION VALUE="11">November</OPTION>
<OPTION VALUE="12">December</OPTION>
</SELECT>
Gary Williams
07-22-2003, 04:22 PM
Hi Glenn,

Thanks for the code, works a treat as usual. I knew I had to be missing something obvious like other browsers!

In the line:

if (item==parseInt(combo.options[i].value,10)){

What is the purpose of the '10'?

Using 'style', I can set the background colour of a combo or text area. What I am trying to achieve is this. If someone select a radio button, I want the backgrounds of a predefined set of text boxes to change so that I can lead someone through the completion of a form in the correct order.

How can you change the style atribute using javascript?

Thanks

Gary
cheesebagpipe
07-22-2003, 09:17 PM
http://www.devguru.com/Technologies/ecmascript/quickref/parseint.html

Very nice 2nd Q. Took a whack at it...

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

<html>
<head>
<title>untitled</title>
<style type="text/css">

td {
font: 200 14px arial;
color: saddlebrown;
text-align: right;
}

input {
background: #c0c0c0;
}

.groupON {
color: darkred;
background: ghostwhite;
}

.groupOFF {
background: #c0c0c0;
}

</style>
<script type="text/javascript" language="javascript">

var fieldgroups = {
'stuff': ['t1' , 't2' , 't7' , 'tb' , 'tf'] ,
'more stuff': ['t3' , 't5' , 't8' , 't9' , 'ta'] ,
'other stuff': ['t4' , 't6' , 'tc' , 'td' , 'te']
}

function setFieldGroup(oRadio) {
var el, i = 0, j = 0, oForm = oRadio.form, grp = fieldgroups[oRadio.value];
while (el = oForm.elements[i++])
if (el.name == grp[j]) {
++j;
el.disabled = false;
el.className = 'groupON';
if (el.value == '')
el.value = j;
}
else if (el.type == 'text') {
el.className = 'groupOFF';
if (/^\d+$/.test(el.value))
el.value = '';
el.disabled = true;
}
oForm.elements[grp[0]].focus();
}

</script>
</head>
<body>
<form>
<table cellspacing="6" border="1" bgcolor="beige">
<tr>
<th><input name="choice" value="stuff" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> stuff</th>
<th><input name="choice" value="more stuff" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> more stuff</th>
<th><input name="choice" value="other stuff" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> other stuff<br /></th>
</tr><tr>
<td>stuff: <input name="t1" type="text" onfocus="this.select()"></td>
<td>stuff: <input name="t2" type="text" onfocus="this.select()"></td>
<td>more stuff: <input name="t3" type="text" onfocus="this.select()"></td>
</tr><tr>
<td>other stuff: <input name="t4" type="text" onfocus="this.select()"></td>
<td>more stuff: <input name="t5" type="text" onfocus="this.select()"></td>
<td>other stuff: <input name="t6" type="text" onfocus="this.select()"></td>
</tr><tr>
<td>stuff: <input name="t7" type="text" onfocus="this.select()"></td>
<td>more stuff: <input name="t8" type="text" onfocus="this.select()"></td>
<td>more stuff: <input name="t9" type="text" onfocus="this.select()"></td>
</tr><tr>
<td>more stuff: <input name="ta" type="text" onfocus="this.select()"></td>
<td>stuff: <input name="tb" type="text" onfocus="this.select()"></td>
<td>other stuff: <input name="tc" type="text" onfocus="this.select()"></td>
</tr><tr>
<td>other stuff: <input name="td" type="text" onfocus="this.select()"></td>
<td>other stuff: <input name="te" type="text" onfocus="this.select()"></td>
<td>stuff: <input name="tf" type="text" onfocus="this.select()"></td>
</tr>
</table>
</form>
</body>
</html>
Gary Williams
07-28-2003, 05:21 PM
Hi CB,

Thanks for the code. Works fine on text boxes and I've been trying to adapt it to work with combo boxes. This is the closest I've got to something that works:

========================

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

<html>
<head>
<title>untitled</title>
<style type="text/css">

.groupON {
color: #000000;
background: #ee0000;
}

.groupOFF {
color: #000000;
background: #00ccff;
}

</style>

<script type="text/javascript" language="javascript">

var fieldgroups = {
'stuff': ['t1'] ,
'more stuff': ['t2'] ,
'other stuff': ['t3']
}

function setFieldGroup(oRadio) {
var el, i = 0, j = 0, oForm = oRadio.form, grp = fieldgroups[oRadio.value];
while (el = oForm.elements[i++])
if (el.name == grp[j]) {
++j;
el.disabled = false;
el.className = 'groupON';
if (el.value == '')
el.value = j;
}
else if (el.type == 'text') {
el.className = 'groupOFF';
if (/^\d+$/.test(el.value))
el.value = '';
el.disabled = true;
}
oForm.elements[grp[0]].focus();
}

</script>
</head>
<body>
<form>
<table cellspacing="6" border="1" bgcolor="beige">
<tr>
<th><input name="choice" value="stuff" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> stuff</th>
<th><input name="choice" value="more stuff" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> more stuff</th>
<th><input name="choice" value="other stuff" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> other stuff<br /></th>
</tr>
<tr>
<td>stuff: <SELECT NAME="t1" onfocus="this.select()">
<OPTION VALUE="00000000000">000000000</OPTION>
<OPTION VALUE="11111111111">111111111</OPTION>
<OPTION VALUE="22222222222">222222222</OPTION>
<OPTION VALUE="33333333333">333333333</OPTION>
</SELECT>
</td>
<td>other stuff: <SELECT NAME="t2" onfocus="this.select()">
<OPTION VALUE="aaaaaaaaaa">aaaaaaaa</OPTION>
<OPTION VALUE="bbbbbbbbbb">bbbbbbbb</OPTION>
<OPTION VALUE="ccccccccccc">cccccccccc</OPTION>
<OPTION VALUE="dddddddddd">ddddddddd</OPTION>
</SELECT>
</td>
<td>more stuff: <SELECT NAME="t3" onfocus="this.select()">
<OPTION VALUE="xxxxxxxxxxxxx">xxxxxxxxxx</OPTION>
<OPTION VALUE="yyyyyyyyyyy">yyyyyyyyy</OPTION>
<OPTION VALUE="zzzzzzzzzzzzz">zzzzzzzzzz</OPTION>
</SELECT>
</td>
</tr>
</table>
</form>
</body>
</html>

===========================

There is an error regarding onFocus but this is valid for combo boxes. Where have I gone wrong?

Regards

Gary
cheesebagpipe
07-28-2003, 05:55 PM
Hey, that's pretty clever. Couldn't figure out what you meant by 'adapting' it. Cute.

No select() method for - erm - selects. Doesn't make much sense, functionally speaking. I'll see if I can take a better look later, but here:

function setFieldGroup(oRadio) {
var el, i = 0, j = 0, oForm = oRadio.form, grp = fieldgroups[oRadio.value];
while (el = oForm.elements[i++])
if (el.name == grp[j]) {
++j;
el.disabled = false;
el.className = 'groupON';
}
else if (el.type == 'select-one') {
el.className = 'groupOFF';
el.disabled = true;
}
oForm.elements[grp[0]].focus();
}
Gary Williams
07-29-2003, 12:01 AM
Hi CB,

You've done it again - it works!

Here's what I was trying to achieve:

=========================

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

<html>
<head>
<title>untitled</title>
<style type="text/css">

.groupON {
color: #000000;
background: #ee0000;
}

.groupOFF {
color: #000000;
background: #ffffff;
}

</style>

<script type="text/javascript" language="javascript">

var fieldgroups = {
'Select Combo #1': ['t1'] ,
'Select Combo #2': ['t2'] ,
'Select Combo #3': ['t3']
}

function setFieldGroup(oRadio) {
var el, i = 0, j = 0, oForm = oRadio.form, grp = fieldgroups[oRadio.value];
while (el = oForm.elements[i++])
if (el.name == grp[j]) {
++j;
el.disabled = false;
el.className = 'groupON';
}
else if (el.type == 'select-one') {
el.className = 'groupOFF';
el.disabled = true;
}
oForm.elements[grp[0]].focus();
}

</script>
</head>
<body>
<form>
<table cellspacing="6" border="1" bgcolor="beige">
<tr>
<th><input name="choice" value="Select Combo #1" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> Select Combo #1</th>
<th><input name="choice" value="Select Combo #2" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> Select Combo #2</th>
<th><input name="choice" value="Select Combo #3" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> Select Combo #3<br /></th>
</tr>
<tr>
<td>Combo #1:<SELECT NAME="t1">
<OPTION VALUE="0">000000000</OPTION>
<OPTION VALUE="1">111111111</OPTION>
<OPTION VALUE="2">222222222</OPTION>
<OPTION VALUE="3">333333333</OPTION>
</SELECT>
</td>
<td>Combo #2:<SELECT NAME="t2">
<OPTION VALUE="a">aaaaaaaa</OPTION>
<OPTION VALUE="b">bbbbbbbb</OPTION>
<OPTION VALUE="c">cccccccccc</OPTION>
<OPTION VALUE="d">ddddddddd</OPTION>
</SELECT>
</td>
<td>Combo #3:<SELECT NAME="t3">
<OPTION VALUE="x">xxxxxxxxxx</OPTION>
<OPTION VALUE="y">yyyyyyyyy</OPTION>
<OPTION VALUE="z">zzzzzzzzzz</OPTION>
</SELECT>
</td>
</tr>
</table>
</form>
</body>
</html>
=======================

One day, you will have to explain to me how this code works. Line by line.

Many thanks

Gary
Gary Williams
07-31-2003, 08:47 AM
Hi CB,

When grouping form elements (so that I can change their background colours) I need to group selects, text boxes and text areas.

I have extended the script you wrote as shown, and this example file works.

There are two issues I cannot resolve.

1. I'm sure the way I have used the 3 lots of else if statements is poor programming practice but I don't know how to 'combine' them.

2. When I cut and paste this code into my actual form this is to be used in, along with the other form elements, the textbox and textarea backgrounds do not change. Also, the select box backgrounds change OK but do not revert to blue when another group is selected.

I know this is most probable anu issue with my main form but, as usual, any advice much appreciated.

Regards

Gary

===========================

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

<html>
<head>
<title>Form Element Background Selection</title>

<STYLE TYPE="text/css">

select {background-color: #00ccff;}
textarea {background-color: #00ccff;}
.blue {background-color: #00ccff;}

.groupON {
color: #000000;
background: #00cccc;
}

.groupOFF {
color: #000000;
background: #00ccff;
}

</style>

<script type="text/javascript" language="javascript">

var fieldgroups = {
'Select Combo #1': ['t1','t4','t7'] ,
'Select Combo #2': ['t2','t5','t8'] ,
'Select Combo #3': ['t3','t6','t9']
}

function setFieldGroup(oRadio) {
var el, i = 0, j = 0, oForm = oRadio.form, grp = fieldgroups[oRadio.value];
while (el = oForm.elements[i++])
if (el.name == grp[j]) {
++j;
el.disabled = false;
el.className = 'groupON';
}
else if (el.type == 'select-one') {
el.className = 'groupOFF';
el.disabled = true;
}
else if (el.type == 'text') {
el.className = 'groupOFF';
if (/^\d+$/.test(el.value))
el.value = '';
el.disabled = true;
}
else if (el.type == 'textarea') {
el.className = 'groupOFF';
if (/^\d+$/.test(el.value))
el.value = '';
el.disabled = true;
}
oForm.elements[grp[0]].focus();
}

</script>
</head>
<body>
<form>
<table cellspacing="6" border="1" bgcolor="beige">
<tr>
<th><input name="choice" value="Select Combo #1" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> Select Combo #1</th>
<th><input name="choice" value="Select Combo #2" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> Select Combo #2</th>
<th><input name="choice" value="Select Combo #3" type="radio" style="background:beige;"
onclick="setFieldGroup(this)"> Select Combo #3<br /></th>
</tr>
<tr>
<td>Combo #1:<SELECT NAME="t1">
<OPTION VALUE="0">----0----</OPTION>
<OPTION VALUE="1">----1----</OPTION>
<OPTION VALUE="2">----2----</OPTION>
</SELECT>
</td>
<td>Combo #2:<SELECT NAME="t2">
<OPTION VALUE="a">----a----</OPTION>
<OPTION VALUE="b">----b----</OPTION>
<OPTION VALUE="c">----c----</OPTION>
</SELECT>
</td>
<td>Combo #3:<SELECT NAME="t3">
<OPTION VALUE="x">----x----</OPTION>
<OPTION VALUE="y">----y----</OPTION>
<OPTION VALUE="z">----z----</OPTION>
</SELECT>
</td>
</tr>

<tr>
<td>Text Box #1: <input class=blue name="t4" type="text"></td>
<td>Text Box #2: <input class=blue name="t5" type="text"></td>
<td>Text Box #3: <input class=blue name="t6" type="text"></td>
</tr>

<tr>
<td>Text Area #1: <textarea name="t7" rows="5"></textarea></td>
<td>Text Area #2: <textarea name="t8" rows="5"></textarea></td>
<td>Text Area #3: <textarea name="t9" rows="5"></textarea></td>
</tr>


</table>
</form>
</body>
</html>
========================================
glenngv
07-31-2003, 09:43 AM
if (el.name == grp[j]) {
++j;
el.disabled = false;
el.className = 'groupON';
}
else {
switch (el.type){
case 'select-one':
//code here
break;
case 'text':
//code here
break;
case 'textarea':
//code here
break;
}
}
Gary Williams
07-31-2003, 11:14 AM
Thanks Glenn, now I understand the www.w3schools.com example on use of switch statements

Regards

Gary
cheesebagpipe
07-31-2003, 07:11 PM
hi Gary...

Took another whack at this; looks better.

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

<html>
<head>
<title>Form Element Background Selection</title>
<style type="text/css">

td {background: #ccf0ff;}
form {font: 200 12px "comic sans ms";}

.activeEl {/* active */
border-color: #aaaaaa #666666 #666666 #aaaaaa;
border-width: 2px 1px 1px 2px;
border-style: solid;
background: #f8f8ff;
}

.defaultEl { /* default */
border-color: #666666 #aaaaaa #aaaaaa #666666;
border-width: 2px 1px 1px 2px;
border-style: solid;
background: #e0e0e0;
}

.static { /* unaffected */
border-color: #666666 #aaaaaa #aaaaaa #666666;
border-width: 2px 1px 1px 2px;
border-style: solid;
background: #f8f8ff;
}

</style>
<script type="text/javascript" language="javascript">

Array.prototype.isInArray = function(val) {
var len = this.length, i = 0;
for (i; i < len; ++i)
if (this[i] == val)
return true;
return false;
}

var toggle_fields = {
'Select Combo #1': ['ta1','s1','r1','cb1'] ,
'Select Combo #2': ['ta2','t2','s2','r2','cb2'] ,
'Select Combo #3': ['ta3','t3','s3','r3','cb3']
}

var defaultCSSclass = 'defaultEl';
var activeCSSclass = 'activeEl';

function Qfields(oRadio) {
var el, i = 0, bWhich, focus_el, oForm = oRadio.form, grp = toggle_fields[oRadio.value];
while (el = oForm.elements[i++])
if (el.name != oRadio.name && el.className != 'static') {
bWhich = (grp.isInArray(el.name));
el.disabled = !bWhich;
el.className = (bWhich) ? activeCSSclass : defaultCSSclass;
if (!focus_el && bWhich) focus_el = el;
}
if (focus_el && focus_el.focus) focus_el.focus();
}

</script>
</head>
<body>
<form>
<table cellspacing="2" cellpadding="4" border="1" bgcolor="navy">
<tr>
<td><input name="choice" value="Select Combo #1" type="radio" onclick="Qfields(this)"> #1 fields</td>
<td><input name="choice" value="Select Combo #2" type="radio" onclick="Qfields(this)"> #2 fields</td>
<td><input name="choice" value="Select Combo #3" type="radio" onclick="Qfields(this)"> #3 fields</td>
</tr>
<tr>
<td colspan="3">
<input name="cb2" type="checkbox" class="defaultEl"> cb2 <input name="cb2" type="checkbox" class="defaultEl"> cb2
Text Area #3: <textarea class="defaultEl" name="ta3" rows="5" cols="24"></textarea>
Combo #3:<SELECT NAME="s3" class="defaultEl">
<OPTION VALUE="0">----0----</OPTION>
<OPTION VALUE="1">----1----</OPTION>
<OPTION VALUE="2">----2----</OPTION>
</SELECT>
Text Box #1: <input class="static" name="t1" type="text" value="class='static'">
<input name="r1" type="radio" class="defaultEl"> r1 <input name="r1" type="radio" class="defaultEl"> r1
</td>
</tr><tr>
<td colspan="3">
Combo #2:<SELECT NAME="t2" class="defaultEl">
<OPTION VALUE="a">----a----</OPTION>
<OPTION VALUE="b">----b----</OPTION>
<OPTION VALUE="c">----c----</OPTION>
</SELECT>
Text Box #3: <input class="defaultEl" name="t3" type="text">
<input name="r3" type="radio" class="defaultEl"> r3 <input name="r3" type="radio" class="defaultEl"> r3
Text Area #1: <textarea class="defaultEl" name="ta1" rows="5" cols="24"></textarea>
</td>
</tr><tr>
<td colspan="3">
<input name="r2" type="radio" class="defaultEl"> r2 <input name="r2" type="radio" class="defaultEl"> r2
Combo #1:<SELECT NAME="s1" class="defaultEl">
<OPTION VALUE="x">----x----</OPTION>
<OPTION VALUE="y">----y----</OPTION>
<OPTION VALUE="z">----z----</OPTION>
</SELECT>
Text Area #2: <textarea class="defaultEl" name="ta2" rows="5" cols="24"></textarea>
Text Box #2: <input class="defaultEl" name="t2" type="text">
<input name="cb1" type="checkbox" class="defaultEl"> cb1 <input name="cb3" type="checkbox" class="defaultEl"> cb3
</td></tr>
</table>
</form>
</body>
</html>
cheesebagpipe
08-01-2003, 04:32 AM
I need a vacation...

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

<html>
<head>
<title>Form Element Background Selection</title>
<style type="text/css">

td {background: wheat;}
td#c1 {font-weight:600;background:thistle;}
td#c2 {font-weight:600;background:mediumaquamarine;}
td#c3 {font-weight:600;background:lightskyblue;}
form {font: 200 11px "comic sans ms";}

.activeEl {/* active */
border-color: #aaaaaa #666666 #666666 #aaaaaa;
border-width: 2px 1px 1px 2px;
border-style: solid;
background: #f8f8ff;
}

.defaultEl { /* default */
border-color: #666666 #aaaaaa #aaaaaa #666666;
border-width: 2px 1px 1px 2px;
border-style: solid;
background: #e0e0e0;
}

.required { /* unaffected */
border-color: #666666 #aaaaaa #aaaaaa #666666;
border-width: 2px 1px 1px 2px;
border-style: solid;
background: #f8f8ff;
}

</style>
<script type="text/javascript" language="javascript">

Array.prototype.isInArray = function(val) {
var len = this.length, i = 0;
for (i; i < len; ++i)
if (this[i] == val)
return true;
return false;
}

var QfieldGrps = new Object(); //['hilite color' , affected element names....]
QfieldGrps['Select Combo #1'] = ['thistle' , 'ta1','s1','r1','cb1'];
QfieldGrps['Select Combo #2'] = ['mediumaquamarine' , 'ta2','t2','s2','r2','cb2'];
QfieldGrps['Select Combo #3'] = ['lightskyblue' , 'ta3','t3','s3','r3','cb3'];

var defaultCSSclass = 'defaultEl';
var activeCSSclass = 'activeEl';

function Qfields(oRadio) {
var el, i = 0, bWhich, focus_el, oForm = oRadio.form, grp = QfieldGrps[oRadio.value];
while (el = oForm.elements[i++])
if (el.name != oRadio.name) //leave controls alone
if (el.className == 'required') { //always 'on'
el.style.backgroundColor = grp[0]; //hilite
el.disabled = false; //enable
} else {
bWhich = (grp.isInArray(el.name)); //affected element?
el.disabled = !bWhich; //on? off?
el.style.backgroundColor = (bWhich) ? grp[0] : ''; //on? off?
el.className = (bWhich) ? activeCSSclass : defaultCSSclass;
if (!focus_el && bWhich) focus_el = el; //save first active element for later
}
if (focus_el && focus_el.focus) focus_el.focus(); //& focus it
}

</script>
</head>
<body style="text-align:center;" onload="document.forms[0].reset()">
<form>
<table cellspacing="2" cellpadding="4" border="1" bgcolor="gold">
<tr>
<td id="c1"><input name="choice" value="Select Combo #1" type="radio" onclick="Qfields(this)"> #1 fields </td>
<td id="c2"><input name="choice" value="Select Combo #2" type="radio" onclick="Qfields(this)"> #2 fields </td>
<td id="c3"><input name="choice" value="Select Combo #3" type="radio" onclick="Qfields(this)"> #3 fields </td>
</tr>
<tr>
<td colspan="3">
<input name="cb2" type="checkbox" class="defaultEl" disabled="disabled">&amp;lt; box#2 <input name="cb2" type="checkbox" class="defaultEl">&amp;lt; box#2
Text Area #3 &amp;gt;<textarea class="defaultEl" name="ta3" rows="5" cols="16" disabled="disabled"></textarea>
Combo #3 &amp;gt;<SELECT NAME="s3" class="defaultEl" disabled="disabled">
<OPTION VALUE="0">----0----</OPTION>
<OPTION VALUE="1">----1----</OPTION>
<OPTION VALUE="2">----2----</OPTION>
</SELECT>
Text Box #1 &amp;gt;<input class="required" name="t1" type="text" size="14" value=" class='required'" disabled="disabled">
<input name="r1" type="radio" class="defaultEl" disabled="disabled">&amp;lt; radio#1 <input name="r1" type="radio" class="defaultEl" disabled="disabled">&amp;lt; radio#1
</td>
</tr><tr>
<td colspan="3">
Combo #2 &amp;gt;<SELECT NAME="t2" class="defaultEl" disabled="disabled">
<OPTION VALUE="a">----a----</OPTION>
<OPTION VALUE="b">----b----</OPTION>
<OPTION VALUE="c">----c----</OPTION>
</SELECT>
Text Box #3 &amp;gt;<input class="defaultEl" name="t3" type="text" size="14" disabled="disabled">
<input name="r3" type="radio" class="defaultEl" disabled="disabled">&amp;lt; radio#3 <input name="r3" type="radio" class="defaultEl" disabled="disabled">&amp;lt; radio#3
Text Area #1 &amp;gt;<textarea class="defaultEl" name="ta1" rows="5" cols="16" disabled="disabled"></textarea>
</td>
</tr><tr>
<td colspan="3">
<input name="r2" type="radio" class="defaultEl" disabled="disabled">&amp;lt; radio#2 <input name="r2" type="radio" class="defaultEl" disabled="disabled">&amp;lt; radio#2
Combo #1 &amp;gt;<SELECT NAME="s1" class="defaultEl" disabled="disabled">
<OPTION VALUE="x">----x----</OPTION>
<OPTION VALUE="y">----y----</OPTION>
<OPTION VALUE="z">----z----</OPTION>
</SELECT>
Text Area #2 &amp;gt;<textarea class="defaultEl" name="ta2" rows="5" cols="16" disabled="disabled"></textarea>
Text Box #2 &amp;gt;<input class="defaultEl" name="t2" type="text" size="14" disabled="disabled">
<input name="cb1" type="checkbox" class="defaultEl" disabled="disabled">&amp;lt; box#1 <input name="cb3" type="checkbox" class="required" disabled="disabled">&amp;lt; req
</td></tr>
</table>
</form>
</body>
</html>