Forum d'entraide PHPFrance

Bonsoir,
Je suis novice en ajax, je m'y suis donc mis en suivant étape par étape le tuto et tout fonctionne au poil avec deux champs de type list. Le problème est que je souhaite incorporer une 3e liste

et que je ne sais pas comment m'y prendre. Avant de poster sur ce forum j'ai donc rechercher pas mal sur mon ami google et j'ai trouvé un tuto sympa en ajax sur asp-php.net http://www.asp-php.net/scripts/asp-php/ajax.php?page=3 Qui correspond a peu pres au m principe le problème c'est que je n'arrive pas à le faire fonctionner. Je souhaite avoir les infos suivantes : Marque ; Modele ; type : ex : PEUGEOT ; 207 ; HDI 1.6

Pouvez-vous me donner qqes pistes ? J'ai essayé en reprenant le m code javascript mai le réadaptant avec list2 et 3 et en creant un species 2 mais ca ne fonctionne pas.

Je vous remercie d'avance. (Mon serveur de test en local tourne sur php5)

Code page Html :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Tutorial sur les requêtes serveur en JavaScript</title>
<script type="text/javascript" src="tuto.js"></script>
</head>
<body>

	<form class="CenteredForm" name="form_selects" id="form_selects" action="" method="" onsubmit="return false;">
		<fieldset>
			<legend>Faites un choix dans la liste de gauche<br />et observez le résultat dans celle de droite</legend>
			
			Marque&nbsp;:
			<select name="list1" id="list1" class="ButtonL" onchange="request05(this.form)">
				<option value="" selected="selected"></option>
				<option value="Canidés"             >Canidés</option>
				<option value="PEUGEOT"             >PEUGEOT</option>
				<option value="RENAULT"             >RENAULT</option>
				<option value="Bovidés"             >Bovidés</option>
			</select>
			&nbsp;&nbsp;&nbsp;Mod&egrave;le&nbsp;:
			<select name="list2" id="list2" class="ButtonL" onchange="request06(this.form)">
			  <option>Select</option>
			</select>
			
		&nbsp;&nbsp;&nbsp;Type : 
		<select name="list3" id="list3" class="ButtonL">
                </select>
		</fieldset>
	</form>
</body>
</html>

Code page species.php

<?php
header('Content-type: text/html; charset=iso-8859-1');

$mysql_db = @mysql_connect("localhost", "XXXXX", "");
@mysql_select_db("XXXXXX");

$query  = "SELECT `modele` FROM `expertis_vehicules` WHERE `marque` = '".$_POST["marque"]."'";
$query .= " ORDER BY `modele`";
$result = @mysql_query($query);

echo 'var o = null;';
echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];';
echo 's.options.length = 0;';
while($r = mysql_fetch_array($result))
	echo 's.options[s.options.length] = new Option("'.$r["modele"].'");';

@mysql_close($mysql_db);

?>

Code javascript :

Code : Tout sélectionner


function request05(f) {
	var l1    = f.elements["list1"];
	var l2    = f.elements["list2"];
	var index = l1.selectedIndex;
	if(index < 1)
		l2.options.length = 0;
	else {
		var xhr_object = null;
		
		if(window.XMLHttpRequest) // Firefox
			xhr_object = new XMLHttpRequest();
		else if(window.ActiveXObject) // Internet Explorer
			xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
		else { // XMLHttpRequest non supporté par le navigateur
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
			return;
		}
	
		xhr_object.open("POST", "species.php", true);
		
		xhr_object.onreadystatechange = function anonymous() {
			if(xhr_object.readyState == 4)
				eval(xhr_object.responseText);
		}
	
		xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		var data = "marque="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
		xhr_object.send(data);
	}
}

Ca serait vraiment tres sympa.

Où est request06() de javascript ?

Request06

Code : Tout sélectionner

function request06(f) { 
   var l2    = f.elements["list2"]; 
   var l3    = f.elements["list3"]; 
   var index = l2.selectedIndex; 
   if(index < 1) 
      l3.options.length = 0; 
   else { 
      var xhr_object = null; 
       
      if(window.XMLHttpRequest) // Firefox 
         xhr_object = new XMLHttpRequest(); 
      else if(window.ActiveXObject) // Internet Explorer 
         xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
      else { // XMLHttpRequest non supporté par le navigateur 
         alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
         return; 
      } 
    
      xhr_object.open("POST", "species2.php", true); 
       
      xhr_object.onreadystatechange = function anonymous() { 
         if(xhr_object.readyState == 4) 
            eval(xhr_object.responseText); 
      } 
    
      xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      var data = "modele="+escape(l2.options[index].value)+"&form="+f.name+"&select=list3"; 
      xhr_object.send(data); 
   } 
}

Species2.php

Code : Tout sélectionner

<?php
header('Content-type: text/html; charset=iso-8859-1');

$mysql_db = @mysql_connect("localhost", "XXXXX", "");
@mysql_select_db("XXXX");

$query  = "SELECT `type` FROM `expertis_vehicules` WHERE `modele` = '".$_POST["modele"]."'";
$query .= " ORDER BY `type`";
$result = @mysql_query($query);

echo 'var o = null;';
echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];';
echo 's.options.length = 0;';
while($r = mysql_fetch_array($result))
	echo 's.options[s.options.length] = new Option("'.$r["type"].'");';

@mysql_close($mysql_db);

?>

D'avance merci[/code]

Forum d'entraide PHPFrance

Tuto XMLHTTREQUEST ROBLOCHE

Tuto XMLHTTREQUEST ROBLOCHE

Voici ce que j'ai mis pour ma requete 06 et species2