using php/ javascript to repopulate listbox

gilgalbiblewhee · Dec 26, 2007

I have a combo of 3 listboxes which I would like to repopulate ( the 2nd and the 3rd listboxes ) after the selection of the 1st listbox. I don't understand how the page should refresh itself once selected.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
		<script language="JavaScript" type="text/javascript">
		<!--
			function go(action) {

		// set variables pointing to the two forms we need
		var theForm = document.forms["myForm"];
		var otherForm = window.parent.document.forms["myForm"];

		// construct the "search" part of the URL from all the elements
		var query = "?Book=" + theForm.Book.options[theForm.Book.selectedIndex].value;
		query += "&Chapter=" + theForm.Chapter.options[theForm.Chapter.selectedIndex].value;

		// test to see if a verse has been selected, if not we won't pass the values
		if( theForm.verse.selectedIndex != -1 ) {
			for( var i=0; i < theForm.verse.options.length; i++ ) {
				if( theForm.verse.options[i].selected ) {
					query += "&Verse=" + theForm.verse.options[i].value;
				}
			}
		}

		query += "&Keyword=" + escape(otherForm.Keyword.value);
		query += "&Keywordb=" + escape(otherForm.Keywordb.value);
		query += "&Keywordc=" + escape(otherForm.Keywordc.value);
		query += "&Keywordd=" + escape(otherForm.Keywordd.value);
		query += "&Keyworde=" + escape(otherForm.Keyworde.value);
		query += "&Keywordf=" + escape(otherForm.Keywordf.value);
		query += "&";

		// either redirect this page or the child frame depending on which select was changed
		if(action == "refresh") {
			location.href = "showbook.php" + query;
		} else {
			ifrVerse.location.href = "showverse.php" + query;
		}

		}
	//-->
	</script>
</head>
<body>
	<table border="0" bgcolor="#FFFCDC">
		<td>
			<form name="myForm" id="myForm" action="showverse.php" method="get" target="ifrVerse">
				<table border="0" bgcolor="#FFFCDC">
					<tr>
						<th align="center" color="white">
					</tr>
					 <tr>
					 	<th colspan="1" align="center">book</th>
					 	<th colspan="1" align="center">chapter</th>
					 </tr>
					<tr>
						<td>
							 <?php
							     require_once('mysql.php');
?>

				<input type="hidden" name="Keyword" value="" />
				<input type="hidden" name="Keywordb" value="" />
				<input type="hidden" name="Keywordc" value="" />
				<input type="hidden" name="Keywordd" value="" />
				<input type="hidden" name="Keyworde" value="" />
				<input type="hidden" name="Keywordf" value="" />

<?php
									$result = mysql_query("SELECT DISTINCT book_title, book FROM bible");

								echo "<a name='bcv'><select name='Book' id='Book' size='5' style='width:150px;' onChange=\"go('refresh');\"></a>"."\n";
								while($row = mysql_fetch_array($result))
								  {

								  echo "<option value='" . $row['book'] . "'>";
								  echo $row['book_title'];
								  echo "</option>"."\n";

								  }
								echo "</select>"."\n";
?>
							</td>
							<td colspan="1" align="center">

<?php
									$book = $_GET["Book"];
									$result = mysql_query("SELECT DISTINCT chapter, book FROM bible WHERE book = '" . $book . "'");

								echo "<select name='Chapter' id='Chapter' size='5' style='width:150px;' onChange=\"go('refresh');\">"."\n";
								while($row = mysql_fetch_array($result))
								  {

								  echo "<option value='" . $row['chapter'] . "'>";
								  echo $row['chapter'];
								  echo "</option>"."\n";

								  }
								echo "</select>"."\n";
								mysql_close($con);									
