PDA

View Full Version : Use radio buttons to change <td> color?



htcilt
Sep 13th, 2007, 05:05 PM
Hi,

I know this has been asked several times before and there are a few solutions on the internet, however, my situation is slightly different so I haven't managed to get existing solutions working.

I have a table with 12 rows and 3 columns. In each cell are 5 radio buttons, with labels 1 to 5 and values 1 to 5. When the user clicks on the radio button, I would like the cell's background colour to change, but only the cell where the radio button resides.

I had written it out 'long-hand':



<td width="90" id="td1a"><INPUT TYPE="radio" NAME="cellname" VALUE="1" onclick="document.getElementById('td1a').style.backgroundColor='#ccffcc'">1<BR>
<INPUT TYPE="radio" NAME="cellname" VALUE="2" onclick="document.getElementById('td1a').style.backgroundColor='#ffcc66'">2<BR>
<INPUT TYPE="radio" NAME="cellname" VALUE="3" onclick="document.getElementById('td1a').style.backgroundColor='#ffcc66'">3<BR>
<INPUT TYPE="radio" NAME="cellname" VALUE="4" onclick="document.getElementById('td1a').style.backgroundColor='#ffcc66'">4<BR>
<INPUT TYPE="radio" NAME="cellname" VALUE="5" onclick="document.getElementById('td1a').style.backgroundColor='#ff9999'">5<BR></td>


The problem is I'm working in Oracle Portal which only allows 32000 characters and by the time I've done for all 36 cells its 38000 characters. Can it be done with a function somehow?

Cheers

Fumigator
Sep 13th, 2007, 05:51 PM
Yes... you call a function rather than imbed the setBackgroundColor..


<INPUT TYPE="radio" NAME="cellname" VALUE="1" onclick="changeBG('td1a', '#ccffcc');">1<BR>
.
.
.
<script type="text/Javascript">
function changeBG(radioID, bgColor) {
document.getElementById(radioID).style.backgroundColor = bgColor;
}
</script>


You can also compress your HTML and Javascript code using a compression utility which can significantly decrease the size. Google "html compress" and "javascript compress".

htcilt
Sep 13th, 2007, 05:56 PM
thanks very much. I'll give it a go :thumbsup:

htcilt
Sep 14th, 2007, 02:10 PM
I've run into another slight problem on this...
My code is still too big (32k) and I have compressed it as far as it will go.

Each cell has this code in it:



<INPUT TYPE="radio" NAME="STU_ADD_TR.DEFAULT.T_TERM1_Q01.01" VALUE="1" onclick="changeBG(this, '#ccffcc');">1<BR>
<INPUT TYPE="radio" NAME="STU_ADD_TR.DEFAULT.T_TERM1_Q01.01" VALUE="1" onclick="changeBG(this, '#ffcc66');">2<BR>
<INPUT TYPE="radio" NAME="STU_ADD_TR.DEFAULT.T_TERM1_Q01.01" VALUE="1" onclick="changeBG(this, '#ffcc66');">3<BR>
<INPUT TYPE="radio" NAME="STU_ADD_TR.DEFAULT.T_TERM1_Q01.01" VALUE="1" onclick="changeBG(this, '#ffcc66');">4<BR>
<INPUT TYPE="radio" NAME="STU_ADD_TR.DEFAULT.T_TERM1_Q01.01" VALUE="1" onclick="changeBG(this, '#ff9999');">5<BR>


The only thing that changes in each cell is the name. The table has 3 columns, the 1st is term 1, 2nd term 3 and 3rd term 4, so the names change accordingly. Also the question number goes up for every row. For example, radio buttons in the 6th row and 2nd column would be:



<INPUT TYPE="radio" NAME="STU_ADD_TR.DEFAULT.T_TERM2_Q06.01" VALUE="1" onclick="changeBG(this, '#ff9999');">1<BR>


I'm trying to find a way to use a variable in the radio buttons name, then put the lot into a function. Then in each cell I could just call the function e.g. ShowRadio('06','02'); where '06' is the question number and '02' is the term number - this would then generate the correct name for the radio button.
The hope is by reducing the code repititions, the file will be less the my 32k limit.

Any help would be much appreciated.