Adding item from drop down list to an array

taypandt · 10-05-2012, 09:28 AM

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?

vwphillips · 10-05-2012, 11:26 AM

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>

taypandt · 10-05-2012, 02:30 PM

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.

xelawho · 10-05-2012, 02:44 PM

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>

vwphillips · 10-05-2012, 04:03 PM

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>

taypandt · 10-06-2012, 06:07 AM

Quote:

Originally Posted by xelawho

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.

xelawho · 10-06-2012, 08:26 AM

where is it supposed to?

taypandt · 10-06-2012, 09:25 AM

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.

xelawho · 10-06-2012, 04:29 PM

Correct. That is what the code is doing now. What would you like it to do?

taypandt · 10-06-2012, 07:07 PM

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!