...

View Full Version : populating 3 listboxes



gilgalbiblewhee
12-21-2007, 10:57 PM
I was converting old asp files to php.

But I'm stuck at this point.

I'm looking for a triple combo listboxes where one has "book" the other "chapter" and the third "verse". The book is populated by a database table. Once book is selected then chapter is populated and then verse.

Any tutorial related to this?

SeeIT Solutions
12-21-2007, 11:01 PM
There are a few ways to do it.

1) Populate all 3 entirely and use javascript to show which ones you need at the time.

2) Use AJAX to send a request that reloads just the select boxes each time.

3) Reload the entire page each time one is changed.

Which would you prefer?

gilgalbiblewhee
12-22-2007, 12:18 AM
But let's say the third option, if the page reloads then how will it keep memory of what's been selected?

I like this one:
http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm

I was using a recycled script from ASP, trying to convert it to php and feel that the same problem might reoccur. I want to use the example above.

Populating the first listbox is alright. But when I don't know how to populate the 2nd listbox.

Inigoesdr
12-22-2007, 02:11 AM
But let's say the third option, if the page reloads then how will it keep memory of what's been selected?
You would have it in a form which was posted via Javascript in the onchange tag for the select.

I like this one:
http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm

That one uses Javascript, and populates all of the options on pageload so it can be changed instantly without reloading. If you have a large number of options(books/chapters/etc.) this method isn't really feasible. The best method is the second suggestion(AJAX) if you have more than a few options.

gilgalbiblewhee
12-22-2007, 03:00 AM
I guess AJAX will be the better option then.

SeeIT Solutions
12-22-2007, 03:15 AM
Here is what I created when I was first learning AJAX.

This simply sends what you have typed in a textfield to a php script that returns some html with a div that contains that text. This can be done with javascript but it is a simple working version.

index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Test</title>
<script language="javascript">

var update = function (newtext) {
document.getElementById('txt').innerHTML = newtext;
}

var ajax = function (formid, url) {
var vars = '';
var f = document.getElementById(formid);
for (i = 0; i < f.elements.length; i++){
vars += f.elements[i].name + '=' + f.elements[i].value + '&';
}
var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", vars.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
if (request.responseText){
update(request.responseText);
}
}
};
request.send(vars);
}
</script>
</head>
<body>
<form id="form1" action="javascript: ajax('form1', 'process.php');">
<input name="test" type="text" />
<input name="submit" type="submit" value="Click me" />
</form>

<p>
<div id="txt"><b>User info will be listed here.</b></div>
</p>
</body>
</html>

process.php - processes the form data and gives it back inside a div, this is where you would generate the select boxes

echo '<div style="color:#CC0000;">'.$_POST['test'].'</div>';

gilgalbiblewhee
12-22-2007, 03:39 AM
I'm converting ASP to PHP:

<?php
/*'Option Explicit*/
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Read the King James Bible</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>
<?php
/*
Dim Book
Dim Chapter
Dim Verse

Dim DSNName
Dim Conn
Dim RS
Dim SQL1

Dim Keyword
*/
?>
<table border="0" bgcolor="#FFFCDC">
<td>
<form name="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');


/*
'This function checks to see that numerical values are valid
Function ValidateInt(SomeInt)
if IsNumeric(SomeInt) = False or SomeInt = "" then
SomeInt = 1
end if

ValidateInt = SomeInt
End Function


'Setting up search variables

Book = ValidateInt(request("book"))
Chapter = ValidateInt(request("Chapter"))
Verse = request("Verse")
*/
?>


<?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
/*
<a name="bcv"><select name="Book" size="5" style="width:150px;" onChange="go('refresh');"

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

echo "<a name='bcv'><select name='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>";
//mysql_close($con);

/*
Do until RS.eof
*/
?>
<?php
/*<option if int(book) = int(RS("Book")) then response.write "selected" end if
value="
=RS("Book")
?>">=RS("Book_Title")</option>
RS.movenext
if RS.eof then
exit do
end if
loop


</select>


RS.Close
*/
?>
</td>
<td colspan="1" align="center">
<?php
/*
'This SQL statement creates a list of books
SQL1 = "Select DISTINCT(Chapter), Book FROM Bible WHERE Book = " & Book & " ORDER BY Chapter ASC"
rs.Open sql1,conn, 1
*/
?>
<?php
/* <select name="Chapter" size="5" style="width:75px;" onChange="go('refresh');" 'onchange="go2();">*/
?>


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

echo "<select name='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>";
mysql_close($con);

/*
Do until RS.eof
*/
?>
<option <?php
/*if int(Chapter) = int(rs("Chapter")) then response.write "selected" end if*/
?> value="<?php
/*=RS("Chapter")*/
?>"><?php
/*=RS("Chapter")*/
?></option>

<?php
/*
rs.movenext
if rs.eof then
exit do
end if
Loop
*/
?>
</select>
I'm getting this error:

<select name='Chapter' size='5' style='width:150px;' onChange="go('refresh');">
<br />
<b>Warning</b>: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in <b>C:\xampp\htdocs\wheelofgod\search\cat\showbook.php</b> on line <b>192</b><br />

</select>

SeeIT Solutions
12-22-2007, 03:49 AM
add this line above the line that is failing...


var_dump($row);

I have a feeling $row isn't set at the time therefore the query can't complete properly which means it isn't a valid SQL result.

gilgalbiblewhee
12-22-2007, 03:53 AM
Here is what I created when I was first learning AJAX.

This simply sends what you have typed in a textfield to a php script that returns some html with a div that contains that text. This can be done with javascript but it is a simple working version.

index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Test</title>
<script language="javascript">

var update = function (newtext) {
document.getElementById('txt').innerHTML = newtext;
}

var ajax = function (formid, url) {
var vars = '';
var f = document.getElementById(formid);
for (i = 0; i < f.elements.length; i++){
vars += f.elements[i].name + '=' + f.elements[i].value + '&';
}
var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0");
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", vars.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
if (request.responseText){
update(request.responseText);
}
}
};
request.send(vars);
}
</script>
</head>
<body>
<form id="form1" action="javascript: ajax('form1', 'process.php');">
<input name="test" type="text" />
<input name="submit" type="submit" value="Click me" />
</form>

<p>
<div id="txt"><b>User info will be listed here.</b></div>
</p>
</body>
</html>

process.php - processes the form data and gives it back inside a div, this is where you would generate the select boxes

echo '<div style="color:#CC0000;">'.$_POST['test'].'</div>';

Would this apply to a triple listbox? I posted above that once the 1st listbox is populated I'm stuck with an error on the second listbox.

gilgalbiblewhee
12-22-2007, 03:55 AM
add this line above the line that is failing...


var_dump($row);

I have a feeling $row isn't set at the time therefore the query can't complete properly which means it isn't a valid SQL result.

Ok let me get this straight. I add that after the chapter's sql statement?
I think some things have to be redefines because they're reused both in the book population and then the chapter population.

SeeIT Solutions
12-22-2007, 03:59 AM
Yeah, that's right. var_dump() just dumps the entire variable (shows structure and contents of an array) to make sure it's what you expect. Post the result here.

Also, that AJAX I posted is just the basics, to make it work for you the best way would be to pass a <div> id with the function so it knows which part of html to update, then you can use it for any purpose, that really just sends and receives the information.

Inigoesdr
12-22-2007, 05:31 AM
Here (http://www.dhtmlgoodies.com/index.html?whichScript=ajax_chained_select) is a rough example that might help. You would have to modify their PHP code to get the data from the database, but that won't be too hard.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum