using php/ javascript to repopulate listbox
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.
PHP Code:
<!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>
Re: using php/ javascript to repopulate listbox
You need to use a little Javascript. If you want to be sleek, use the XMLHTTPRequest object to grab the list without refreshing the page or like the code above user a redirect to refresh the page.
Whatever you do I'd recommend you have a little PHP as possible inside the HTML, don't use the echo statement to produce HTML and use CSS instead of table to control the page layout.
1 Attachment(s)
Re: using php/ javascript to repopulate listbox
I looked into AJAX and it looks interesting. But I'm stuck in the
The error console shows:
Quote:
Error: xmlDoc.getElementsByTagName("book")[0] has no properties
Source File: responsexml.js
Line: 26
q was previously the id number of the table. I changed it to book because I intend to build another listbox of chapters in the selected book.
So
leads to the url in the js file where it says url=url+"?q="+str. str is found in function showUser (str) which leads to the select tag in book.php
