Re: Novice Request - onClick Reset
- From: Aaron Saray <102degrees@xxxxxxxxxxxxxx>
- Date: Sun, 02 Sep 2007 15:33:35 -0000
On Sep 1, 8:00 pm, jim <jimmorga...@xxxxxxxxx> wrote:
Hi,
I posted earlier and was able to clean up the html in the code I'd
hacked together, but my problem still hasn't been solved. Since
posting, I've explored another option that may work (courtesy of a
colleague at work), but the array set up we used may be too
complicated for the folks who'll ultimately own editing this file
periodically. I'm hoping for some help from someone on this list.
Requirements:
1) Provide a tiered menu system, through which users will be able to
drill down to a short set of instructions specific to the combination
of selections in three menus (Cell A: Top Level Categories, Cell B:
First Sub Categories, Cell C: Second Sub Categories, Cell D: Final
Notes)
2) Clear all subsequent values when a new option is selected. For
example, if I've chosen a category and two subcategories, the fourth
cell will be populated. If I choose a new top level category, the
first subcategory should be changed and the values in the third and
fourth cells cleared.
3) Minimize the complexity of the file so editors experienced in HTML,
but with minimal programming (or DHTML) experience can easily maintain
(also excludes the use of a database)
Problem:
I've found a solution (noted above) that will work, but conflicts with
the third requirement above. The script I'm hoping to work with (see
below), doesn't currently meet the second requirement. When a new
category is selected, the subcategories only append to one another
instead of clearing the unwanted values. This is the problem I'd
ultimately like to solve.
Script (thanks in advance for any help):
<!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>
What if you built the values in the javascript and used javascript to
populate the pages? For example:
var Cell1 = new Array();
....
var Cell4 = new Array();
/** HELLO USERS, PLEASE EDIT HERE **/
Cell1[] = 'Row 1 value for cell 1';
....
Cell4[] = 'Row 1 value for cell 4';
Cell1[] = 'Row 2 value for cell 1';
....
Cell4[] = 'Row 2 value for cell 4';
/** USERS, STOP EDITING HERE! **/
Will this help reduce the complexity? The javascript itself might get
more complex, but it should allow you to make it easier for your
users.
.
- Follow-Ups:
- Re: Novice Request - onClick Reset
- From: jim
- Re: Novice Request - onClick Reset
- References:
- Novice Request - onClick Reset
- From: jim
- Novice Request - onClick Reset
- Prev by Date: Re: Load script with each page.
- Next by Date: Re: Stupid Audit Tricks
- Previous by thread: Novice Request - onClick Reset
- Next by thread: Re: Novice Request - onClick Reset
- Index(es):
Relevant Pages
|
Loading
