PDA

View Full Version : dynamic combobox again..

earthsiege
08-13-2005, 01:33 PM
Hi guys,

i had a problem a few weeks back trying to get 3 comboboxes working together, well i have to say that i scrapped that idea and am working on new scheme.

the code im writing now is two comboboxes where the second combobox is populated depending on what is chosen in the first combobox. Both arrays come from a database. This part of the script is working fine.
What i need now is to be able to get the selected values from the second MULTIPLE combobox (select1), turn them into a single text line and insert it into a input field (textbox).

so the part which i really need you to take a look at is the AddCat() function.

The code i have a the moment is like below,


<? include "../includes/connect.inc"; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Accessible interdependent dropdowns</title>
<script language="JavaScript" type="text/javascript">
<!--

function popsel(choice){
var opts=new Array();
<?
$query1 = "select * from iyb_category";
$result1 = mysql_query($query1);
$number = mysql_num_rows($result1);
for ($i=1; $i < $number + 1; $i++){
$query2 = "select * from iyb_subCategory where cat_ids='$i'";
$result2 = mysql_query($query2);
print("opts[$i]=\"");
$numberB = mysql_num_rows($result2);
for ($z=0; $z < $numberB; $z++){
$subtype = mysql_result($result2,$z,"sub_category");
$subid = mysql_result($result2,$z,"sub_id");
print("$subid--$subtype,");
}
print("\".split(',');\n");
}
?>
document.forms[0].select1.options.length=0;
topop=opts[choice];
alert(choice);
document.forms[0].select1.options.length=topop.length;
for (i=0;i<topop.length;i++){
document.forms.oldexample.select1.options[i].text=topop[i];
}
}

function AddCat(){
var lol = document.forms[0].textbox;
var choices = document.forms[0].select1;
var r;
for (var i=0; i < choices.options.length; i++){
if (choices.options[i].selected)
r = r + " " + choices.options[i].text;
}
lol.value=r;
}
//-->
</script>
</head>
<body>
<table border="0" width="100%" summary="visual code examples">
<tr>
<td>
<form name="oldexample">
<table border="0">
<tr>
<td valign="top"><label for="choice">Choice</label></td>
<td>
<select name="choice" id="choice" size="10" onchange="popsel(this.options[this.selectedIndex].value)">
<?
$query1 = "select * from iyb_category";
$result1 = mysql_query($query1);
$A = mysql_num_rows($result1);
$type = mysql_result($result1,0,"cat_name");
for ($i=0; $i < $A; $i++){
$type= mysql_result($result1,$i,"cat_name");
$catid = mysql_result($result1,$i,"cat_id");
print("<option value='$catid' selected>$type</option>\n");
}
?>
</select>

</td>
<td valign="top">
<label for="select1">Options</label>
</td>
<td>
<select name="select1" size="10" id="select1">
<option value="s1_1">Choose a Choice</option>
</select>

</td>
<td>
<input type="button" class="button" onclick="Addcat()" value="Add >>" />
</td>
<td>
<input name="textbox">
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>

</body>
</html>


could ne1 help?
when i run the code this is the the html source code that i see:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Accessible interdependent dropdowns</title>
<script language="JavaScript" type="text/javascript">
<!--

function popsel(choice){
var opts=new Array();
opts[1]="1--plumber,2--carpenter,".split(',');
opts[2]="3--ISP,4--Hardware,".split(',');
opts[3]="5--Bank,".split(',');
document.forms[0].select1.options.length=0;
topop=opts[choice];
alert(choice);
document.forms[0].select1.options.length=topop.length;
for (i=0;i<topop.length;i++){
document.forms.oldexample.select1.options[i].text=topop[i];
}
}

