[AJAX] Select box

**fawi01** · 08/11/2008, 17h43

Bonjour a tous,
j'ai un petit soucis avec un script PHP/MYSQL/AJAX pour une select box.
impossible d'afficher le résultat dans le second select box !
Voici les codes
Fichier INDEX.PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
 <title></title>
   <script src="ajax_req.js" type="text/javascript"></script>
</head>
<body>
<form method="post">
<select name="list_auto_marque" onchange="htmlData2('list_auto.php', 'ch_list_auto='+this.value)" />
	<?php
        $db = mysql_connect('localhost', 'xxx', 'xxxxxxx');
        mysql_select_db('xxx',$db);
        $sql = 'SELECT id,marque FROM automobiles';
        $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
        while($data = mysql_fetch_assoc($req))
            {
            echo '<option value="'.$data['marque'].'">'.$data['marque'].'</option>';
            }
        ?>
</select>
<br>
<div id="txtResult2"> <select name="list_auto_modele"><option></option></select> </div>
 
<input type="submit" />
</form>
</body>
</html>

fichier LIST_AUTO.PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<select name="list_auto_modele">
	<?php
	$db = mysql_connect('localhost', 'xxx', 'xxxxxx');
	mysql_select_db('xxx',$db);
$go_list_auto=$_GET['ch_list_auto'];
	$sql2 = 'SELECT * FROM automobiles WHERE marque='.$go_list_auto.'';
	$req2 = mysql_query($sql2) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
	while($data2 = mysql_fetch_assoc($req2))
	    {
	    echo '<option value="'.$data2['id'].'">'.$data2['modele'].'</option>';
	    }
	?>
</select>

fichier AJAX_REQ.JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function GetXmlHttpObject(handler)
{
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}
 
function stateChangedé()
{
   if (xmlHttp.readyStateé==4 || xmlHttp.readyStateé=="complete")
   {
           document.getElementById("txtResulté").innerHTML= xmlHttp.responseText;
   }
   else {
           //alert(xmlHttp.status);
   }
}
 
 
// Will populate data based on input
function htmlData2(url, qStr)
{
   if (url.length==0)
   {
       document.getElementById("txtResult2").innerHTML="";
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Browser does not support HTTP Request");
       return;
   }
 
   url=url+"?"+qStr;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged2;
   xmlHttp.open("GET",url,true) ;
   xmlHttp.send(null);
}

Quelqu'un voit-il le problème ?
merci d'avance pour votre aide.

**Nesmontou** · 08/11/2008, 18h54

Bonjour, peux-tu nous donner plus de détails : message d'erreur, résultat erroné... ?

Sinon, tu peux jeter un oeil ici : http://siddh.developpez.com/articles/ajax/#LIV-A

Bon développement

**fawi01** · 09/11/2008, 12h12

Aucun message d'erreur.
Simplement pas de résultat apparaissant dans la seconde liste !?

**ryan** · 09/11/2008, 23h08

Yop!

La première chose qui me frappe est dans INDEX.PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<select name="list_auto_marque" onchange="htmlData2('list_auto.php', 'ch_list_auto='+this.value)"

J'aurais plutôt vu ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<select name="list_auto_marque" onchange="htmlData2('list_auto.php', 'ch_list_auto='+this[selectedIndex].value)"

**fawi01** · 11/11/2008, 09h09

Bien vu, hélas, ca ne change rien !
je vais refaire le code complet, il menque peut etre une , un ; ou ' etc... ;-)

**ryan** · 11/11/2008, 11h51

Yop!

