#1
  1. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    25
    Rep Power
    0

    Javascript: document.write based on checkbox status


    I'm currently trying to put together some JS which, when a checkbox is checked, displays another related form element underneath. If the checkbox isn't checked, it shouldn't appear.

    I've got something sort of working:

    Code:
    <input type=checkbox name=suppreq value=1 onclick="if (document.reqnewbook.suppreq.checked == true) { document.write('<br><input type=text name=suppinfo>'); }">
    My problem is that the document.write writes to a fresh page, not underneath the checkbox (i.e. when the box is checked, all that it displayed is the 'suppinfo' text box).

    What's the best solution to this? Any help much appreciated.

    cheers,

    Chris
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    You didn't say the magic words "must work in Netscape 4". If so, a little tricky, but doable. Otherwise, easy - toggle the style.visibility property of the optional form element as needed.

    <input type="checkbox" name="suppreq" value="1" onclick=" this.form.suppreqtxt.style.visibility=(this.checked)?'visible':'hidden'"><br>
    <input type="text" name="suppreqtxt" style="visibility:hidden;">

    ....or any number of other possible approaches. document.write() always clears the current document; not what you need.
  4. #3
  5. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    25
    Rep Power
    0
    Apparently some of the potential users of the app are still using Netscape 3! I've come up with a workaround in HTML - one of my colleagues laughed at me when I suggested writing cross-browser javascript code for the sake of one form element 'magically appearing'...

    Thanks for your help anyway
  6. #4
  7. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    25
    Rep Power
    0

    Wink Magically appearing elements revisited


    Since my last post, I've decided to impose a minimum browser standard for my application and ignore NS3. I'd like to provide support for NS4 though, as many of the app's potential users are running NS Communicator 4.61 on Solaris.

    So, I *would* like to have automagically appearing form elements as I've described above - but with NS4 compatibility... if it is doable, how so?

    cheers,

    Chris
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Location
    London
    Posts
    69
    Rep Power
    13
    Why not have a textarea underneath the check box that is blank but when the check box is ticked it will fill in the details? This can be done with javascript, i.e.

    <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
    //<!---

    displayText = ""
    textMagic = new Array
    textMagicFlag = new Array
    textMagic[1] = "This is really simple"
    textMagic[2] = "Yes it is"
    textMagicFlag[1] = 0
    textMagicFlag[2] = 0

    function showInfo(thisResponse)
    {
    if (textMagicFlag[thisResponse] == 0)
    {
    displayText = displayText + textMagic[thisResponse] + "\n"
    document.exampleForm.exampleText.value = displayText
    textMagicFlag[thisResponse] = 1
    }
    else
    {
    tempText = new Array
    tempText = displayText.split("\n")
    displayText = ""
    for(i=0; i < tempText.length; i++)
    {
    if ((tempText[i] != textMagic[thisResponse]) && (tempText[i] > " "))
    {
    displayText = displayText + tempText[i] + "\n"
    }
    }
    document.exampleForm.exampleText.value = displayText
    textMagicFlag[thisResponse] = 0
    }
    }
    //--->
    </SCRIPT>

    <form name=exampleForm>
    <input type=checkbox name=example1 onClick="showInfo('1')">Check this box to see the text<P>
    <input type=checkbox name=example2 onClick="showInfo('2')">Check this box to see the more text<P>
    <textarea name=exampleText cols=60 rows=3 readonly wordwrap></textarea><P>
    </form>

    This code allows you to select multiple checkboxs and display a piece of text about it in a textarea along with information about other checkboxs. Might no be exactly what you had in mind but it is browser independant. Hope it helps
    Last edited by Humble Seeker; November 12th, 2001 at 06:51 AM.
    Humble Seeker

    The longest journey starts with the smallest step, and knowledge is the longest journey of all.
  10. #6
  11. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Not up on "automagically" appearing elements, but here's what you need to cover NS4:

    1) every hideable element in its own form, in its own layer
    2) script to tie together the "virtual form"
    2) a <table> to organize it

    Like so:

    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    form {padding-top:18px;}
    </style>
    <script type="text/javascript" language="JavaScript">

    function getCell(id) {
    var c = document.all ? document.all(id) :
    document.getElementById ? document.getElementById(id) :
    document.layers ? document.layers['NS' + id].document.inner :
    null;
    return c;
    }

    function showInput(id,state) {
    var c = getCell(id);
    if (!c) return;
    if (document.layers) {
    c.visibility = state ? 'show' : 'hide';
    } else {
    c.style.background = 'beige'; //setting in HTML messes NS4
    c.setAttribute('align','center'); //ditto
    c.style.visibility = state ? 'visible' : 'hidden';
    }
    }

    </script>
    </head>
    <body>
    <div align="center"><br><br>

    <table cellspacing="0" cellpadding="0" border="6" bgcolor="tan">

    <tr><form><td align="top" bgcolor="#000000"><input name="CBX1" type="checkbox" value="cell1"
    onclick="showInput(this.value,this.checked)"></td></form>
    <td width="140">&nbsp;<b>Enter Text 1</b></td></tr>
    <tr><td id="cell1" colspan="2" valign="top" style="visibility:hidden;"><ilayer id="NScell1"><layer id="inner" visibility="hide" bgcolor="beige"><form><input name="t1" type="text" value=" text 1"></form></layer></ilayer></td>

    <tr><form><td bgcolor="#000000"><input name="CBX2" type="checkbox" value="cell2"
    onclick="showInput(this.value,this.checked)"></td>
    <td>&nbsp;<b>Enter Text 2</b></td></form></tr>
    <tr><td id="cell2" colspan="2" valign="top" style="visibility:hidden;"><ilayer id="NScell2"><layer id="inner" visibility="hide" bgcolor="beige"><form><input name="t2" type="text" value=" text 2"></form></layer></ilayer></td>
    </tr></table>

    </div>
    </body>
    </html>


    The harder part is embedding a "virtual form" in the document - it's just a collection of hidden fields, each one with the same name as another field exposed to the user, layered or unlayered; onsubmit, a function reads all the exposed fields, writes them to the hidden ones, and submits. Much easier than it sounds. Sorry, but you can't break up a single form across multiple documents (as in NS4 layers).
  12. #7
  13. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    UK
    Posts
    25
    Rep Power
    0

    <select>?


    Progress: I won't be trying to implement this feature for NS4, I've got a workaround... but it will take the user longer to complete, so I'd still like to include visible/invisible form elements for IE5/NS6 users.

    I've got a slight change in requirement now though; instead of the text field becoming visible when a checkbox is checked, I'd like to display it when a certain option is selected in a <select> dropdown. Is that as straightforward? I've been playing around with it this morning but no luck yet...

    Can anyone help? adios?

    cheers,

    Chris
  14. #8
  15. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Maybe they should start a separate forum for this:

    generate a text box when "other" is selected from pulldown menu

    cdr - this technique - featuring the infamous "layer sandwich" (<td><ilayer><layer></layer></ilayer></td>) is the only reliable way to program NS4 table cells; once you get the hang of it it performs robustly enough to be used with aplomb (or at least a nectarine). Again:

    'Select all checkboxes' script needed please

    The 'virtual form' part is easy; if you post the <form> code I'll be glad to show you how it's done(http://www.faqts.com/knowledge_base/...d/1132/fid/128)

    rob

IMN logo majestic logo threadwatch logo seochat tools logo