C'est TRES simple...
Je te donne un exemple tres rapide.
disons que tu as ton formulaire avec une liste, dans une page form.php :
<form id="idForm" action="?" method="post">
<select name="testSelect" onchange="searchReq('idForm', 'data='+document.GetElementById('idForm').testSelect.value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
Dans un fichier de scripts js inclus dans celui-ci, tu declares ton objet comme indique sur le site (copier coller...) et tu crees ta fonction searchReq () :
if(document.all) {
// Internet Explorer
var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
}
else {
// Mozilla
var XhrObj = new XMLHttpRequest();
}
function searchReq (loc, data) {
// définition de l'endroit d'affichage:
var content = document.getElementById(loc);
XhrObj.open("POST", 'requete.php');
// Ok pour la page cible
XhrObj.onreadystatechange = function() {
if (XhrObj.readyState == 4 && XhrObj.status == 200)
content.innerHTML = XhrObj.responseText ;
}
XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XhrObj.send(data);
}
Puis dans la page quz'appelle cette fonction (requete.php) :
<?php
if (isset ($_POST['data'])) {
echo 'select name="produits">';
$requete = "SELECT id, nom FROM produits WHERE id='$_POST['data']'";
while ($resultat = mysql_fetch_array ($requete)) {
echo '<option value="',$requete['id'],'">',$requete['nom'],'</option>';
}
echo '</select>';
}
?>
Ca ne fonctionnera comme ca que sur Firefox, pas sur IE. IE ne semble pas comprendre qu'un <form> est un block...si tu veux que ca fonctionne sur IE:
- tu dois inserer un div dans ton formulaire apres ton select, et le fermer aussitot, et lui donner un id :
</select>
<div id="idDiv"></div>
</form>
Puis dans le onchange, a l'appel de la fonction tu envoies l'id de ce div :
onchange="searchReq('idDiv', 'data='+document.GetElementById('idForm').testSelect.value);"
C'est tout.
Ca te fait 3 pages, et pas tres grosses... :-)