...

View Full Version : using php/ javascript to repopulate listbox



gilgalbiblewhee
12-26-2007, 07:42 AM
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>

Fou-Lu
12-27-2007, 01:22 AM
This seems like an ajax sort of task.
There are millions of tutorials on the net for how to implement ajax requests, and you can probably get a lot of information from the js forum here. Essentially the ajax sends a request to the server requesting specific information (in your case, the data to display within the other list boxes), and using javascript you can populate the information into the correct locations.
Check into ajax, and post back if you need help with it at all, its really simple when you get the hang of it. The best part of it is, a lot of the code you currently have is compatible with the ajax requests, all you need to do is use an ajax send() instead of a window.location! The downside is, you need to capture the results and do something with them.
Oh, and on a quick sidenote, you can send arrays of data through the uri querystring, you don't need to refer to them as keyword[a...d], you can extract them one at a time if you would like.

Hope that helps to point you in the right direction!

gilgalbiblewhee
12-27-2007, 02:16 AM
Well what I have in mind is to populate a listbox from the database table. I'm using AJAX with php.

oesxyl
12-27-2007, 03:12 AM
this is a short tutorial about some ajax basic things, I don't know if you need it but just in case.

http://www.xul.fr/en-xml-ajax.html

about your question:
you can use the onchange attribute for the first list to trigger a request to populate the second listbox with a html select generated by a php file where you use your mysql query.
you can do the same thing for the second listbox but this time you trigger the last listbox.

I hope this help and I don't confuze you.:), anyway post your question here.

best regards

Meltdown
12-27-2007, 04:25 AM
I think he might be talking about something like this?
http://dynamicdrive.com/dynamicindex16/formdependency.htm

If not, apologies.

oesxyl
12-27-2007, 05:58 AM
I think he might be talking about something like this?
http://dynamicdrive.com/dynamicindex16/formdependency.htm

me too, :D

I think that this make somehow clear how can be done:

in your html file or in a js file you have:


<script type="text/javascript">
function create_request(){
var req = false;
try {
req = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e2) {
try {
req = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e3) {
try {
req = new XMLHttpRequest();
} catch (e1) {
req = false;
}
}
}
return req;
}

function first_trigger(){

req = create_request();
req.onreadystatechange = function(){
var c = document.getElementById('cl1');
if(req.readyState){
if(req.readyState == 4){
if(req.status == 200){
c.innerHTML = req.responseText;
}
}
}
}

var o = document.getElementById('l1');
req.open('POST',"firstfile.php",true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send('fsv=' + o.value);
}

function second_trigger(){
req = create_request();

req.onreadystatechange = function(){
var c = document.getElementById('cl2');
if(req.readyState){
if(req.readyState == 4){
if(req.status == 200){
c.innerHTML = req.responseText;
}
}
}
}

var o = document.getElementById('l2');
req.open('POST',"secondfile.php",true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
req.send('ssv=' + o.value);
}
</script>


this part in the same html file:


<p>
<select id="l1" onchange="first_trigger();">
<option value="1">First of 1st</option>
<option value="2">Second of 1st</option>
</select>
</p>
<p id="cl1"></p>
<p id="cl2"></p>


and this is the content of firstfile.php:


<?php
// used to trace $_POST values
// print_r($_POST);

/* - process the paramaters passed in $_POST
* - query data form mysql for the second listbox
* - generate the html select
*
* id must be 'l2" see javascript function first_trigger
* onchange must be "second_trigger();"
*/
print '<select id="l2" onchange="second_trigger();">
<option value="1">First of 2st</option>
<option value="2">Second of 2st</option>
</select>';

?>


I hope this is more clear as my english, :)

sorry about identation

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum