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 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2004
    Location
    UK
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dynamic combobox again..

    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,
    PHP Code:

    <? 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:
    Code:
    
    <!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>
    Last edited by earthsiege; 08-13-2005 at 01:38 PM.
    c:\dos...
    c:\dos\run...
    run dos run

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    An example

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

  • #3
    New Coder
    Join Date
    Jul 2004
    Location
    UK
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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;
     	}
    c:\dos...
    c:\dos\run...
    run dos run

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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

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

  • #5
    New Coder
    Join Date
    Jul 2004
    Location
    UK
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ahhhhhhhh,
    everything is clear to me now. thanks man just managed to get it working,
    thanks for all the help.
    c:\dos...
    c:\dos\run...
    run dos run


  •  

    Posting Permissions

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