Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Adding item from drop down list to an array

    I'm trying to write a function that will take a selected item from a drop down list and add it to an array, which is then printed in a text field on the page, but I'm having trouble referencing the value.

    Here's my function:
    Code:
    function addTool() {
            if (document.forms[0].toolList.value == "")
                window.alert("You must choose at least one item to purchase.");
            else {
                var dd1 = document.getElementById('toolList');
                var toolArray = new Array();
                var count = 0;
                toolArray.push(dd1.options[dd1.selectedIndex].text);
                document.forms[0].buyList.options[count].value = toolArray[count];
                count++;
                }
            }
    And the code which tries to use it:
    Code:
    <select name="toolList">
            <option value="" style="display:none;"></option>
            <option value="cDrill">Cordless Drill</option>
            <option value="cScrew">Cordless Screwdriver</option>
            <option value="circSaw">Circular Saw</option>
            <option value="bandsaw">Bandsaw </option>
            <option value="discsander">Disc Sander</option>
            </select></p>
            <p><select name = "buyList" multiple = "multiple"
                            size = "10" style = "width: 500px">
                            <option value = "none">Items to be purchased</option>
                            </select></p>
            <p><input type = "button" value = "Add Tool"
                            onclick = "addTool();" style = "width: 120px" />
    Right now I have no idea if I'm even close to having this correct. What would be the best way to do this?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var ToolArray=[];
    function addTool(){
     var frm=document.forms[0],s=frm['toolList'],i=s.selectedIndex,tool=s.options[i].text,z0=0;
     if (i>0){
      for (;z0<ToolArray.length;z0++){
       if (ToolArray[z0]==tool){
        return; // only allows one entry for each tool
       }
      }
      ToolArray.push(tool);
      frm['result'].value=ToolArray.join('/n');
     }
    }
    
    
    /*]]>*/
    </script></head>
    
    <body>
     <form>
     <select name="toolList">
      <option value="" style="display:none;"></option>
      <option value="cDrill">Cordless Drill</option>
      <option value="cScrew">Cordless Screwdriver</option>
      <option value="circSaw">Circular Saw</option>
      <option value="bandsaw">Bandsaw </option>
      <option value="discsander">Disc Sander</option>
     </select>
     </p>
     <p>
     <select name = "buyList" multiple = "multiple" size = "10" style = "width: 500px">
      <option value = "none">Items to be purchased</option>
     </select></p>
     <p>
     <textarea name="result" rows="10" cols="50"></textarea>
     <input type = "button" value = "Add Tool"  onclick = "addTool();" style = "width: 120px" />
    </form>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Is there a way to make the selected items appear in a selectable list of options, like I have in my original code? I'd like to add a "remove item" button, and for that I need to be able to select the items that appear on the new list.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,021
    Thanks
    56
    Thanked 566 Times in 563 Posts
    like so?
    Code:
    <body>
    <form>
    <select id="toolList">
            <option value="" style="display:none;"></option>
            <option value="cDrill">Cordless Drill</option>
            <option value="cScrew">Cordless Screwdriver</option>
            <option value="circSaw">Circular Saw</option>
            <option value="bandsaw">Bandsaw </option>
            <option value="discsander">Disc Sander</option>
            </select></p>
            <p><select name = "buyList" multiple = "multiple" size = "10" style = "width: 500px">
                            <option value = "none">Items to be purchased</option>
                            </select></p>
            <p><input type = "button" value = "Add Tool" onclick = "addTool();" style = "width: 120px" />
    </form>
    
    </body>
    <script>
    var toolArray = [];
    var count = 0;
    function addTool() {
            if (document.getElementById('toolList').value == "")
                window.alert("You must choose at least one item to purchase.");
            else {
                var dd1 = document.getElementById('toolList');
                toolArray.push(dd1.options[dd1.selectedIndex].text);
                document.forms[0].buyList.options[count]=new Option(toolArray[count], toolArray[count++]);
                }
            }		
    		</script>

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var ToolArray=[];
    function addTool(){
     var frm=document.forms[0],s=frm['toolList'],b=frm['buyList'],i=s.selectedIndex,txt=s.options[i].text,v=s.options[i].value,z0=0,z1=0;
     if (i>0){
      for (;z0<ToolArray.length;z0++){
       if (ToolArray[z0][0]==txt&&ToolArray[z0][1]==v){
        return; // only allows one entry for each tool
       }
      }
      ToolArray.push([txt,v]);
      b.options.length=1;
      for (;z1<ToolArray.length;z1++){
       b.options[z1+1]=new Option(ToolArray[z1][0],ToolArray[z1][1]);
      }
     }
     else {
      alert('select a product');
     }
    }
    
    function removeTool(){
     var frm=document.forms[0],b=frm['buyList'],i,z0=0;
     for (var z0=0;z0<ToolArray.length;z0++){
      i=b.selectedIndex;
      if (i>0&&ToolArray[z0][0]==b.options[i].text&&ToolArray[z0][1]==b.options[i].value){
       b.removeChild(b.options[z0+1]);
       ToolArray.splice(z0--,1);
      }
     }
    }
    
    /*]]>*/
    </script></head>
    
    <body>
     <form>
     <select name="toolList">
      <option value="" style="display:none;"></option>
      <option value="cDrill">Cordless Drill</option>
      <option value="cScrew">Cordless Screwdriver</option>
      <option value="circSaw">Circular Saw</option>
      <option value="bandsaw">Bandsaw </option>
      <option value="discsander">Disc Sander</option>
     </select>
     </p>
     <p>
     <input type = "button" value = "Add Tool"  onclick = "addTool();" style = "width: 120px" />
     <br />
     <br />
     <select name = "buyList" multiple = "multiple" size = "10" style = "width: 500px">
      <option value = "none">Items to be purchased</option>
     </select></p>
     <input type = "button" value = "Remove Tool"  onclick = "removeTool();" style = "width: 120px" />
     <p>
    </form>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New Coder
    Join Date
    Aug 2012
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    like so?
    Code:
    <body>
    <form>
    <select id="toolList">
            <option value="" style="display:none;"></option>
            <option value="cDrill">Cordless Drill</option>
            <option value="cScrew">Cordless Screwdriver</option>
            <option value="circSaw">Circular Saw</option>
            <option value="bandsaw">Bandsaw </option>
            <option value="discsander">Disc Sander</option>
            </select></p>
            <p><select name = "buyList" multiple = "multiple" size = "10" style = "width: 500px">
                            <option value = "none">Items to be purchased</option>
                            </select></p>
            <p><input type = "button" value = "Add Tool" onclick = "addTool();" style = "width: 120px" />
    </form>
    
    </body>
    <script>
    var toolArray = [];
    var count = 0;
    function addTool() {
            if (document.getElementById('toolList').value == "")
                window.alert("You must choose at least one item to purchase.");
            else {
                var dd1 = document.getElementById('toolList');
                toolArray.push(dd1.options[dd1.selectedIndex].text);
                document.forms[0].buyList.options[count]=new Option(toolArray[count], toolArray[count++]);
                }
            }		
    		</script>

    I like this code because it's simpler than the other version posted here, but it doesn't work for me. It doesn't print the selected item into the box where it's supposed to.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,021
    Thanks
    56
    Thanked 566 Times in 563 Posts
    where is it supposed to?

  • #8
    New Coder
    Join Date
    Aug 2012
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Code:
     <p><select name = "buyList" multiple = "multiple" size = "10" style = "width: 500px">
                            <option value = "none">Items to be purchased</option>
                            </select></p>
    This makes a box similar to a drop-down menu, except with no drop-down. The items that are placed on it are individually selectable.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,021
    Thanks
    56
    Thanked 566 Times in 563 Posts
    Correct. That is what the code is doing now. What would you like it to do?

  • #10
    New Coder
    Join Date
    Aug 2012
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I used the code you posted and it's not working, nothing happens when I click "Add Tool"

    EDIT: Nevermind! I looked at it again and saw that I was missing a brace. It's working now. Thank you!
    Last edited by taypandt; 10-06-2012 at 08:11 PM.


  •  

    Posting Permissions

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