Novice Request - onClick Reset

J

jim

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>
 
A

Aaron Saray

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>
Click to expand...

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.
 
J

jim

Hi,
Click to expand...
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.
Click to expand...
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)
Click to expand...
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.
Click to expand...
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)
Click to expand...
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.
Click to expand...
Script (thanks in advance for any help):
Click to expand...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<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}

<title>Javascript Test</title>


<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>
Click to expand...
<td valign="top">
<b>Section B:</b><br/>
Click to expand...
<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>
Click to expand...
<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>
Click to expand...
<td valign="top">
<b>Section C:</b><br/>
Click to expand...
<div class="exp" id="div_varA1.1">


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


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


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


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


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



<script type="text/javaScript">
Click to expand...
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;



</body>
</html>
Click to expand...

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.
Click to expand...

Thanks for the reply. With the amount of content in the fourth cell
and just the number of potential combinations, I think this might get
a little hairy for the editors. I like the script I've been working
with because of the simplicity, but just can't get past the reset (or
lack there of) problem.


jim
 
J

jim

What if you built the values in the javascript and used javascript to
populate the pages? For example:
Click to expand...
var Cell1 = new Array();
...
var Cell4 = new Array();
Click to expand...
/** HELLO USERS, PLEASE EDIT HERE **/
Cell1[] = 'Row 1 value for cell 1';
...
Cell4[] = 'Row 1 value for cell 4';
Click to expand...
Cell1[] = 'Row 2 value for cell 1';
...
Cell4[] = 'Row 2 value for cell 4';
Click to expand...
/** USERS, STOP EDITING HERE! **/
Click to expand...
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.
Click to expand...

Thanks for the reply. With the amount of content in the fourth cell
and just the number of potential combinations, I think this might get
a little hairy for the editors. I like the script I've been working
with because of the simplicity, but just can't get past the reset (or
lack there of) problem.

jim
Click to expand...

Hi - Any other ideas out there? I've been through a number of
variations of this and still can't make it do what I want. In the
interim I'm using a series of arrays, but this is going to be far more
complicated for the editors who'll own this going forward.

Thanks again to any who respond.


jim
 
D

Dr J R Stockton

In comp.lang.javascript message <[email protected]
glegroups.com> said:
Hi - Any other ideas out there? I've been through a number of
variations of this and still can't make it do what I want. In the
interim I'm using a series of arrays, but this is going to be far more
complicated for the editors who'll own this going forward.
Click to expand...

Please read FAQ section 2.3 - and the rest of it too.
 
J

jim

In comp.lang.javascript message <[email protected]
glegroups.com>, Wed, 5 Sep 2007 07:51:26, jim <[email protected]>
posted:




Please read FAQ section 2.3 - and the rest of it too.

--
(c) John Stockton, Surrey, UK. [email protected] Turnpike v6.05 IE 6
FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Click to expand...

Thanks. Ironically, the vague reference to FAQs in this response
provides no help.

If this is meant to suggest that I've not reviewed other posts, I'm
afraid that I have, but to no avail. I've looked through several
dozen and have tried numerous fixes, but have yet to see what I'm
clearly missing. If this is meant to refer to the lack of detail in
this post, that is by design. The full detail is in the code I'm
interested in fixing (the initial post in *this* thread). My
experience with an earlier post found me with plenty of unrelated
feedback that did nothing to progress the effort.

To recap for anyone who may be willing to assist someone with no
experience with Javascript, I have very specific requirements (see the
first message in this thread) and a very specific problem: selecting
new items from a menu does not clear earlier submenu items. I've
found alternatives to this format that work, but do not satisfy the
simplicity requirement (this solution is most favorable because the
people who will be editing going forward are already familiar with
html).

Thanks in advance to anyone who can help with this specific problem.
I realize that it be more elementary than you're used to dealing with,
but I appreciate your support.
 
R

RobG

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.
Click to expand...

Will they edit the HTML or the script? If you want them to only edit
the HTML, you've probably made it too complex (and restrictive)
already.
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)
Click to expand...

There are plenty of tree menu scripts out there, some are very simple,
some more complex. Good ones abstract the HTML from the script, and
the menu continues to function without any script support at all.

2) Clear all subsequent values when a new option is selected...
Click to expand...

Most will do that, some provide an option for auto-collapse or user
selected collapse.

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)
Click to expand...

Good ones do exactly that, but are generally based on lists, not
complex structures of tables, divs, paragraphs and links.

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">
Click to expand...

You should have moved past transitional by now, use HTML 4.01 strict.
<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/>
Click to expand...

If you are using HTML, why are you attempting XHTML? Stick with valid
syntax for the doctype suggested above.

<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>
Click to expand...

You are much better off to structure your menu as a list and style it
with CSS, you can horizontal or vertical menues.


[...]
<script type="text/javaScript">

function show( what )
{
var obj = document.getElementById("div_"+what);
if ( obj.style.display != 'block' )
{
obj.style.display = 'block';
Click to expand...

This script is relying on a browser quirk: you are setting a style of
'none' using CSS, so when loaded the element referred to by obj will
have a style.display property of whatever the browser gives it by
default (probably ''). The 'none' style is iherited from the style
sheet, it isn't accessible via the element's style.display property.

When you first click on it, the script checks it and sees that it's
not block, so sets it to block. That overrides the stylesheet, so it
becomes visible. From now one, you are toggling the element between
'block' and 'none'. But it means your script works only in this
context, it won't work with many other types of element.

Anyhow, for what you are trying to do, see if this fits the bill:

<URL: http://www.alistapart.com/articles/complexdynamiclists/ >
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Only one table shows up with the information 2
Working on mobile css menu with plenty of frustration! 2
Help with Visual Lightbox: Scripts 2
Dropdown menu in a fixed navbar 2
Horizontal menu bar header 2
Buttons lining up 1
Help with my responsive home page 2
Align img inside nav tabs section 5

Members online

No members online now.
Total: 28 (members: 0, guests: 28)
Robots: 463

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top