onChange

M

Michele

I am creating a web page that has a select box. Depending on what is
selected, I would like to display certain checkboxes.

Example:
If '100 Level' is selected, I want 2 checkboxes. 1)Name Purchased &
2)Solicit info

If '200 Level' is selected, I want 4 checkboxes. 1)Email w/Link
2)Letter for Coordinator 3)Financial Aid Info & 4)Email from Dean

Etc....

Is there any way to do this with Javascript?

Thanks in advance for the help.

Michele
 
B

Blue Raja

Michele said:
I am creating a web page that has a select box. Depending on what is
selected, I would like to display certain checkboxes.

Example:
If '100 Level' is selected, I want 2 checkboxes. 1)Name Purchased &
2)Solicit info

If '200 Level' is selected, I want 4 checkboxes. 1)Email w/Link
2)Letter for Coordinator 3)Financial Aid Info & 4)Email from Dean

Etc....

Is there any way to do this with Javascript?
Click to expand...

Here's an (incomplete) implementation:

<html>
<head>
<style type="text/css">
.checkboxes
{ border: 1px dashed #000000;
padding: 2px; }
</style>
<script type="text/javascript">
<!-- // BEGIN JS HIDING
function display_cbs(index){
for (var i = 1; i <= 2; i++){
// hide cbs
document.getElementById("cbs"+i).style.display = "none";
}

if (index > 0){
// show selected cbs
document.getElementById("cbs"+index).style.display = "block";
}
}
// END JS HIDING -->
</script>
<body>
<form>
<select onchange="display_cbs(this.selectedIndex);">
<option value="0">---</option>
<option value="1">100 Level</option>
<option value="2">200 Level</option>
</select>
<div id="cbs1" class="checkboxes" style="display: none;">
Name purchased: <input type="checkbox"><br>
Solicit info: <input type="checkbox">
</div>
<div id="cbs2" class="checkboxes" style="display: none;">
Email w/ link: <input type="checkbox"><br>
Letter for co-ordinator: <input type="checkbox"><br>
Financial Aid Info: <input type="checkbox"><br>
Email from Dean: <input type="checkbox"><br>
</div>
</form>
</body>
</html>

On the server-side one would check the SELECT to see which group had been
chosen and then test for those values, discarding the others as irrelevant.

Hope that helps.
 
R

Richard Cornford

Blue Raja wrote:
<script type="text/javascript">
<!-- // BEGIN JS HIDING
Click to expand...
<snip> ^^^^^^^^^^^^^^^^^^^^^^^

What is this nonsense doing in a script element?

Richard.
 
B

Blue Raja

Richard Cornford said:
Blue Raja wrote:

<snip> ^^^^^^^^^^^^^^^^^^^^^^^

What is this nonsense doing in a script element?
Click to expand...

HTML commenting to hide the script from JS incompatible browsers, although
it doesn't seem to be included in scripts on this group. What's the reason
for the aversion to script hiding?
 
L

Lee

Blue Raja said:
HTML commenting to hide the script from JS incompatible browsers, although
it doesn't seem to be included in scripts on this group. What's the reason
for the aversion to script hiding?
Click to expand...

It serves no purpose other than as a potential source of error.
The percentage of incompatible browsers in use fell below 0.001%
several years ago.
 
B

Blue Raja

Lee said:
It serves no purpose other than as a potential source of error.
The percentage of incompatible browsers in use fell below 0.001%
several years ago.
Click to expand...

Fair enough, I wasn't aware how low the figures had gotten.
Thanks for the info.
 
L

Lasse Reichstein Nielsen

Blue Raja said:
Fair enough, I wasn't aware how low the figures had gotten.
Thanks for the info.
Click to expand...

I don't know the numbers (96% of all statistics are made up on the
spot anyway), but the browsers in the most common browser families,
that doesn't understand the script tag are:
Netscape prior to version 2 (Mar 1996 - i.e., Netscape 1 and 1.1)
IE prior to version 3 (Aug 1996 (guessing, it is in IE 3, don't have IE 2))
Opera prior to version 2 (Feb 1997)
Lynx prior to version 2.60 (1996?)
(most other browser families are later than this and have understood
the script tag from day one).

There might be other HTML tools than browsers that still doesn't
understand the script tag. If you use one of these, and for some
reason can't get an updated version that understands HTML 3.2, then I
guess you'll have to put the hiding in there on your own pages
(perhaps only while developing the page). The rest of us can happily
forget all about it :)

/L
 
R

Richard Cornford

Blue said:
HTML commenting to hide the script from JS incompatible
browsers,
Click to expand...

But its context follows a STYLE element that does not feature similar
"hiding" and the browsers that don't understand SCRIPT don't understand
STYLE either (so they write the unhidden STYLE content into the
displayed text output in the same way as they would write an unhidden
SCRIPT into the content).
although it doesn't seem to be included in scripts on this
group. What's the reason for the aversion to script hiding?
Click to expand...

It represents people doing things without understanding what they are
doing or why they are doing it; a mystical incantation rather than a
design decision.

Realising exactly how old the browsers that suffer from not
understanding SCRIPT elements are immediately makes it obvious that this
technique is no longer necessary (and has not been for some considerable
time). Using it in a script that goes on to employ the W3C DOM Core -
getElementById - method without verifying that it is implemented in the
current environment (or attempting to provide any safe fall-back
emulation) makes it doubly clear that the "hiding" is not understood, as
two generations of browsers occupy the gap between the introduction of
client-side scripting and the first implementations of W3C DOM methods
in browsers. Leaving a script that appears to be worrying about ancient
and extinct browsers but that will predictably error-out on the older of
the browsers that are still in use.

An evident contradiction that is re-enforced again by the realisation
that the script has been predicated on an ability to switch the CSS
display property and have the browser dynamically respond to the action.
Making it a script that is needlessly designed to give an unusable GUI
on javascript disabled browsers, browsers pre-dating the W3C DOM and W3C
standard browsers that are not sufficiently dynamic to facilitate the
switching of the display property (such as Opera <= 6 and NetFront).
After that it seems a bit superfluous to be trying to prevent some
dinosaur browser from writing the contents of a script element into its
displayed text.

Richard.
 

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

Problem with a login script, SESSION user rights and put this together so it works with the other pages and MySQL. Code examples. 2
onChange without using select? 1
How to fetch database row and display in Qlabels with QcomboBox selected value in PyQt5 8
Gallery - mosiac/grid layout with filtering and information page popup 1
[IE] Toggle checkbox state - onclick vs. onchange 0
Collect Excel Data from Website 5
Forcing onChange event on textinput 5
Help with my responsive home page 2

Members online

No members online now.
Total: 22 (members: 0, guests: 22)
Robots: 437

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,053
Latest member
BrodieSola

Latest Threads

Top