onchange combo box, change url in div

**Peuplarchie** · Dec 14, 2009, 21:13

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(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) {

    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!

**mjpr** · Dec 15, 2009, 06:42

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

The SitePoint Forums have moved.

User Tag List

Thread: onchange combo box, change url in div

Thread Tools

Display

onchange combo box, change url in div

Bookmarks

Bookmarks

Posting Permissions