?>
							</td>
							</tr>
							<td colspan="2" align="center">
							</td>


					</tr>
					<tr colspan="2" align="center">
						<th colspan="3" align="center" color="black">
							verse
						</th>
					</tr>
						<td colspan="2" align="center">

								<select multiple name="verse" size="5" style="width:120;" onChange="go('update');"> 
						</td>
					<tr>
						<td align="center" colspan="2">
							<iframe name="ifrVerse" id="ifrVerse" src="blank.php" style="height:800px; width:250px;border:0;"></iframe>
						</td>
					</tr>
				</table>
			</form>
		</td>
	</table>
</body>
</html>

Valdhor · Dec 27, 2007

I don't understand; What's your question?

From the sample code you posted, when an item is selected in the book or chapter list boxes, the javascript will run which creates a query string from the selected items and then loads showbook.php with the query string appended.

gilgalbiblewhee · Jan 1, 2008

The first list is loaded from the database table. Upon selecting there should be a refreshing of page and the second list to load. But the script above doesn't work.

gilgalbiblewhee · Jan 2, 2008

I'm looking at:
http://www.dhtmlgoodies.com/index.html?whichScript=ajax_chained_select

When I test it it shows error:

Error: sack is not defined
Source File: .../listboxcombo/listcom.php
Line: 54

