I'm new to JavaScript, though I am not new to OOP development. I'm
trying to dynamically display controls on a form based on the
selections of 3 radio boxes. I have code (may not be the best) for
kicking off the and inserting HTML;
No you don't. You have code for inserting HTML in *some* browsers. It
fails in one of the most standard-compliant browsers there is: Mozilla
(aka. Netscape 6+).
Your code is obviously (to a trained eye) written for Netscape 4
and IE, and ignores all other browsers. Netscape 4 is just about
dead (at least three years later than it should have been), and while
IE is what the mojority of people uses, there is a significant
number of other browsers in use (Mozilla/Gecko in general, Opera,
some Macintosh and Linux specific browsers, etc.).
You must decide which browsers you *need* to support, and then you
should write to the standards and use fallbacks for those of your
required browsers that don't support the standards sufficiently well.
I would normally aim at IE/Win 5+, Mozilla, and Opera 7+, and
what's-it's-name-browser for Macintosh. Only if pushed would
I go out of my way to support Netscape 4.
You are using innerHTML. That works in most new browsers, even though
it is not part of any standard. However, you only use it if
document.all exists, which is an unrelated property that also happened
to be invented at Microsoft. Some other browsers have decided to
support innerHTML without supporting document.all.
however, I'm stuck at how to incorporate anything other than text -
such as, control tags (tables, input boxes, etc.).
The code I have below only accepts strings in the "data" property and
it only accepts them if on the same line (I guess JS doesn't ignore
white space).
Not inside strings (that would be ... odd). Strings may not contain newlines.
In any case, I "could" do something like "data = data + "new lien of
code", but that would be extremely time consuming.
Just do as below.
Remember the said:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
It's
<script type="text/javascript">
The type attribute is required by HTML 4, and it can always replace
the language attribute (which is also deprecated).
function cGeneralQuestion() {
data = ""; // can't enter freeform HTML as data - is there anyother
No newlines inside strings, not "</" inside a script tag (use "<\/"
instead).
data = "<p>Hello<\/p><p>Polly wants a <b>cracker<\/b></p>" +
"<p>And now for something completely"+
"<form action=\"...\">...<input><\/form>"+
"<\/p>";
Another option is to have the code on the page already, and just move it.
That is actually what I would recommend.
Testing for Netscape 4, but erroneously matching OmniWeb
document.layers.cust.document.write(data);
document.layers.cust.document.close();
}
else {
if (document.all) {
Testing for IE, and failing a lot of browsers that would understand innerHTML.
They would fail here though, because you haven't declared the variable
"cust". IE makes named elements available as variables, other browsers
don't.
My suggestion:
---
<script type="text/javascript">
var currentData = null;
function showData(id) {
if (currentData!=null && currentData.id==id) { // already showing
return;
}
// find container where code is hidden
var container = document.getElementById("container");
// put current data back
if (currentData!=null) {
container.appendChild(currentData); // move currentData back to container
}
// find div where it is to be displayd
var custom = document.getElementById("cust");
// find the new data
var data = document.getElementById(id);
custom.appendChild(data);
// and remember it
currentData = data;
}
</script>
---
Then you can write:
---
<div id="container" style="display:none;">
<div id="option1">
<p>some arbitrary <abbr title="HyperText Markup Language">HTML</abbr>
and ...</p>
<label>Text input <input name="dilbert"></label>
</div>
<div id="option2">
<p>some other text <em>and</em> markup!</p>
</div>
</div>
<form action="...">
<label>Option 1 <input type="radio" onclick="showData('option1');"></label>
<br>
<label>Option 2 <input type="radio" onclick="showData('option2');"></label>
<br>
<div id="cust"></div>
</form>
---
Tested in Opera 7 and IE 5, and uses only W3C DOM methods.
/L
ption1;" or "display:"option1" shows all of the