PDA

View Full Version : populating 3 listboxes



gilgalbiblewhee
12-21-2007, 11: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-22-2007, 12:01 AM
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, 01: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, 03: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, 04:00 AM
I guess AJAX will be the better option then.

SeeIT Solutions
12-22-2007, 04: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, 04: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, 04: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, 04: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, 04: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, 04: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, 06: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.