function AddCat(){
var lol = document.forms[0].textbox;
var choices = document.forms[0].select1;
var r;
for (var i=0; i < choices.options.length; i++){
if (choices.options[i].selected)
r = r + " " + choices.options[i].text;
}
lol.value=r;
}
//-->
</script>
</head>
<body>
<table border="0" width="100%" summary="visual code examples">
<tr>
<td>
<form name="oldexample">
<table border="0">
<tr>
<td valign="top"><label for="choice">Choice</label></td>
<td>
<select name="choice" id="choice" size="10" onchange="popsel(this.options[this.selectedIndex].value)">
<option value='1' selected>Building</option>
<option value='2' selected>Computers</option>
<option value='3' selected>banking</option>
</select>

</td>
<td valign="top">
<label for="select1">Options</label>
</td>
<td>
<select name="select1" size="10" id="select1">
<option value="s1_1">Choose a Choice</option>
</select>

</td>
<td>
<input type="button" class="button" onclick="Addcat()" value="Add >>" />
</td>
<td>
<input name="textbox">
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>

</body>
</html>
vwphillips
08-13-2005, 01:54 PM
An example


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var AllOp='';

function ShowVal(obj){
lastop='';
for (i=0;i<obj.options.length;i++){
if (obj.options[i].selected){
if (!AllOp.match(obj.options[i].value)){
AllOp+=obj.options[i].value+',';
lastop+=obj.options[i].value+',';
}
}
}
document.getElementById('All').value=AllOp;
document.getElementById('Last').value=lastop;

}
//-->
</script>

</head>

<body>
<select id="fred" onchange="ShowVal(this);" multiple="multiple">
<option value="Val 0" >Option 0</option>
<option value="Val 1" >Option 1</option>
<option value="Val 2" >Option 2</option>
<option value="Val 3" >Option 3</option>
<option value="Val 4" >Option 4</option>
</select>
<br>
All <input id="All" value="" type=text size=100 onkeyup="return false;" ><br>
Last <input id="Last" value="" type=text size=100 onkeyup="return false;" ><br>

</body>

</html>
earthsiege
08-13-2005, 02:04 PM
thanks ,
thats exactly the kind of thing i was looking for. but the thing is when i try to customise it to my form i keep on getting the object expected error.

this is the changes that i made:

var AllOp='';
function ShowVal(){
var obj = document.forms[0].select1;
lastop='';
for (i=0;i<obj.options.length;i++){
if (obj.options[i].selected){
if (!AllOp.match(obj.options[i].value)){
AllOp+=obj.options[i].value+',';
}
}
}
document.getElementById('textbox').value=AllOp;
}
vwphillips
08-13-2005, 02:20 PM
cant see the point of
var obj = document.forms[0].select1;

if the select object is passed to the function, the name is irrelavent

but



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var AllOp='';
var AllOp='';
function ShowVal(){
var obj = document.forms[0].select1;
lastop='';
for (i=0;i<obj.options.length;i++){
if (obj.options[i].selected){
if (!AllOp.match(obj.options[i].value)){
AllOp+=obj.options[i].value+',';
}
}
}
document.getElementById('textbox').value=AllOp;
}
function ShowVal2(obj){
lastop='';
for (i=0;i<obj.options.length;i++){
if (obj.options[i].selected){
if (!AllOp.match(obj.options[i].value)){
AllOp+=obj.options[i].value+',';
lastop+=obj.options[i].value+',';
}
}
}
document.getElementById('All').value=AllOp;
document.getElementById('Last').value=lastop;

}
//-->
</script>

</head>

<body>
<form>
<select name="select1" id="select1" onchange="ShowVal(this);" multiple="multiple">
<option value="Val 0" >Option 0</option>
<option value="Val 1" >Option 1</option>
<option value="Val 2" >Option 2</option>
<option value="Val 3" >Option 3</option>
<option value="Val 4" >Option 4</option>
</select>
</form>
<br>
All <input id="textbox" value="" type=text size=100 onkeyup="return false;" ><br>
All <input id="All" value="" type=text size=100 onkeyup="return false;" ><br>
Last <input id="Last" value="" type=text size=100 onkeyup="return false;" ><br>

</body>

</html>
earthsiege
08-13-2005, 02:45 PM
ahhhhhhhh,
everything is clear to me now. thanks man just managed to get it working,
thanks for all the help.