Привет! Вот одно из решений проблемы с помощью AJAX.
1. Сначала на страничке рисуешь элемент формы, у меня это <select...>, и <div...>, где будут "появляться" новые элементы:
2. В тэге <select...> пишем функцию onChange="make_request('search.architect.php?cat=' +this.value, 'id_дива_куда_подружаем_элем ты');".
HHTML-код выглядит вот так:
<form name="search" action="#" method="get">
<input type="text" name="keys" value="">
<select name="cat" onChange="make_request('search.architect.php?cat='+this.value, 'search_sub');">
<option value="0">Alla kategorier</option>
<option value="cars">Bilar</option>
<option value="flats">Lägenheter</option>
</select>
<input type="submit" value="SÖK">
<div id="search_sub"><!-- здесь будет "появляться" новые элементы --></div>
</form>
3. Пишем .js файл:
function create_object() {
var http_request = false;
// Mozila, Safari etc.
if(window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/html; charset=windows-1251');
}
}
// IE
else if(window.ActiveXObject) {
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) {}
}
}
// Error
if(!http_request) {
alert('Failed to create object of class XMLHTTP');
return false;
}
else { return http_request; }
}
function make_request(url, id) {
http_request = create_object();
http_request.onreadystatechange = function() { paste_response(http_request, id); };
http_request.open('GET', url, true);
http_request.send(null);
}
function paste_response(http_request, id) {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
document.getElementById(id).innerHTML = http_request.responseText;
} else {
alert('No response from server or another error accured.');
}
}
}
И включаем его в нашу страничку в <head>-тэге.
4. Пишем PHP-страничку search.architect.php:
<?
// search.architect.php
//кэш
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")."GMT");
//кодировку нужно прописывать, чтобы не было "иероглифов"
header('Content-Type: text/html; charset=windows-1251');
//вместо нижепрописоногго массива, пишем любую другую функцию, котоарая обращаеться в БД или генерирует элемнт формы...
$data = array(
'default' => "",
'cars' => "<select name=\"year\"><option value=\"0\">Årsmodell</option><option value=\"2000\">2000</option><option value=\"2001\">2001</option><option value=\"2002\">2002</option></select> <select name=\"price_from\"><option value=\"0\">Pris från</option><option value=\"0\">0</option><option value=\"1000\">1000</option><option value=\"2000\">2000</option><option value=\"3000\">3000</option></select> <select name=\"price_to\"><option value=\"0\">Pris till</option><option value=\"1000\">1000</option><option value=\"2000\">2000</option><option value=\"3000\">3000</option><option value=\"4000\">4000</option></select>",
'flats' => "<select name=\"kvm\"><option value=\"0\">Yta</option><option value=\"20\">20 Kvm</option><option value=\"40\">40 Kvm</option><option value=\"60\">60 Kvm</option></select>"
);
if(!empty($_GET['cat'])) echo $data[$_GET['cat']];
else echo $data['default'];
?>
Вот вообщем-то и всё. Надеюсь ясно описал.
С помощю этой функции можно подгружать что угодно и куда угодно без перезагрузки странички.
Спасибо за внимание.
