SARL DBC
La Fons Couverte
83310 Grimaud
04 94 56 83 66
06 11 10 66 24
email

:.	Analyse	:.	Organisation
:.	Vente et installation	:.	Programmes de gestion spécifiques
:.	Formations et assistances	:.	Vidéo surveillance

:. Listes liées dans un Formulaire avec des données d'une base MySql pour les listes

- Voici un exemple pour lier des listes rattachées à des tables d'une base MySql dans un formulaire via la solution XHR.
- La première liste est une liste de Marque de voitures (Marque). Une fois mise à jour, le code javascript met à jour la deuxième Liste de gammes de voitures.
- La liste liée est une liste de gamme de voitures (Gamme).

Le système utilise une gestion en XHR, c'est à dire l'appel d'un fichier PHP (extraction.php) par javascript, sans que le formulaire ne soit remis à jour. Le javascript appelle donc le fichier et lit les données pour les afficher dans le formulaire courant.

2 tables permettent de gérer les listes :
- Tbl_marque
CREATE TABLE IF NOT EXISTS `Tbl_marque` (
`marque_id` int(11) NOT NULL AUTO_INCREMENT,
`marque_nom` varchar(50) NOT NULL,
PRIMARY KEY (`marque_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

- Tbl_gamme
CREATE TABLE IF NOT EXISTS `Tbl_gamme` (
`gamme_id` double NOT NULL AUTO_INCREMENT,
`gamme_nom` varchar(50) NOT NULL,
`lien_marque` double NOT NULL,
PRIMARY KEY (`gamme_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

1/ Le formulaire complet avec le javascript :

<?php
// on se connecte a MySQL
require_once('votre fichier de connexion a votre base');

// on sélectionne la base
mysql_select_db('Nom de la base',$Nom du fichier de connexion) or die('Erreur de selection '.mysql_error());

//Création requete pour la liste des villes
$sql3 = "SELECT * FROM Tbl_marque order by nom-marque";
$query3 = mysql_query($sql3) or die('Erreur ville l'.mysql_error());

//Création requete pour la liste des gens
$sql4 = "SELECT * FROM Tbl_gamme order by nom_gamme";
$query4 = mysql_query($sql4) or die('Erreur Gens '.mysql_error());
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<script type="text/javascript">
/*--------------------------------*/
/* Renvoie handle DOM ( A ne pas changer !) */
/*--------------------------------*/
function findObj(id)
{
if (document.getElementById) {
return (document.getElementById(id));
}
else if (document.all) {
return (document.all[id]);
}
else if (document.layers) {
return (document.layers[id]);
}
return null;
}
/*--------------------------------*/
/* Report du resultat ( A ne pas changer !) */
/*--------------------------------*/
function resReport(ex)
{
var box = findObj('result');
if (!box)
{
var divs = findObj('super');
box = document.createElement('div');
box.setAttribute("id", "result");
box.className = "err_app";
if (divs) divs.appendChild(box);
else document.body.appendChild(box);
}
if (ex instanceof Error)
{
box.innerHTML = ex.name+" : "+ex.message;
}
else if (typeof ex == 'string') {
box.innerHTML = ex;
}
}
/*--------------------------------*/
/* Formate le Post du Formulaire */
/*--------------------------------*/
function getQueryString(marque)
{
qstr = 'Marque=' + encodeURIComponent(marque);
return qstr;
}

/*---------------------------------*/
/* Affiche le résultat Text Result */
/*---------------------------------*/
function updateText(xml) {
var status = parseInt(xml.getElementsByTagName('status')[0].firstChild.nodeValue);
// Erreur
if (status == 0) {
var reponse = xml.getElementsByTagName('reponse')[0].firstChild.nodeValue;
resReport(reponse);
return false;
}
// Traitement
var reponse = xml.getElementsByTagName('reponse')[0].firstChild.data;
var td = findObj("Gamme");
td.innerHTML = reponse;
}
/*------------------------------*/
/* Dialogue avec le Serveur */
/*------------------------------*/
function xmlhttpPost(marque)
{
try {
var xhr = false;
var self = this;
var strURL = "extraction.php";

if (window.XMLHttpRequest)
self.xhr = new XMLHttpRequest();
else self.xhr = new ActiveXObject("Microsoft.XMLHTTP");
self.xhr.open('POST', strURL, true);
self.xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xhr.onreadystatechange = function() {
if (self.xhr.readyState == 4 && self.xhr.status == 200) {
updateText(self.xhr.responseXML);
}
if (self.xhr.readyState == 4 && self.xhr.status != 200) {
resReport("<p><font color='RED'>Erreur " + strURL + " : " + self.xhr.statusText+"</font></p>");
}
}
self.xhr.send(getQueryString(marque));
}
catch (ex) {
resReport(ex);
return false
}
}
</script>
</head>
<body>
<form name="frmSelect" action="recup.php" method="post" enctype="multipart/form-data">
<table width="60%" align="center">
<tr>
<th>
Sélection :
</th>
<td>
Site<br />
<select size="1" name="Marque" onChange="xmlhttpPost(this.value)">
<?php // Selection de la Marque
$sql = "SELECT * FROM Tbl_marque ORDER BY marque_nom ";
$result = mysql_query($sql);
print ("<option value='0'>Toutes marques</option>\n");
while ($bres = mysql_fetch_object($result)) {
print ("<option value='$bres->marque_id'>$bres->marque_nom</option>\n");
}
?>
</select>
</td>
<td id="Gamme">
Gamme<br />
<select size="1" name="Gamme">
<?php // Selection du Modele
$sql = "SELECT * FROM Tbl_gamme WHERE lien_marque = $marque_id ORDER BY gamme_nom";
$result = mysql_query($sql);
print ("<option value='0'>Gammes</option>\n");
while ($bres = mysql_fetch_object($result)) {
print ("<option value='$bres->gamme_id'>$bres->gamme_nom</option>\n");
}
?>
</select>
</td>
<td><input type="submit" name="button" id="button" value="Envoyer" />
<br /></td>
</tr>
</table>
</form>
</body>
</html>

2/ Le fichier appelé par le javascript : extraction.php

<?php
// on se connecte a MySQL
require_once('votre fichier de connexion a votre base');
// on sélectionne la base
mysql_select_db('Nom de la base',$Nom du fichier de connexion) or die('Erreur de selection '.mysql_error());

function Retour_XML($reponse, $status)
{
print ("<root>\n");
print ("<status>$status</status>\n");
print ("<reponse><![CDATA[");
print ("$reponse");
print ("]]></reponse>\n");
print ("</root>\n");
die();
}

header('Content-Type: text/xml; charset=ISO-8859-1');
echo '<?xml version="1.0" encoding="ISO-8859-1" ?>';

// Récupération
$marque = utf8_decode($_POST['Marque']);

// Liste Gamme
$sql = "SELECT * FROM Tbl_gamme WHERE gamme_id = $marque ORDER BY gamme_nom";
$result = mysql_query($sql) or die('Erreur de selection '.mysql_error());

// Reponse XML
print ("<root>\n");
print ("<reponse><![CDATA[");
// CDATA de la LISTE
print ("<SELECT name='Gamme' size='1'>\n");
print ("<option value='0'>Gammes</option>\n");
while ($bres = mysql_fetch_object($result))
print ("<option value='$bres->gamme_id'>$bres->gamme_nom</option>\n");
print ("</SELECT>\n");
print ("]]></reponse>\n");
print ("<status>1</status>\n");
print ("</root>\n");
mysql_close();
?>