SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post onchange combo box, change url in div

    Good day,
    I'm populating a combo box and I'm working to onchange the url of a div.based on the value selected.

    Here is my code :

    PHP Code:

    <?PHP
    $console 
    $_GET['console'];
    $dir "Names/";

    echo 
    "<select name=\"console\" onchange=\"load('console_info.php?console=<SCRIPT language=\"javascript\">document.write(this.options[this.selectedIndex].value)</script>','page')\" onmouseclick=\"this.focus()\">";
    // Open a known directory, and proceed to read its contents
    $dir_handle = @opendir($dir) or die("Unable to open $dir");
    $files = array();
    while(
    $file readdir($dir_handle))
    {
       if(
    $file != '.' and $file != '..')
       {
          
    $files[] = $file;
       }
    }
    sort($files);
    foreach(
    $files as $file)
    {
    if(
    $file != $console)
    {
       echo 
    "<option value='$dir/$file'>$file</option>\n";
    }else{
       echo 
    "<option value=\"$dir/$file\" selected=\"selected\">$file</option>\n";
    }
    }
    echo 
    "</select>";
    ?>
    I already have a script which make me able to change the url of a div with ajax, this works well.

    Here is the code which do that:

    PHP Code:


    <script type="text/javascript">
    function 
    ahah(urltarget) {
      
    document.getElementById(target).innerHTML ' Fetching data...';
      if (
    window.XMLHttpRequest) {
        
    req = new XMLHttpRequest();
      } else if (
    window.ActiveXObject) {
        
    req = new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (
    req != undefined) {
        
    req.onreadystatechange = function() {ahahDone(urltarget);};
        
    req.open("GET"urltrue);
        
    req.send("");
      }
    }  

    function 
    ahahDone(urltarget) {
      if (
    req.readyState == 4) { // only if req is "loaded"
        
    if (req.status == 200) { // only if "OK"
          
    document.getElementById(target).innerHTML req.responseText;
        } else {
          
    document.getElementById(target).innerHTML=" Error:\n"req.status "\n" +req.statusText;
        }
      }
    }

    function 
    load(namediv) {
        
    ahah(name,div);
        return 
    false;
    }
    </script>


    onchange="load('console_info.php?console?=','page')" 

    The part I have problem with is the part when the combo box get changed with an onchange, I don't know how to add after the console?= as the user change the option .

    example:

    PHP Code:

    <SCRIPT language=\"javascript\">document.write(this.options[this.selectedIndex].value)</script> 
    But if I do this, since i'm using php to write this it only write that.

    I don't know how can i make this work.

    Thanks!

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    Aveiro, Portugal
    Posts
    165
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    All you need is to change your onchange event.
    Use
    Code JavaScript:
    this.value
    instead of
    Code JavaScript:
    <SCRIPT language="javascript\">document.write(this.options[this.selectedIndex].value)</script>


    Complete example using your some of your code:
    Code HTML4Strict:
    <html>
    	<head>
    		<script type="text/javascript">
    			function ahah(url, target) 
    			{
    				document.getElementById(target).innerHTML = ' Fetching data...';
    				if (window.XMLHttpRequest) 
    				{
    					req = new XMLHttpRequest();
    				} else if (window.ActiveXObject) 
    				{
    					req = new ActiveXObject("Microsoft.XMLHTTP");
    				}
     
    				if (req != undefined) 
    				{
    					req.onreadystatechange = function() {ahahDone(url, target);};
    					req.open("GET", url, true);
    					req.send("");
    				}
    			}  
     
    			function ahahDone(url, target) 
    			{
    				if (req.readyState == 4) 
    				{ // only if req is "loaded"
    					if (req.status == 200) 
    					{ // only if "OK"
    					  document.getElementById(target).innerHTML = req.responseText;
    					} 
    					else 
    					{
    						document.getElementById(target).innerHTML=" Error:\n"+ req.status + "\n" +req.statusText;
    					}
    				}
    			}
     
    			function load(name, div) 
    			{
    				switch(name)
    				{
    					case "1":
    						site = "http://www.google.pt";
    						break;
    					case "2":
    						site = "http://www.wikipedia.org";
    						break;
    					case "3":
    						site = "http://www.bbc.co.uk";
    						break;
    				}
    				ahah(site,div);
    				return false;
    			}
     
    		</script>
    	</head>
     
    	<body>
    		<form id="frm1" name="frm1">
    			<select id="sel1" name="sel1" size="1" onchange="load(this.value, 'res1')">
    				<option value="0">-Select-</option>
    				<option value="1">Google</option>
    				<option value="2">Wikipedia</option>
    				<option value="3">BBC</option>
    			</select>
    		</form>
     
    		<br /><hr /><br />
     
    		<div id="res1" name="res1">
     
    		</div>
    	</body>
    </html>

    HTH
    Yours truely
    Mário Ramos


Bookmarks

Posting Permissions

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