PDA

View Full Version : accessing values of array type list box[]



bhakti_thakkar
Sep 6th, 2007, 08:44 AM
hi all,
i have a php page in which i have a listbox as below:

<select NAME="scopeid[]" id="scopeid[]" class=sel1 multiple size=4>
<? while ($qrrs=mysql_fetch_assoc($qrrid)) { ?>
<option value="<?=$qrrs['scopeid']?>" <? if($db->isinarray($scopeid,$qrrs['scopeid']) ){ print " selected "; } ?>><?=$qrrs['scopedescription']?></option>
<? } ?>
</select>
<input type="button" name="add" value="Add" class=button onclick="Add()" style="width:40">

how do i pass the values of listbox[] to javascript?

below is my javascript:

function Add() {
Obj=(document.getElementById("scopeid[]"));
alert(Obj.value);
}

alert gives me only the last selected value and not the entire values. i.e if the user has selected 2 ,3 and 4th option, it gives me value of only 4th item instead of all three. how to do it?
:confused:
how do i access its value?

Thanks

chump2877
Sep 6th, 2007, 10:19 AM
put this in an HTML file and observe how it works:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang=en>
<head>
<title></title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<head>
<body>
<select id="listbox" multiple size="5">
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5">Item 5</option>
</select>
<input type="button" value="Add" onclick="Add();">
<p id="selectedVals" style="color:red;font-weight:bold"></p>
<script type="text/javascript">
function Add()
{
var optionsColl = document.getElementById("listbox").getElementsByTagName("option");
var results = new Array();
var resultString = "";
var k = 0;
for (var i=0; i<optionsColl.length; i++)
{
if (optionsColl[i].selected)
{
results[k] = optionsColl[i].value;
k++;
}
}
for (var i=0; i<results.length; i++)
{
resultString += results[i];
if (i != results.length - 1)
resultString += ", ";
}
document.getElementById("selectedVals").innerHTML = resultString;
}
</script>
</body>
</html>

Kor
Sep 6th, 2007, 10:22 AM
Try this:


function Add() {
var opt=document.getElementById("scopeid[]").getElementsByTagName('option');
var v=[], i=0, o;
while(o=opt[i++]){
o.selected?v[v.length]=o.value:null;
}
alert(v)
}

bhakti_thakkar
Sep 6th, 2007, 01:26 PM
Million Thanks :thumbsup: :thumbsup:


put this in an HTML file and observe how it works:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang=en>
<head>
<title></title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<head>
<body>
<select id="listbox" multiple size="5">
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5">Item 5</option>
</select>
<input type="button" value="Add" onclick="Add();">
<p id="selectedVals" style="color:red;font-weight:bold"></p>
<script type="text/javascript">
function Add()
{
var optionsColl = document.getElementById("listbox").getElementsByTagName("option");
var results = new Array();
var resultString = "";
var k = 0;
for (var i=0; i<optionsColl.length; i++)
{
if (optionsColl[i].selected)
{
results[k] = optionsColl[i].value;
k++;
}
}
for (var i=0; i<results.length; i++)
{
resultString += results[i];
if (i != results.length - 1)
resultString += ", ";
}
document.getElementById("selectedVals").innerHTML = resultString;
}
</script>
</body>
</html>

bhakti_thakkar
Sep 6th, 2007, 01:26 PM
Millon Thanks to you too as i was going nuts


Try this:


function Add() {
var opt=document.getElementById("scopeid[]").getElementsByTagName('option');
var v=[], i=0, o;
while(o=opt[i++]){
o.selected?v[v.length]=o.value:null;
}
alert(v)
}

bhakti_thakkar
Sep 6th, 2007, 01:28 PM
Thanks chump2877 and Kor,

Both the scripts are running fantastic.i will put the best out of both in my page.
:p

Kor
Sep 6th, 2007, 01:47 PM
Both codes are identical as methods (circle through the options and construct an array with the values of the selected options' values). Except that I tried to build a refined code (on using a ternary operator, JSON, the self length of the array while adding it's elements, and a while loop -which is faster - instead of a for loop)