Newbie - Dynamic Form Contents

Discussion in 'Javascript' started by Randy Webb, Feb 14, 2004.

  1. Randy Webb

    Randy Webb Guest

    Bill wrote:

    > Hello,
    >
    > 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; 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). In any case, I "could" do something like "data = data +
    > "new lien of code", but that would be extremely time consuming. Isn't
    > there a way - perhaps another property than data that would allow me
    > to paste whatever HTML code I needed into the DIV/SPAN section?
    >
    > Thanks in advance.
    > ==================================================================
    > <html>
    > <head>
    > <SCRIPT LANGUAGE="JavaScript">
    > function cGeneralQuestion() {
    > data = ""; // can't enter freeform HTML as data - is there anyother
    > prop?


    Why not? Its the basis of dHTML.

    > if (document.layers) {


    document.layers.cust.document.open();

    NN4 requires it to be open before writing to it.

    > document.layers.cust.document.write(data);
    > document.layers.cust.document.close();
    > }
    > else {
    > if (document.all) {
    > cust.innerHTML = data;}
    > }
    > }
    > </script>
    > </head>
    >
    > <body>
    > <form name=TestForm>
    > Temporary text:
    > <p><input type="radio" value="V1" checked name="R1"
    > onClick="cGeneralQuestion();">General Question&nbsp;
    > <input type="radio" name="R1" value="V2"
    > onClick="cOrderStatus();">Order Status&nbsp;&nbsp;&nbsp;
    > <input type="radio" name="R1" value="V3"
    > onClick="cTechSupport();">Technical Problem</p>
    >
    > <span id=cust style="position:relative;"></span>
    > </form>
    > </body>
    > </html>


    As written, your code won't work in any Gecko based browser, and
    probably fails in Opera in IE-spoof mode with the shortcut reference
    cust.innerHTML.

    See <URL: http://jibbering.com/faq/#FAQ4_15 /> with regards on how to do
    what you are wanting to do.


    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/
     
    Randy Webb, Feb 14, 2004
    #1
    1. Advertising

  2. Randy Webb

    Randy Webb Guest

    Lasse Reichstein Nielsen wrote:

    > (Bill) writes:
    >
    >
    >>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+).


    Not just semantical, but I have never heard Netscape 6/7 referred to, or
    known as, Mozilla. They are two entirely different browsers. When I
    say/read Mozilla, I think Mozilla. When I say/read Netscape6/7, I think
    Netscape 6/7


    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/
     
    Randy Webb, Feb 14, 2004
    #2
    1. Advertising

  3. Randy Webb

    Bill Guest

    Hello,

    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; 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). In any case, I "could" do something like "data = data +
    "new lien of code", but that would be extremely time consuming. Isn't
    there a way - perhaps another property than data that would allow me
    to paste whatever HTML code I needed into the DIV/SPAN section?

    Thanks in advance.
    ==================================================================
    <html>
    <head>
    <SCRIPT LANGUAGE="JavaScript">
    function cGeneralQuestion() {
    data = ""; // can't enter freeform HTML as data - is there anyother
    prop?
    if (document.layers) {
    document.layers.cust.document.write(data);
    document.layers.cust.document.close();
    }
    else {
    if (document.all) {
    cust.innerHTML = data;}
    }
    }
    </script>
    </head>

    <body>
    <form name=TestForm>
    Temporary text:
    <p><input type="radio" value="V1" checked name="R1"
    onClick="cGeneralQuestion();">General Question&nbsp;
    <input type="radio" name="R1" value="V2"
    onClick="cOrderStatus();">Order Status&nbsp;&nbsp;&nbsp;
    <input type="radio" name="R1" value="V3"
    onClick="cTechSupport();">Technical Problem</p>

    <span id=cust style="position:relative;"></span>
    </form>
    </body>
    </html>
     
    Bill, Feb 14, 2004
    #3
  4. (Bill) writes:

    > 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 <!DOCTYPE> declaration. It is required by HTML

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

    > if (document.layers) {


    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.

    > cust.innerHTML = data;}


    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
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Feb 14, 2004
    #4
  5. Randy Webb <> writes:

    > Lasse Reichstein Nielsen wrote:


    >> It fails in one of the most standard-compliant browsers there is:
    >> Mozilla (aka. Netscape 6+).

    >
    > Not just semantical, but I have never heard Netscape 6/7 referred to,
    > or known as, Mozilla. They are two entirely different browsers. When I
    > say/read Mozilla, I think Mozilla. When I say/read Netscape6/7, I
    > think Netscape 6/7


    Yes, it is a simplification. It would be more precise to say:
    Gecko based browsers (including Netscape 6+, Mozilla, and others).

    However, Netscape's browsers are each based on a specific release of
    the Mozilla browser (e.g., Netscape 7.1 is based directly on Mozilla
    1.4) so there is a closer connection between Netscape and Mozilla than
    between Netscape and other Gecko based browsers.
    <URL:http://devedge.netscape.com/>
    Netscape adds extra, proprietary, features to the Mozilla Browser Suite
    version that they are based on (probably some AOL/AIM/Whatever extensions,
    I never use Netscape branded browsers).

    They are different browsers, but for rendering purposes, they are
    equivalent. I wouldn't go as far as to call them *entirely* different
    browsers, as they are only superficially different.

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Feb 14, 2004
    #5
  6. Randy Webb

    Bill Guest

    Lasse Reichstein Nielsen <> wrote in message > ---


    Lasse,

    Thanks for the code. My organization will only need to support IE6,
    but its good to know if someone uses a non-company standard browser,
    it won't blow up. I quick question though, how to I set one of the
    options as the default?

    > <div id="container" style="display:none;">


    Setting to "display:eek:ption1;" or "display:"option1" shows all of the
    options.

    Thanks
     
    Bill, Feb 15, 2004
    #6
  7. On 15 Feb 2004 07:42:46 -0800, Bill <> wrote:

    > Thanks for the code. My organization will only need to support IE6,
    > but its good to know if someone uses a non-company standard browser,
    > it won't blow up. I quick question though, how to I set one of the
    > options as the default?
    >
    >> <div id="container" style="display:none;">

    >
    > Setting to "display:eek:ption1;" or "display:"option1" shows all of the
    > options.


    That's because "display:eek:ption1" is nonsense, whilst "display:"option1" is
    invalid HTML.

    Simply call showData() onload with the id of required DIV. For example,

    ...
    <body onload="showData('option1')">
    ...
    <label>Option 1 <input type="radio" checked
    onclick="showData('option1');"></label>
    ...

    will show the first one at startup. As shown above, you should also set
    the checked property on the corresponding radio button.

    Mike

    --
    Michael Winter
    d (replace ".invalid" with ".uk" to reply)
     
    Michael Winter, Feb 15, 2004
    #7
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Don Adams
    Replies:
    1
    Views:
    600
    Martin Honnen
    Mar 5, 2004
  2. Kamarulnizam Rahim
    Replies:
    4
    Views:
    220
    Robert Klemme
    Jan 28, 2011
  3. pizzy
    Replies:
    4
    Views:
    142
    pizzy
    Mar 18, 2005
  4. pizzy
    Replies:
    7
    Views:
    160
    pizzy
    Mar 23, 2005
  5. Replies:
    0
    Views:
    195
Loading...

Share This Page