selection chart hel(l)p

[sophia]

I am very new to Javascript and very stuck. I am trying to create a web page with a simple selection function.

The user is presented with three categories A, B and C. The user chooses a category and a value from the category. The user can only pick one value from the entire category/value matrix. These could be three drop downs. Now see the diagram - If the user chooses a value that resides in a white cell he/she is immediately directed to a URL (webpage) assigned to that cell. If the user chooses a value from a yellow cell, he/she is then asked to chooses one of three values, in this case X, Y or Z - These could be radio buttons. The combination of the value from the category/value matrix and the value from the latter choices again points the user to a URL assigned to that result.

I hope this is clear and that someone can help me. I have included a .gif that shows the actual detail of what I am trying to make. I have two questions -

Is there a piece of code out there and where is it? Or is there some charitable soul who knows this is a piece of cake and would be willing to help out a very stuck student?

Ta

S

[cmelnick]

Hope this is what you were looking for because I had a hard time understanding what the heck you were trying to accomplish.

Here goes...

Just copy/paste the whole thing into test.html and play with it.

<table border=0>
<tr>
<td style="text-align: center; vertical-align: top;">
Category A:<br>
<select size=5 style="vertical-align: top;" onClick="selectItem(this);">
<option style="background-color: white;">Not Applicable</option>
<option style="background-color: white;" value="a_upto38.html">up to and including 38</option>
<option style="background-color: yellow;" value="a_38-41.cgi">above 38 and up to 41</option>
<option style="background-color: white;" value="a_41-51.html">above 41 and up to 51</option>
<option style="background-color: yellow;" value="a_51andup.cgi">above 51</option>
</select>
</td>
<td style="text-align: center; vertical-align: top;">
Category B:<br>
<select size=4 onClick="selectItem(this);">
<option style="background-color: white;">Not Applicable</option>
<option style="background-color: white;" value="b_upto41.html">up to and including 41</option>
<option style="background-color: yellow;" value="b_41-51.cgi">above 41 and up to 51</option>
<option style="background-color: yellow;" value="b_51andup.cgi">above 51</option>
</select>
</td>
<td style="text-align: center; vertical-align: top;">
Category C:<br>
<select size=5 onClick="selectItem(this);">
<option style="background-color: white;">Not Applicable</option>
<option style="background-color: white;" value="c_upto41.html">up to and including 41</option>
<option style="background-color: yellow;" value="c_41-51.cgi">above 41 and up to 51</option>
<option style="background-color: yellow;" value="c_51-55.cgi">above 51 and up to 55</option>
<option style="background-color: white;" value="c_55andup.html">above 55</option>
</select>
</td>
</tr>
<tr>
<td id="step2" style="text-align: center; vertical-align: top; visibility: hidden;" colspan=3>
Now select
<input type=radio name="radioSel" id="radio_x" onClick="step2(this);" value="X">X</input>,
<input type=radio name="radioSel" id="radio_y" onClick="step2(this);" value="Y">Y</input>, or
<input type=radio name="radioSel" id="radio_z" onClick="step2(this);" value="Z">Z</input>
</td>
</tr>
</table>

<script language="Javascript"><!--
var lastItem = null;

function selectItem(elem) {
var selection = elem.options[elem.selectedIndex];
var step2 = document.getElementById("step2");

// Reset the elements with each click
document.getElementById("radio_x").checked = false;
document.getElementById("radio_y").checked = false;
document.getElementById("radio_z").checked = false;


if (selection.innerHTML != "Not Applicable") {
if (selection.style.backgroundColor == "white") {
step2.style.visibility = "hidden";
lastItem = null;

// Do whatever you want to redirect
alert ("Redirecting to " + selection.value);
} else {
step2.style.visibility = "visible";
lastItem = selection.value;
}
} else {
step2.style.visibility = "hidden";
lastItem = null;
alert ("Please select an item.");
}
}

function step2(elem) {
// Do whatever you want with the x, y, or z and redirect
alert ("Redirecting to " + lastItem + "?value=" + elem.value);
}

//--></script>

[sophia]

Wow!

Thank you, this is great. I am sorry it was a bit confusing, I tried to make it clear but like my javascript coding it is still a bit wobbly. Your code is nearly what I needed. There are just two things:

It would be perfect if the three boxes were pull down menus to hide the ranges. I think the current version might confuse the users. The colours on the selection where only on the chart to point out which selections caused the xyz buttons to appear.So they are not needed in the app.

The second is that before the user is redirected it would be perfect if there was "submit" button so as the user could make sure they have selected the right instance.

I thought of adding a field where it summarised the users choice, but again I got really stuck. I am such a pain I know but finally could the radio buttons be vertically as opposed to horizontally aligned?

You have really helped me out here. I am really grateful......Thank you Thank you

S

[cmelnick]

See attachment...it's probably easier that way...

So, are you sending me a check now or later? :D

Just joking,

Enjoy!

[sophia]

This is just fantastic!!! I am so happy. You are a star!! I have learnt so much in such a small space of time.....I need to go and stitch it into my website now and try it out. I will be back to tell you how I get on tomorrow. Until then ....

Huge thanks

S