Mam następujący problem.
Mam baze danych (BAZA) np. 100 ludzi.
Chciałbym na stronie umieścić pole wyboru w ktorym będą widniały pobrane z tabeli z bazy danych (TABELA) osoby z kraju Polska (wyświetlając w polu wyboru imie i nazwisko).
Pole wyswietla tylko np. 20 osób i posiada suwak aby można było wybrac kogoś z dalszej częsci listy.
Następnie wybierając jedną osobę w polu obok tej listy wyskakują mi dane tego człowieka pobrane z TABELA (np. imie, nazwisko, wiek, miasto).
Oczywiście to wszystko bez przeładowania strony.
Przeszukując rózne fora, trafiłem na następującą propozycję, ale mam kłopot z powiązaniem tego z danymi z bazy danych
index.html
Kod
<html>
<head>
<script type="text/javascript" src="advajax.js"></script>
<script type="text/javascript">
function getBoxes() {
advAJAX.get({
url : "boxes.php",
parameters : {
"opcje" : document.getElementById("opcje").value
},
onSuccess : function(obj) { document.getElementById("box").innerHTML = obj.responseText; }
});
}
</script>
</head>
<body>
<table>
<tr>
<td>
<select name="opcje" id="opcje" onchange="getBoxes()" multiple size="20">
<?
@ $db = mysql_connect("localhost", "login", "haslo");
mysql_select_db("TABELA");
$strSQL = "SELECT * FROM BAZA WHERE kraj='polska'";
$rs = mysql_query($strSQL);
$nr = mysql_num_rows($rs);
for ($i=0; $i<$nr; $i++) {
$r = mysql_fetch_array($rs);
$wynik= $r['imie'].' '.$r['nazwisko'];
}
?>
<option value="default">opcja a</option>
<option value="1">opcja b</option>
<option value="2">opcja c</option>
<option value="3">opcja d</option>
<option value="4">Opcja e</option>
</select>
</td>
</tr>
<tr>
<td>
<div id="box"></div>
</td>
</tr>
</table>
</body>
</html>
<head>
<script type="text/javascript" src="advajax.js"></script>
<script type="text/javascript">
function getBoxes() {
advAJAX.get({
url : "boxes.php",
parameters : {
"opcje" : document.getElementById("opcje").value
},
onSuccess : function(obj) { document.getElementById("box").innerHTML = obj.responseText; }
});
}
</script>
</head>
<body>
<table>
<tr>
<td>
<select name="opcje" id="opcje" onchange="getBoxes()" multiple size="20">
<?
@ $db = mysql_connect("localhost", "login", "haslo");
mysql_select_db("TABELA");
$strSQL = "SELECT * FROM BAZA WHERE kraj='polska'";
$rs = mysql_query($strSQL);
$nr = mysql_num_rows($rs);
for ($i=0; $i<$nr; $i++) {
$r = mysql_fetch_array($rs);
$wynik= $r['imie'].' '.$r['nazwisko'];
}
?>
<option value="default">opcja a</option>
<option value="1">opcja b</option>
<option value="2">opcja c</option>
<option value="3">opcja d</option>
<option value="4">Opcja e</option>
</select>
</td>
</tr>
<tr>
<td>
<div id="box"></div>
</td>
</tr>
</table>
</body>
</html>
boxes.php
Kod
<?php
if ( isset ( $_GET['opcje'] ) ) {
switch ( $_GET['opcje'] ) {
default:
echo '<input type="checkbox" name="a">Imie - a<br />';
echo '<input type="checkbox" name="a">Nazwisko - a<br />';
echo '<input type="checkbox" name="a">Miasto - a<br />';
echo '<input type="checkbox" name="a">Wiek - a<br />';
break;
case 1:
echo '<input type="checkbox" name="b">Imie - b<br />';
echo '<input type="checkbox" name="b">Nazwisko - b<br />';
echo '<input type="checkbox" name="b">Miasto - b<br />';
echo '<input type="checkbox" name="b">Wiek - b<br />';
break;
case 2:
echo '<input type="checkbox" name="c">Imie - c<br />';
echo '<input type="checkbox" name="c">Nazwisko - c<br />';
echo '<input type="checkbox" name="c">Miasto - c<br />';
echo '<input type="checkbox" name="c">Wiek - c<br />';
break;
case 3:
echo '<input type="checkbox" name="d">Imie - d<br />';
echo '<input type="checkbox" name="d">Nazwisko - d<br />';
echo '<input type="checkbox" name="d">Miasto - d<br />';
echo '<input type="checkbox" name="d">Wiek - d<br />';
break;
case 4:
echo '<input type="checkbox" name="e">Imie - e<br />';
echo '<input type="checkbox" name="e">Nazwisko - e<br />';
echo '<input type="checkbox" name="e">Miasto - e<br />';
echo '<input type="checkbox" name="e">Wiek - e<br />';
break;
}
}
?>
if ( isset ( $_GET['opcje'] ) ) {
switch ( $_GET['opcje'] ) {
default:
echo '<input type="checkbox" name="a">Imie - a<br />';
echo '<input type="checkbox" name="a">Nazwisko - a<br />';
echo '<input type="checkbox" name="a">Miasto - a<br />';
echo '<input type="checkbox" name="a">Wiek - a<br />';
break;
case 1:
echo '<input type="checkbox" name="b">Imie - b<br />';
echo '<input type="checkbox" name="b">Nazwisko - b<br />';
echo '<input type="checkbox" name="b">Miasto - b<br />';
echo '<input type="checkbox" name="b">Wiek - b<br />';
break;
case 2:
echo '<input type="checkbox" name="c">Imie - c<br />';
echo '<input type="checkbox" name="c">Nazwisko - c<br />';
echo '<input type="checkbox" name="c">Miasto - c<br />';
echo '<input type="checkbox" name="c">Wiek - c<br />';
break;
case 3:
echo '<input type="checkbox" name="d">Imie - d<br />';
echo '<input type="checkbox" name="d">Nazwisko - d<br />';
echo '<input type="checkbox" name="d">Miasto - d<br />';
echo '<input type="checkbox" name="d">Wiek - d<br />';
break;
case 4:
echo '<input type="checkbox" name="e">Imie - e<br />';
echo '<input type="checkbox" name="e">Nazwisko - e<br />';
echo '<input type="checkbox" name="e">Miasto - e<br />';
echo '<input type="checkbox" name="e">Wiek - e<br />';
break;
}
}
?>
Do tego jest plik advajax.js
advajax.js