This is what i want to beold to do. I have done the text and the box with height and width with a drop down menu.. so the box appears with what every height i picked and width i picked plus what i write in the text box.

The problem is i cant get the box to change colors if i click red, blue or green? i cant find the coding at all.

then the next thing is getting a image up if i was the click show image..

Down the under this is what i need to have on this form.. i've done 2 of them but the image and the color changing box has got me? Can anyone help me out please?


The text from the textbox should be placed inside the box div.
The color you selected from the radio button will be color of the box div.
The dimension of the box div should match the width and height the user has selected from the dropdown menu.
If the user selects the checkbox i want a small image to appear inside the box div; otherwise no image should show up.



Im having trouble





<html>
<head>

<title>My Javeascript form</title>
<script type="text/javascript" language="javascript">

function errorchecking() {
var form = document.forms['sam'];

if(form.elements['textbox'].value==''){
alert('please enter text');
return false;
}

else if((form.elements['Colours'][0].checked == false) &&
(form.elements['Colours'][1].checked == false) &&
(form.elements['Colours'][2].checked == false)) {
alert('please click a colour');
return false;
}


else if(form.elements['Height'].value=='') {
alert('please click a height');
return false;

}

else if(form.elements['width'].value=='') {
alert('please click a width');
return false;

}

// everything is fine
createBox();
}

function createBox() {
//alert('Congratulations! Everything was Filled Out!');
document.getElementById("box").innerHTML = document.forms['sam'].elements['textbox'].value;
document.getElementById("box").style.width = document.forms['sam'].elements['width'].value;
document.getElementById("box").style.height = document.forms['sam'].elements['Height'].value;
document.getElementById("box").style.bgcolor = document.forms['sam'].elements['Colours'].value;
}

</script>
</head>

<body bgcolor="#FFFFCC" ><fieldset>
<img src="../images/300x300_frangipani_stockxchng2.jpg" width="200" height="200">
<font color="#0000CC" size="+5">
<center>
My Javascript Assignment
</center></font>

<form name="form1">
<select name="fieldB">
<option size="15"> Select from below </option>
</select>
<br>
<input type="radio" name="choice" onclick="buildSelect(12)">Add choices 1 and 2<br>
<input type="radio" name="choice" onclick="buildSelect(34)">Add choices 3 and 4<br>
<input type="radio" name="choice" onclick="buildSelect(1234)"> Add all choices<br>
<input type="radio" name="choice" onclick="buildSelect(00)">Clear all choices
</form>


<form name="sam">
<p><b>Please Enter Text:</b>
<input type="text" name="textbox">
</p>

<p><b>Colours</b><br/>
<input type="radio" name="Colours" value="#0033FF" /> Blue<br />
<input type="radio" name="Colours" value="#FF0000" /> Red<br />
<input type="radio" name="Colours" value="#00CC00" /> Green<br />


<p>
<b>Height</b>

<select name="Height">
<option selected>Please Select Height</option>
<option value="100px">100</option>
<option value="200px">200</option>
<option value="300px">300</option>
<option value="400px">400</option>
<option value="500px">500</option>
<option value="600px">600</option>
<option value="700px">700</option>
<option value="800px">800</option>
<option value="900px">900</option>
<option value="1000px">1000</option>
</select>

</p>

<p>
<b>Width</b>

<select name="width">
<option selected>Please Select Width</option>
<option value="100px">100</option>
<option value="200px">200</option>
<option value="300px">300</option>
<option value="400px">400</option>
<option value="500px">500</option>
<option value="600px">600</option>
<option value="700px">700</option>
<option value="800px">800</option>
<option value="900px">900</option>
<option value="1000px">1000</option>
</select>

</p>

<p><b>Do you want to show a Image?</b> <input name="image" type="checkbox" /> </p>

<p>
<input type="button" name="Submit" value="Submit" onClick="errorchecking();">
<input type="Reset" name="Reset" value="Reset">

</p>

</fieldset>

</form>
<div id="box" style="border:1px solid #000;"></div>
</body>
</html>