dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: JAVAscript is fun... Almost!

  1. #1
    Join Date
    Dec 2005
    Posts
    268

    JAVAscript is fun... Almost!

    I am so close, but am banging my head to get it right. I wish to add and remove rows to a column as defined by two connected dropdown menus. The code almost works perfectly, but when I remove a row, my second dropdown doesn't display correct. Any thoughts? Also, even more important, any (hopfully constructive) critisim about my code. I am new, and am sure it is not the prettiest in the world.

    Thank you in advance, and thank you to those who have gotten me as far as I am!


    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Menus</title>
    <script language="JavaScript">

    var dropdown = new Array()

    dropdown[0] = new Array()
    dropdown[0][0] = "Type 0"
    dropdown[0][1] = "Type 0 Subset a"
    dropdown[0][2] = "Type 0 Subset b"
    dropdown[0][3] = "Type 0 Subset c"
    dropdown[0][4] = "Type 0 Subset d"

    dropdown[1] = new Array()
    dropdown[1][0] = "Type 1"
    dropdown[1][1] = "Type 1 Subset a"
    dropdown[1][2] = "Type 1 Subset b"
    dropdown[1][3] = "Type 1 Subset c"
    dropdown[1][4] = "Type 1 Subset d"

    dropdown[2] = new Array()
    dropdown[2][0] = "Type 2"
    dropdown[2][1] = "Type 2 Subset a"
    dropdown[2][2] = "Type 2 Subset b"
    dropdown[2][3] = "Type 2 Subset c"
    dropdown[2][4] = "Type 2 Subset d"

    function initiallize_page() {
    update_menu1();
    update_menu2();
    }

    function update_menu1() {
    var elem;
    for(var i=0;i<dropdown.length;i++) {
    elem = document.createElement('option');
    elem.text = dropdown[i][0];
    elem.value = dropdown[i][0];
    document.getElementById('box1').options.add(elem);
    }
    }

    function update_menu2() {
    var elem;
    for(i=1;i<(dropdown[0].length);i++) {
    elem = document.createElement('option')
    elem.text = dropdown[0][i]
    elem.value = dropdown[0][i]
    document.getElementById('box2').options.add(elem);
    }
    }

    function change_dd(obj,indx)
    {
    for(var i=obj.options.length;i>=0;i--) {
    obj.options.remove(0);
    }
    var elem;
    for(i=1;i<(dropdown[indx].length);i++) {
    elem = document.createElement('option')
    elem.text = dropdown[indx][i]
    elem.value = dropdown[indx][i]
    obj.options.add(elem);
    }
    }

    function add_item(obj1,obj2)
    {
    index=obj2.selectedIndex;
    if (!obj2.set){
    obj2.set=new Array();
    for (abc=0;abc<obj2.options.length;abc++){
    obj2.set[abc]=obj2.options[abc].text;
    obj2.ary=new Array();
    }
    }
    obj2.ary[index]=document.getElementById('TRClone').cloneNode(true);
    document.getElementById('TBdy1').appendChild(obj2.ary[index]);
    obj2.ary[index].sel=obj2;
    obj2.ary[index].getElementsByTagName('TD')[0].firstChild.data=obj1.value;
    obj2.ary[index].getElementsByTagName('TD')[1].firstChild.data=obj2.value;
    }

    function remove_item(obj){
    obj=obj.parentNode.parentNode;
    for (abc=0;abc<obj.sel.length;abc++){
    if (obj.sel.set[abc].match(obj.getElementsByTagName('TD')[0].firstChild.data)){
    obj.sel.options[abc].text=obj.sel.set[abc];
    }
    }
    // obj.sel.selectedIndex=0;
    document.getElementById('TBdy1').removeChild(obj);
    }

    </script>
    </head>

    <body onload="initiallize_page()">

    <select id="box1" onchange="change_dd(document.getElementById('box2'),this.selectedIndex)"></select>
    <select id="box2" ;></select>
    <input type="button" name value="Add" onclick="add_item(document.getElementById('box1'),document.getElementById('box2'));">
    <table border="0">
    <tbody id="TBdy1">
    </table>
    <div style="position:absolute;visibility:hidden;">
    <table>
    <tr id="TRClone">
    <td width="200">&nbsp;</td>
    <td width="200">&nbsp;</td>
    <td width="100"><input size="4"></td>
    <td width="100">
    <input type="button" name value="Remove" onclick="remove_item(this);"></td>
    </tr>
    </table>
    </div>

    </body>

    </html>
    </script>

    </html>
    </head>

  2. #2
    Join Date
    Dec 2005
    Location
    Queen Creek, AZ
    Posts
    1,564
    okay, just gonna take a quick look

    btw...you close tags at the end too many times


    can you explain what the functions are supposed to do?
    Last edited by CrazyMerlin; 12-13-2005 at 03:49 AM.

  3. #3
    Join Date
    Dec 2005
    Posts
    268
    Thank you for looking at it.

    In regards to function, one select option is used to limit choices, and a second select option is used to pinpoint the choice. The user can then "add" as many selected option as desired, and once "added", they can input a quanity or delete it. My next step which I haven't even started is to use php server side to act on the inputs.

    Thanks again!

  4. #4
    Join Date
    Dec 2005
    Location
    Queen Creek, AZ
    Posts
    1,564
    I haven't forgotten about this, just busy.

    Using php and javascript together is the best you can get. That is what I use all the time.

    I rarely write .htm pages anymore, they are pretty much all .php pages.

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles