onclick show images in table from form

[falconga]

Hello everyone,

Confused with the title of the thread? Well, I guess that`s because my brain is completly fried from trying to find the correct way to do something that seems impossible without your help.

Here is the story, I have 8 questions, each containing 5 answers. I have a table at the bottom of the page with 8 cells (2 rows, 4 columns). The idea is that, when somebody answers the questions and click on the submit button, each one of the cells in the table show a different image relevant to the answers and this for every different answers. So for Question 1, Answer 1 will have 4 different pictures showing at random when button is clicked, same for answer 2, 3, 4 and 5, same again for Question 2.

Is this possible, am I doing it right in thinking that a table could do this for me?

Right, so far I have the questions, I will only use 2 random in this example to make your answers shorter, I have the javascript (needs confirming/correcting). But really, my main worry is linking all of this together, I am rubbish at this, how can I show 5 different php files in a cell, is this possible?

ANY help would more than appreciated on this matter.

Thank you for your help guys.

Please don`t laugh at this code, I am ok with html, but not too good at php and javascript, as you will see.

Which music do you prefer?<br>
<input TYPE="radio" NAME="m" VALUE="reggae">Reggae<br>
<input TYPE="radio" NAME="m" VALUE="rap">Rap/Hip-hop<br>
<input TYPE="radio" NAME="m" VALUE="drum">Drum n' Bass<br>
<input TYPE="radio" NAME="m" VALUE="rock">Rock<br>
<input TYPE="radio" NAME="m" VALUE="metal">Metal<br><br>

Which colour do you prefer?<br>
<input TYPE="radio" NAME="c" VALUE="blue">blue<br>
<input TYPE="radio" NAME="c" VALUE="white">white<br>
<input TYPE="radio" NAME="c" VALUE="yellow">yellow<br>
<input TYPE="radio" NAME="c" VALUE="brown">brown<br>
<input TYPE="radio" NAME="c" VALUE="green">green<br><br>

<input type="button" value="Results!" onclick="process();"><br>

<table>
<tr>
    <td width="400" height="200"><img src="reggae.php" (This is where I would need to add the other 4 php files I think) alt="" /></td>
</tr>
<tr>
    <td width="400" height="200"><img src="blue.php" (This is where I would need to add the other 4 php files) alt="" /></td>
</tr>
</table>

<script type="text/javascript">

function process()
{
test1();
test2();
}

function test1()

{ if (m[0].checked)
{ href="reggae.php"; }
else { if (m[1].checked)
{ href="rap.php"; }
else { if (m[2].checked)
{ href="drum.php"; }
else { if (m[3].checked)
{ href="rock.php"; }
else { if (m[4].checked)
{ href="metal.php"; } } } } } } 

function test2()

{ if (c[0].checked)
{ href="blue.php"; }
else { if (c[1].checked)
{ href="white.php"; }
else { if (c[2].checked)
{ href="yellow.php"; }
else { if (c[3].checked)
{ href="brown.php"; }
else { if (c[4].checked)
{ href="vert.php"; } } } } } } 

</script>

Thank you once again