listcom.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
body{
	background-repeat:no-repeat;
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	height:100%;
	background-color: #FFF;
	margin:0px;
	padding:0px;
}
select{
	width:150px;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
/************************************************************************************************************
Ajax chained select
Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com


************************************************************************************************************/	
var ajax = new Array();

function getCityList(sel)
{
	var countryCode = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
	if(countryCode.length>0){
		var index = ajax.length;
		ajax[index] = new sack();

	ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
	ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
	ajax[index].runAJAX();		// Execute AJAX function
}
}

function createCities(index)
{
	var obj = document.getElementById('dhtmlgoodies_city');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
	var category = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
	if(category.length>0){
		var index = ajax.length;
		ajax[index] = new sack();

	ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
	ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
	ajax[index].runAJAX();		// Execute AJAX function
}
}
function createSubCategories(index)
{
	var obj = document.getElementById('dhtmlgoodies_subcategory');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<form action="" method="post">
<table>
	<tr>
		<td>Country: </td>
		<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
			<option value="">Select a country</option>
			<option value="dk">Denmark</option>
			<option value="no">Norway</option>
			<option value="us">US</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>City: </td>
		<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">

	</select>
	</td>
</tr>
<tr>
	<td colspan="2"><b>Second example</b></td>
</tr>
<tr>
	<td>Category: </td>
	<td><select id="dhtmlgoodies_category" name="dhtmlgoodies_category" onchange="getSubCategoryList(this)">
		<option value="">Select a category</option>
		<option value="1">Cars</option>
		<option value="2">Boats</option>
		<option value="3">Airplanes</option>
	</select>
	</td>
</tr>
<tr>
	<td>Sub category: </td>
	<td><select id="dhtmlgoodies_subcategory" name="dhtmlgoodies_subcategory">

	</select>
	</td>
</tr>
</table>
</form>


</body>
</html>

more to come.

gilgalbiblewhee · Jan 2, 2008

getCities.php

<?php

if(isset($_GET['countryCode'])){

  switch($_GET['countryCode']){

case "no":
  echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
  echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
  echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
  echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";

  break;
case "dk":

  echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
  echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
  echo "obj.options[obj.options.length] = new Option('Odense','13');\n";

  break;
case "us":

  echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
  echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
  echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
  echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
  echo "obj.options[obj.options.length] = new Option('New York','25');\n";
  echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
  echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";

  break;
  }  

}

?>

gilgalbiblewhee · Jan 2, 2008

js/ajax.js

// JavaScript Document
/* Simple AJAX Code-Kit (SACK) v1.6.1 */
/* ©2005 Gregory Wild-Smith */
/* www.twilightuniverse.com */
/* Software licenced under a modified X11 licence,
   see documentation or authors website for more details */

function sack(file) {
	this.xmlhttp = null;

this.resetData = function() {
	this.method = "POST";
	this.queryStringSeparator = "?";
	this.argumentSeparator = "&";
	this.URLString = "";
	this.encodeURIString = true;
	this.execute = false;
	this.element = null;
	this.elementObj = null;
	this.requestFile = file;
	this.vars = new Object();
	this.responseStatus = new Array(2);
};

this.resetFunctions = function() {
	this.onLoading = function() { };
	this.onLoaded = function() { };
	this.onInteractive = function() { };
	this.onCompletion = function() { };
	this.onError = function() { };
	this.onFail = function() { };
};

this.reset = function() {
	this.resetFunctions();
	this.resetData();
};

this.createAJAX = function() {
	try {
		this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e1) {
		try {
			this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e2) {
			this.xmlhttp = null;
		}
	}

	if (! this.xmlhttp) {
		if (typeof XMLHttpRequest != "undefined") {
			this.xmlhttp = new XMLHttpRequest();
		} else {
			this.failed = true;
		}
	}
};

this.setVar = function(name, value){
	this.vars[name] = Array(value, false);
};

this.encVar = function(name, value, returnvars) {
	if (true == returnvars) {
		return Array(encodeURIComponent(name), encodeURIComponent(value));
	} else {
		this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
	}
}

this.processURLString = function(string, encode) {
	encoded = encodeURIComponent(this.argumentSeparator);
	regexp = new RegExp(this.argumentSeparator + "|" + encoded);
	varArray = string.split(regexp);
	for (i = 0; i < varArray.length; i++){
		urlVars = varArray[i].split("=");
		if (true == encode){
			this.encVar(urlVars[0], urlVars[1]);
		} else {
			this.setVar(urlVars[0], urlVars[1]);
		}
	}
}

this.createURLString = function(urlstring) {
	if (this.encodeURIString && this.URLString.length) {
		this.processURLString(this.URLString, true);
	}

	if (urlstring) {
		if (this.URLString.length) {
			this.URLString += this.argumentSeparator + urlstring;
		} else {
			this.URLString = urlstring;
		}
	}

	// prevents caching of URLString
	this.setVar("rndval", new Date().getTime());

	urlstringtemp = new Array();
	for (key in this.vars) {
		if (false == this.vars[key][1] && true == this.encodeURIString) {
			encoded = this.encVar(key, this.vars[key][0], true);
			delete this.vars[key];
			this.vars[encoded[0]] = Array(encoded[1], true);
			key = encoded[0];
		}

		urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
	}
	if (urlstring){
		this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
	} else {
		this.URLString += urlstringtemp.join(this.argumentSeparator);
	}
}

this.runResponse = function() {
	eval(this.response);
}

this.runAJAX = function(urlstring) {
	if (this.failed) {
		this.onFail();
	} else {
		this.createURLString(urlstring);
		if (this.element) {
			this.elementObj = document.getElementById(this.element);
		}
		if (this.xmlhttp) {
			var self = this;
			if (this.method == "GET") {
				totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
				this.xmlhttp.open(this.method, totalurlstring, true);
			} else {
				this.xmlhttp.open(this.method, this.requestFile, true);
				try {
					this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
				} catch (e) { }
			}

			this.xmlhttp.onreadystatechange = function() {
				switch (self.xmlhttp.readyState) {
					case 1:
						self.onLoading();
						break;
					case 2:
						self.onLoaded();
						break;

					case 3:
						self.onInteractive();
						break;
					case 4:
						self.response = self.xmlhttp.responseText;
						self.responseXML = self.xmlhttp.responseXML;
						self.responseStatus[0] = self.xmlhttp.status;
						self.responseStatus[1] = self.xmlhttp.statusText;

						if (self.execute) {
							self.runResponse();
						}

						if (self.elementObj) {
							elemNodeName = self.elementObj.nodeName;
							elemNodeName.toLowerCase();
							if (elemNodeName == "input"
							|| elemNodeName == "select"
							|| elemNodeName == "option"
							|| elemNodeName == "textarea") {
								self.elementObj.value = self.response;
							} else {
								self.elementObj.innerHTML = self.response;
							}
						}
						if (self.responseStatus[0] == "200") {
							self.onCompletion();
						} else {
							self.onError();
						}

						self.URLString = "";
						break;
				}
			};

			this.xmlhttp.send(this.URLString);
		}
	}
};

this.reset();
this.createAJAX();
}

gilgalbiblewhee · Jan 2, 2008

ok I noticed that the js file and the php was to be inserted in the getCities.php ( not sure where exactly but I assume in between the select tags of the 2nd listbox ) was not in the proper place. But when I fixed that I got this error:

Error: syntax error
Source File: listboxcombo/getCities.php
Line: 65
Source Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
body{
	background-repeat:no-repeat;
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	height:100%;
	background-color: #FFF;
	margin:0px;
	padding:0px;
}
select{
	width:150px;
}
</style>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
/************************************************************************************************************
Ajax chained select
Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.

Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com


************************************************************************************************************/	
var ajax = new Array();

function getCityList(sel)
{
	var countryCode = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_city').options.length = 0;	// Empty city select box
	if(countryCode.length>0){
		var index = ajax.length;
		ajax[index] = new sack();

	ajax[index].requestFile = 'getCities.php?countryCode='+countryCode;	// Specifying which file to get
	ajax[index].onCompletion = function(){ createCities(index) };	// Specify function that will be executed after file has been found
	ajax[index].runAJAX();		// Execute AJAX function
}
}

function createCities(index)
{
	var obj = document.getElementById('dhtmlgoodies_city');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}


function getSubCategoryList(sel)
{
	var category = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_subcategory').options.length = 0;	// Empty city select box
	if(category.length>0){
		var index = ajax.length;
		ajax[index] = new sack();

	ajax[index].requestFile = 'getSubCategories.php?category='+category;	// Specifying which file to get
	ajax[index].onCompletion = function(){ createSubCategories(index) };	// Specify function that will be executed after file has been found
	ajax[index].runAJAX();		// Execute AJAX function
}
}
function createSubCategories(index)
{
	var obj = document.getElementById('dhtmlgoodies_subcategory');
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}		
</script>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Listbox Combo</title>
</head>

<body>

<form action="" method="post">
<table>
	<tr>
		<td>Country: </td>
		<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
			<option value="">Select a country</option>
			<option value="dk">Denmark</option>
			<option value="no">Norway</option>
			<option value="us">US</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>City: </td>
		<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
		<?php

if(isset($_GET['countryCode'])){

  switch($_GET['countryCode']){

case "no":
  echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
  echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
  echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
  echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";

  break;
case "dk":

  echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
  echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
  echo "obj.options[obj.options.length] = new Option('Odense','13');\n";

  break;
case "us":

  echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
  echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
  echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
  echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
  echo "obj.options[obj.options.length] = new Option('New York','25');\n";
  echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
  echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";

  break;
  }  

}

?>
		</select>
		</td>
	</tr>
	<tr>
		<td colspan="2"><b>Second example</b></td>
	</tr>
	<tr>
		<td>Category: </td>
		<td><select id="dhtmlgoodies_category" name="dhtmlgoodies_category" onchange="getSubCategoryList(this)">
			<option value="">Select a category</option>
			<option value="1">Cars</option>
			<option value="2">Boats</option>
			<option value="3">Airplanes</option>
		</select>
		</td>
	</tr>
	<tr>
		<td>Sub category: </td>
		<td><select id="dhtmlgoodies_subcategory" name="dhtmlgoodies_subcategory">

	</select>
	</td>
</tr>
</table>
</form>


</body>
</html>

gilgalbiblewhee · Jan 2, 2008

Oh yeah line 65 is:

eval(ajax[index].response);	// Executing the response from Ajax as Javascript code

using php/ javascript to repopulate listbox

Ggilgalbiblewhee

VValdhor

Ggilgalbiblewhee

Ggilgalbiblewhee

Ggilgalbiblewhee

Ggilgalbiblewhee

Ggilgalbiblewhee

Ggilgalbiblewhee