www.webdeveloper.com
+ Reply to Thread
Results 1 to 5 of 5
  1. 11-25-2002 07:10 PM #1
    bja
    bja is offline Registered User
    Join Date
    Nov 2002
    Location
    Melbourne
    Posts
    3

    Different fields/text etc based on list item selection.

    <b>Hi.</b><p> I'm a seasoned technical writer but I'm reasonably new to JavaScript and have spent several days trying to solve this problem.<p>
    I've put together a page where I have a number of fields for user entry and two of the fields are linked lists. One MASTERand one SUB. Select from the master and the sub-list changes. These work well.<p>
    I'm now trying to use the sub-list items to display different information/fields/check-boxes etc.. in an area below the list and this is where I'm having problems.<p>
    I cannot work out how to make the displaying of this information conditional upon the sub-item selected and I'm hoping someone can give some clues.<p><b>Any help would be greatfully appreciated</b><p>TIA<p>
    Regards,

    Bruce A
    Reply With Quote Reply With Quote
  2. 11-25-2002 07:53 PM #2
    Zach Elfers
    Zach Elfers is offline Registered User
    Join Date
    Nov 2002
    Posts
    631
    HTML isn't used in this forum. Feel free to hit enter.

    Maybe you could do this by:

    <script language="JavaScript">

    function TextChange(form) {
    if (form.text.value) {
    form.text2.value == "hello";
    }
    }

    </script>

    <form>

    <input type="text" name="text">
    <br>
    <input type="text" name="text2">

    </form>

    I don't know if that's what you want or if that's going to work.
    Reply With Quote Reply With Quote
  3. 11-25-2002 08:53 PM #3
    bja
    bja is offline Registered User
    Join Date
    Nov 2002
    Location
    Melbourne
    Posts
    3
    Thanks Zach.

    Yeah, I noted that the tags came out as text (Its my first post to the forum).

    Thanks for your help but this is not what I meant.

    I have two fields that use drop-down lists.

    The first (master) list determines what options are displayed in the second list. For example:

    <select size="1" name="AAAA" onChange="setList(form)">

    <option>AAAA</option>
    <option>BBBB</option>
    <option>CCCC</option>

    </select>

    If I select AAAA, the second list shows only shows the options AAAA1, AAAA2, AAAA3 and selecting BBBB would show options BBBB1, BBBB2 et al.

    This works OK through an array in the <head> area but now I am trying to go the next step.

    I am trying to let the second list options determine a range of text and other fields that are displayed on the page.

    For example:

    If I select CCCC in the first list, the second list displays CCCC1, CCCC2, CCCC3 etc.. If I then click on (thereby selecting) say, CCCC3, a range of other information SPECIFIC to CCCC3 only is displayed on the page. This information will be a heading, some text and then some form fields and/or checkboxes.

    Information specifically relating to CCCC1 and CCCC2 is NOT displayed at all as CCCC3 was selected.

    So:

    <List1>AAAA
    BBBB
    CCCC <SELECTED>

    <List2>CCCC1
    CCCC2
    CCCC3 <SELECTED>

    <NOT DISPLAYED>
    Welcome to CCCC1. Enter your name [text field]
    Are you Male [checkbox]
    Female [checkbox]

    <NOT DISPLAYED>
    Welcome to CCCC2. Enter your name [text field]
    Enter your address[text field]

    <DISPLAYED>(because CCCC3 was selected above)
    Welcome to CCCC3. Enter your name [text field]
    Enter your height [text field]
    Enter your weight [text field]

    I hope my request is a bit clearer this time (my apologies for not being clear enough the first time).
    Regards,

    Bruce A
    Reply With Quote Reply With Quote
  4. 11-25-2002 09:31 PM #4
    Zach Elfers
    Zach Elfers is offline Registered User
    Join Date
    Nov 2002
    Posts
    631
    ummm... Maybe you could do this by creating hidden divs for each of the options. When the visitor selects something from the list the div would become unhidden:

    <script language="JavaScript" type="text/JavaScript">

    function changeDiv(currMenu) {
    if (document.getElementById) {
    thisMenu = document.getElementById(currMenu).style
    if (thisMenu.display == "block") {
    thisMenu.display = "none"
    }
    else {
    thisMenu.display = "block"
    }
    return false
    }
    else {
    return true
    }
    }

    </script>

    <select name="CCCC1">
    <option onSelect="return changeDiv('cccc1');">option</option>
    </select>

    <div style="display:none;" id="cccc1">
    contents
    </div>

    I don't know if this is what you want, but I hope it helps.
    Reply With Quote Reply With Quote
  5. 11-25-2002 10:24 PM #5
    bja
    bja is offline Registered User
    Join Date
    Nov 2002
    Location
    Melbourne
    Posts
    3
    Thanks again Zach.

    I think this may do the trick once I work out how to put it in correctly.

    Here's a sample of the script I've put together (including your information).

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Test Form</title>
    <script LANGUAGE="JavaScript">
    <!--
    function setList(listItems)
    {
    secondlist=eval("'"+listItems.elements['AAAA'].options[listItems.elements['AAAA'].selectedIndex].text+"'");
    listItems.elements['AAAA1'].options.length=0;
    size=eval("lists['"+secondlist+"'].length");
    for(i=0;i<size;i++)
    {
    newval=eval("lists['"+secondlist+"'][i]");
    listItems.elements['AAAA1'].options[i]=new Option(newval);
    };
    listItems.elements['AAAA1'].selectedIndex=0;
    };
    lists=new Array();
    lists['AAAA'] = new Array();
    lists['AAAA'][0]="AAAA1";
    lists['AAAA'][1]="AAAA2";
    lists['AAAA'][2]="AAAA3";

    lists['BBBB'] = new Array();
    lists['BBBB'][0]="BBBB1";
    lists['BBBB'][1]="BBBB2";

    lists['CCCC'] = new Array();
    lists['CCCC'][0]="CCCC1";
    lists['CCCC'][1]="CCCC2";
    lists['CCCC'][2]="CCCC3";

    function changeDiv(currMenu)
    {
    if (document.getElementById)
    {
    thisMenu = document.getElementById(currMenu).style
    if (thisMenu.display == "block")
    {
    thisMenu.display = "none"
    }
    else
    {
    thisMenu.display = "block"
    }
    return false
    }
    else
    {
    return true
    }
    }

    //-->
    </script>

    </head>

    <BODY BGCOLOR=WHITE onLoad="setList(document.listsform)">

    <form name="listsform">

    <table border="0" width="800">
    <tbody>
    <tr>
    <td width="280" valign="baseline">
    <p><font face="Arial"><b>The First Field:</b></font></p>
    </td>
    <td width="500" colspan="2" valign="middle">
    <font face="Arial"><input type="text" name="No1" size="21"></font>
    </td>
    <td width="20" valign="baseline">
    </td>
    </tr>
    <tr>
    <td width="280" valign="baseline">
    <p><font face="Arial"><b>The Second Field:</b></font></p>
    </td>
    <td width="500" colspan="2" valign="middle">
    <font face="Arial"><input type="text" name="No2" size="21"></font>
    </td>
    <td width="20" valign="baseline">
    </td>
    </tr>
    <tr>
    <td width="250" valign="baseline">
    <p><font face="Arial"><b>Linked Option List - Master List:</b></font></p>
    </td>
    <td width="500" colspan="2" valign="middle">
    <font face="Arial">
    <select size="1" name="AAAA" onChange="setList(form)">

    <option>AAAA</option>
    <option>BBBB</option>
    <option>CCCC</option>

    </select>
    </font>
    </td>
    <td width="50" valign="baseline">
    </td>
    </tr>
    <tr>
    <td width="280" valign="baseline">
    <p><font face="Arial"><b>The Third Field:</b></font></p>
    </td>
    <td width="500" colspan="2" valign="middle">
    <font face="Arial"><input type="text" name="No3" size="21"></font>
    </td>
    <td width="20" valign="baseline">
    </td>
    </tr>
    <tr>
    <td width="280" valign="baseline">
    <p><font face="Arial"><b>The Forth Field:</b></font></p>
    </td>
    <td width="500" colspan="2" valign="middle">
    <font face="Arial"><input type="text" name="No4" size="21"></font>
    </td>
    <td width="20" valign="baseline">
    </td>
    </tr>
    <tr>
    <td width="280" valign="baseline">
    <p><font face="Arial"><b>Linked Option List - Sub. List:</b></font></p>
    </td>
    <td width="500" colspan="2" valign="middle">
    <font face="Arial">
    <select name="AAAA1" size="1">

    <option onSelect="return changeDiv('AAAA1');">option</option>
    <option></option>
    <option></option>
    <option></option>

    </select>
    </font>
    </td>
    <td width="20" valign="baseline">
    </td>
    </tr>
    </tboby>
    </table>
    <br>
    <br>

    From this point, I'd like to display each 'Div' based on the selection made in the Linked Option List - Sub List.
    For example:

    <hr>
    <DIV style="display:none;" ID="AAAA1">
    <table border="0" width="800">
    <tbody>
    <tr>
    <td width="100" valign="middle">
    <p><font face="Arial"><b>AAAA1:</b></font></p>
    </td>
    <td width="180" valign="middle">
    <font face="Arial">Item Name:</font>
    </td>
    <td width="520" valign="middle">
    <font face="Arial"><input type="text" name="ItemName" size="32"></font>
    </td>
    </tr>
    <tr>
    <td width="100" valign="middle">
    </td>
    <td width="180" valign="middle">
    <font face="Arial">Item Description:</font>
    </td>
    <td width="520" valign="middle">
    <font face="Arial"><input type="text" name="ItemDesc" size="20"></font>
    </td>
    </tr>

    </tbody>
    </table>
    </DIV>
    <br>

    I'd like to show the above example if AAAA1 was selected and I'd like to show AAAA2 (below) if that is selected. But not both at the same time.

    <hr>

    <DIV style="display:none;" ID="AAAA2">
    <table border="0" width="800">
    <tbody>
    <tr>
    <td width="100" valign="middle">
    <p><font face="Arial"><b>AAAA2:</b></font></p>
    </td>
    <td width="180" valign="middle">
    <font face="Arial">Item Name:</font>
    </td>
    <td width="520" valign="middle">
    <font face="Arial"><input type="text" name="ItemName" size="32"></font>
    </td>
    </tr>
    <tr>
    <td width="100" valign="middle">
    </td>
    <td width="180" valign="middle">
    <font face="Arial">Item Description:</font>
    </td>
    <td width="520" valign="middle">
    <font face="Arial"><input type="text" name="ItemDesc" size="20"></font>
    </td>
    </tr>
    <tr>
    <td width="100" valign="middle">
    </td>
    <td width="180" valign="middle">
    <font face="Arial">Item Quantity:</font>
    </td>
    <td width="520" valign="middle">
    <font face="Arial"><input type="text" name="ItemQuantity" size="20"></font>
    </td>
    </tr>

    </tbody>
    </table>
    </DIV>
    </body>
    </html>

    The DIVS are hidden but they don't 'unhide' when needed. If you can see the problem, please let me know. In the mean time, I'll try and work it out for myself (I'm reasonably new at this and its been a loooong day - so I'm hoping you can point out the obvious to me).

    Thanks again.
    Regards,

    Bruce A
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Forum Rules

 HTML5 Development Center



Recent Articles