Le code dans AJAX_REQ.JS m'a l'air assez zarbi...En tout cas, ce n'est pas comme cela que je l'aurais écrit.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
function getXhr()
{
  var xhr = null; 
  if(window.XMLHttpRequest) // Firefox et autres
    xhr = new XMLHttpRequest(); 
  else if(window.ActiveXObject)
  { // Internet Explorer 
    try 
    {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (e) 
    {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  else 
  { 
    alert("Your browser doesn't support XMLHTTPRequest objects..."); 
    xhr = false; 
  } 
  return xhr;
}
 
function htmlData2(url, qStr)
{
  var xhr = getXhr();
  xhr.onreadystatechange = function()
  {
    if(xhr.readyState == 4 && xhr.status == 200)
    {
      document.getElementById("txtResult2").innerHTML= xhr.responseText    
    }
  }
  url=url+"?"+qStr;
  url=url+"&sid="+Math.random();
  xhr.open("GET",url,true) ;
  xhr.send(null); 
}

**fawi01** · 11/11/2008, 14h50

Merci à Ryan pour son aide, pour ceux que ca intéresse, voici le script complet avec trois select box, vous pouvez en ajouter autant que désiré sur le même modèle !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
Fichier Ajax : ajax_req.js
  return xhr;
}
 
 
function htmlData(url, qStr)
{
  var xhr = getXhr();
  xhr.onreadystatechange = function()
  {
    if(xhr.readyState == 4 && xhr.status == 200)
    {
      document.getElementById("txtResult").innerHTML= xhr.responseText    
    }
  }
  url=url+"?"+qStr;
  url=url+"&sid="+Math.random();
  xhr.open("GET",url,true) ;
  xhr.send(null); 
}
 
 
function htmlData2(url, qStr)
{
  var xhr2 = getXhr();
  xhr2.onreadystatechange = function()
  {
    if(xhr2.readyState == 4 && xhr2.status == 200)
    {
      document.getElementById("txtResult2").innerHTML= xhr2.responseText    
    }
  }
  url=url+"?"+qStr;
  url=url+"&sid="+Math.random();
  xhr2.open("GET",url,true) ;
  xhr2.send(null); 
}
 
function htmlData3(url, qStr)
{
  var xhr3 = getXhr();
  xhr3.onreadystatechange = function()
  {
    if(xhr3.readyState == 4 && xhr3.status == 200)
    {
      document.getElementById("txtResult3").innerHTML= xhr3.responseText    
    }
  }
  url=url+"?"+qStr;
  url=url+"&sid="+Math.random();
  xhr3.open("GET",url,true) ;
  xhr3.send(null); 
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
Fichier : index.php
<html>
<head>
 <title></title>
   <script src="ajax_req.js" type="text/javascript"></script>
</head>
<body>
<form method="post">
 
<select name="country" onchange="htmlData('city.php', 'ch='+this.value)" />
	<?php
        $db = mysql_connect('localhost', 'XXX', 'XXXXXX');
        mysql_select_db('XXXXXX',$db);
        $sql = 'SELECT id,cp FROM cp_ville';
        $req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
        while($data = mysql_fetch_assoc($req))
            {
            echo '<option value="'.$data['cp'].'">'.$data['cp'].'</option>';
            }
        ?>
</select>
<br>
<div id="txtResult"> <select name="cityList"><option></option></select> </div>
 
<br>
 
<select name="list_auto_marque" onchange="htmlData2('city.php', 'ch='+this.value)" />
	<?php
        $db = mysql_connect('localhost', 'XXX', 'XXXXXX');
        mysql_select_db('XXX',$db);
        $sql2 = 'SELECT id,cp FROM cp_ville';
        $req2 = mysql_query($sql2) or die('Erreur SQL !<br>'.$sql2.'<br>'.mysql_error());
        while($data2 = mysql_fetch_assoc($req2))
            {
            echo '<option value="'.$data2['cp'].'">'.$data2['cp'].'</option>';
            }
        ?>
</select>
<br>
<div id="txtResult2"> <select name="list_auto_modele"><option></option></select> </div>
 
<br>
 
<select name="3" onchange="htmlData3('city.php', 'ch='+this.value)" />
	<?php
        $db = mysql_connect('localhost', 'XXX', 'XXXXXX');
        mysql_select_db('XXX',$db);
        $sql3 = 'SELECT id,cp FROM cp_ville';
        $req3 = mysql_query($sql3) or die('Erreur SQL !<br>'.$sql3.'<br>'.mysql_error());
        while($data3 = mysql_fetch_assoc($req3))
            {
            echo '<option value="'.$data3['cp'].'">'.$data3['cp'].'</option>';
            }
        ?>
</select>
<br>
<div id="txtResult3"> <select name="list_auto_modele"><option></option></select> </div>
<input type="submit" />
</form>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Fichier : city.php
<select name="cityList">
	<?php
	$db = mysql_connect('localhost', 'XXX', 'XXXXXX');
	mysql_select_db('XXX',$db);
$go=$_GET['ch'];
$test='50';
	$sql = 'SELECT id,cp,ville FROM cp_ville WHERE cp='.$go.'';
	//$sql = 'SELECT id,cp,ville FROM cp_ville';
	$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
	while($data = mysql_fetch_assoc($req))
	    {
	    echo '<option value="'.$data['id'].'">'.$data['ville'].'</option>';
	    }
	?>
</select>

[AJAX] Select box

JavaScript

Discussions similaires

Partager

Partager