onClick Reset

[jim]

Hi,

I've browsed the posts and examined several closely, but can't seem to
find what I'm looking for. I have an html table consisting to two
rows, with three cells on top (A, B, and C) and a fourth spanning the
bottom (D). Each cell beyond A contains a menu populated by a
selection in the cell prior. (for example, a choice in column A
produces a specific menu in column B. A choice from that menu creates
a new menu of subcategories in column C)

I would like to reset all selections *beyond* that selected when a new
selection is made. For example, if I've made choices in A through D,
but then click a new item in column B, C should reflect the new
submenu and D should be clear. Likewise, if I choose a new item in A,
B should reflect a new submenu and C and D should be cleared.

The following code gets me part of the way there, but the menus seem
to just stack on to one another:

(appears at the bottom of the document within the javascript <script>
tags):

<!-- document.startform.reset(); //-->

The clickable items are linked as such:

<a href="#a_varITEM" onClick="return show('varITEM')">ITEM</a>

The rest of the code is as follows:

<!--
function show( what )
{
var obj = document.getElementById("div_"+what);
if ( obj.style.display != 'block' )
{
obj.style.display = 'block';
}
else
{
obj.style.display = 'none';
}
return true;
}

// End -->


Any ideas how to make this serve its intended purpose?

Thanks in advance.

 

[jim]

jim said the following on 8/28/2007 5:37 PM:



The issue of it being in a table is irrelevant as what you have is
simply a dependent menu system.


When you say a "menu" are you talking about select lists or some type of
LI implemented menu? If you are using selects, then use the onchange of
each select to change the next menu (which you are doing anyway) and
have that same function reset any and all functions after that menu.



Why are you hiding/showing items if you are using menus?


Post a URL to a sample page that demonstrates what you are trying to do
as it isn't easy to figure out from what you wrote and the code snippets
you posted.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/

A full version of the script:

<style>
<!--
div.exp { display: none; }
table.form { font-family: Arial; border-color:#000000;border-
style:solid;border-width:1px; }
-->
</style>




<table border="0">
<tr>
<td width="33%" valign="top">
<b>Section A:</b><br>
<a href="#a_varA1" onClick="return show('varA1')">A1</a> <br>
<a href="#a_varA2" onClick="return show('varA2')">A2</a>
</td>





<td width="33%" valign="top">
<b>Section B:</b><br>

<div class="exp" id="div_varA1">
<a href="#a_varA1.1" onClick="return show('varA1.1')">A1.1</a> <br>
<a href="#a_varA1.2" onClick="return show('varA1.2')">A1.2</a> <br>
<a href="#a_varA1.3" onClick="return show('varA1.3')">A1.3</a>
</div>


<div class="exp" id="div_varA2">
<a href="#a_varA2.1" onClick="return show('varA2.1')">A2.1</a> <br>
<a href="#a_varA2.2" onClick="return show('varA2.2')">A2.2</a> <br>
<a href="#a_varA2.3" onClick="return show('varA2.3')">A2.3</a>
</div>
</td>




<td width="33%" valign="top">
<b>Section C:</b><br>

<div class="exp" id="div_varA1.1">
<li>A1.1.a
<li>A1.1.b
<li>A1.1.c
<li>A1.1.d
<li>A1.1.e
</div>


<div class="exp" id="div_varA1.2">
<li>A1.2.a
<li>A1.2.b
<li>A1.2.c
<li>A1.2.d
<li>A1.2.e
</div>

<div class="exp" id="div_varA1.3">
<li>A1.3.a
<li>A1.3.b
<li>A1.3.c
<li>A1.3.d
<li>A1.3.e
</div>


<div class="exp" id="div_varA2.1">
<li>A2.1.a
<li>A2.1.b
<li>A2.1.c
<li>A2.1.d
<li>A2.1.e
</div>


<div class="exp" id="div_varA2.2">
<li>A2.2.a
<li>A2.2.b
<li>A2.2.c
<li>A2.2.d
<li>A2.2.e
</div>

<div class="exp" id="div_varA2.3">
<li>A2.3.a
<li>A2.3.b
<li>A2.3.c
<li>A2.3.d
<li>A2.3.e
</div>

</td>
</tr>
</table>





<script language="JavaScript">
<!--
function show( what )
{
var obj = document.getElementById("div_"+what);
if ( obj.style.display != 'block' )
{
obj.style.display = 'block';
}
else
{
obj.style.display = 'none';
}
return true;
}

// End -->
<!-- clear form -->
<!-- document.startform.reset(); //-->
</script>

 

[jim]

Thanks. The info about the HTML Validator was a big help. I'd never
seen it, but it's a great help. I've made these and a few other
changes, but am still having the same problem: sticky items that don't
clear when I click different links. I've included newer code below.

Thanks again.


jim


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<style type="text/css">
div.exp { display: none; }
table.form { font-family: verdana;
font-size: 8pt;
border-width:0px; }
ol { list-style-type: circle}

</style>

<title>Javascript Test</title>

</head>



<body>

<table border="0" class="form">
<tr>
<td valign="top">
<b>Section A:</b><br/>
<p>
<a href="#a_varA1" onClick="return show('varA1')">A1</a> <br/>
<a href="#a_varA2" onClick="return show('varA2')">A2</a>
</p>
</td>





<td valign="top">
<b>Section B:</b><br/>

<div class="exp" id="div_varA1">
<p>
<a href="#a_varA1.1" onClick="return show('varA1.1')">A1.1</a> <br/>
<a href="#a_varA1.2" onClick="return show('varA1.2')">A1.2</a> <br/>
<a href="#a_varA1.3" onClick="return show('varA1.3')">A1.3</a>
</p>
</div>


<div class="exp" id="div_varA2">
<p>
<a href="#a_varA2.1" onClick="return show('varA2.1')">A2.1</a> <br/>
<a href="#a_varA2.2" onClick="return show('varA2.2')">A2.2</a> <br/>
<a href="#a_varA2.3" onClick="return show('varA2.3')">A2.3</a>
</p>
</div>
</td>




<td valign="top">
<b>Section C:</b><br/>

<div class="exp" id="div_varA1.1">

<ol>
<li>A1.1.a
<li>A1.1.b
<li>A1.1.c
<li>A1.1.d
<li>A1.1.e
</ol>

</div>


<div class="exp" id="div_varA1.2">

<ol>
<li>A1.2.a
<li>A1.2.b
<li>A1.2.c
<li>A1.2.d
<li>A1.2.e
</ol>

</div>

<div class="exp" id="div_varA1.3">

<ol>
<li>A1.3.a
<li>A1.3.b
<li>A1.3.c
<li>A1.3.d
<li>A1.3.e
</ol>


</div>


<div class="exp" id="div_varA2.1">

<ol>
<li>A2.1.a
<li>A2.1.b
<li>A2.1.c
<li>A2.1.d
<li>A2.1.e
</ol>

</div>


<div class="exp" id="div_varA2.2">

<ol>
<li>A2.2.a
<li>A2.2.b
<li>A2.2.c
<li>A2.2.d
<li>A2.2.e
</ol>

</div>

<div class="exp" id="div_varA2.3">

<ol>
<li>A2.3.a
<li>A2.3.b
<li>A2.3.c
<li>A2.3.d
<li>A2.3.e
</ol>

</div>

</td>
</tr>
</table>





<script type="text/javaScript">

function show( what )
{
var obj = document.getElementById("div_"+what);
if ( obj.style.display != 'block' )
{
obj.style.display = 'block';
}
else
{
obj.style.display = 'none';
}
return true;
}

document.startform.reset()

</script>



</body>
</html>