Radio Buttons/Instant update

Hello All,
I am relatively a newbie to the world of PHP and java script. Actually, I am a windows developer asked to develop a web page.

Here is the basic issue:
There is a "category" represented by 2 radio buttons. Followed by 2 select boxes.

The desired behaviour:
1. The user selects a radio button
2. This updates the contents of the first select box
3. Selecting an item from the first select box will update the second select box
4. Selecting an item from the second select box will update an image box
All this needs to happen without the user hitting a submit button.

I know enough PHP to be dangerous, so here I am reaching out. This is what I have so far. I am stuck at step 2:

My java script
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
function RefreshPersonalLayouts(){
if(document.templategallery.isPersonal.value=1){
document.templategallery.layoutsql.value="SELECT DISTINCT `Name` FROM `tblTemplates` WHERE `isPersonal`= 1 ORDER BY `Name`";
document.templategallery.refresh();
}
}
function RefreshBusinessLayouts(){
if(document.templategallery.isPersonal.value=2){
document.templategallery.layoutsql.value="SELECT DISTINCT `Name` FROM `tblTemplates` WHERE `isBusiness`= 1 ORDER BY `Name`";
}
}
function RefreshColors() {
}
</script>



Any insight/tips or help will be greatly appreciated. I have been trying to use a hidden field to pass the sql statement around but that is not working. I believe there is a fundamental piece missing in all of this.

Hope this will help:

I am posting just javascript, so you must edit some HTML tags too.
__________________________________________________ ______
HTML:

<SELECT style="WIDTH: 184px; HEIGHT: 134px" size=8 name=previewlayouts onClick="RefreshColors();">

<SELECT style="WIDTH: 179px; HEIGHT: 70px" size=4 name=previewcolors onClick="RefreshImage();">

THE RIGHT WAY TO ADD IMAGE TO THE PAGE:
<IMG height=122 width=150 src="PATH/IMAGE.GIF" border=0 name=previewImage />
__________________________________________________ ________
javascript:

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">


//Loading images for use in js -------------------------------------------------
if(document.images){

var blue = new Image();
blue.src = "blue.gif";
var red = new Image();
red.src = "red.gif";
var white = new Image();
white.src = "white.gif";
var black = new Image();
black.src = "black.gif";
}
//------------------------------------------------------------------------------

function RefreshPersonalLayouts(){
if(document.templategallery.isPersonal.value=1){
document.templategallery.layoutsql.value="SELECT DISTINCT `Name` FROM `tblTemplates` WHERE `isPersonal`= 1 ORDER BY `Name`";


//Setting the the options in select boxes --------------------------------------
var style1 = new Option("colours", false);
var style2 = new Option("B&W", false);
document.templategallery.previewlayouts.options[0] = style1;
document.templategallery.previewlayouts.options[1] = style2;
//------------------------------------------------------------------------------

}
}
function RefreshBusinessLayouts(){
if(document.templategallery.isPersonal.value=2){
document.templategallery.layoutsql.value="SELECT DISTINCT `Name` FROM `tblTemplates` WHERE `isBusiness`= 1 ORDER BY `Name`";

}
}
function RefreshColors() {


//------------------------------------------------------------------------------
if(document.templategallery.previewlayouts.selecte dIndex != -1){

var colour1;
var colour2;

if(document.templategallery.previewlayouts.selecte dIndex == 0){

colour1 = new Option("blue", false);
colour2 = new Option("red", false);
document.templategallery.previewcolors.options[0] = colour1;
document.templategallery.previewcolors.options[1] = colour2;

}else{

colour1 = new Option("white", false);
colour2 = new Option("black", false);
document.templategallery.previewcolors.options[0] = colour1;
document.templategallery.previewcolors.options[1] = colour2;

}
}
//------------------------------------------------------------------------------
}

function RefreshImage(){

//Changing the image------------------------------------------------------------

var colour = document.templategallery.previewcolors.options[document.templategallery.previewcolors.selectedInd ex].text;
var imageName = eval(colour + '.src'); //you get string : black.src

document.images["previewImage"].src = imageName;


//------------------------------------------------------------------------------
}
</script>