...

View Full Version : 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:

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:

<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
<!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?


<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
<!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
like so?


<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
<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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum