PHP/Javascipt et formulaire dynamique [Résolu]

Signaler
Messages postés
7
Date d'inscription
mercredi 9 janvier 2008
Statut
Membre
Dernière intervention
15 septembre 2009
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
Bonjour,
je suis entrain de monter une page PHP avec un formulaire qui contient, entre autre, une liste de départements (requête PHP/MySQL).
Je souhaiterais pouvoir afficher une liste des villes du département une fois celui-ci sélectionné mais sans avoir à recharger complètement le formulaire.
En cherchant par-ci par-la, j'ai trouvé 1 technique utilisant XMLHttpRequest(); et innerHTML mais il semble (http://www.siteduzero.com/tutoriel-3-4552-le-dom.html) que cette technique ne respecte pas les standards du web et soit IE propriétaire...
Il est expliqué dans ce site une autre méthode pour afficher du texte utilisant appendChild.
Cependant, je ne vois pas comment rendre cela interactif!
En effet, ce qui est ajouté par le appendChild est prévu et ne permet pas (il me semble) d'inclure une requête PHP.
Quelqu'un pourrait-il m'aider?!!
Merci
Renan

5 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
>>la méthode "PHP pure" nécessitee recharger la page
disons que la méthode 2 recharge la page,
en php, c'est ainsi, sauf si on mettait
le résultat dans un iframe ( caché ) et
qu'on réutilisait cet iframe
mais là : ajax est là pour ça

>>ce qui est ennuyeux dans le cas d'un formulaire
>>à plusieurs champs
ça dépend de comment on fait cela...

>>Pourtant, lorsque je clique sur un numéro,
>>rien ne se passe...
si si ( l'impératice )
il se passe toujours quelque chose
ne serait-ce qu'un message d'erreur !

il faut déterminer d'où ça vient !
erreur javascript lors de l'appel ? du retour ?
erreur php pour traiter le paramètre transmis ?
dans la recherche ? dans la génération de la réponse ?
erreur dans les url ?

aucune raison que cela ne fonctionne pas
( mon exemple fonctionne )
nous n'avons pas toutes les billes pour tester
et moi,sans tester, je suis bien trop limité
pour voir ce qui cloche dans les script
que vous nous mettez
regardez les choses au fur et à mesure
des alert, echo bien placés.
et
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
Bonjour,

>>1 technique utilisant XMLHttpRequest();
ajax pour les intimes

>>et innerHTML mais il semble que cette technique
>>ne respecte pas les standards du web
>>et soit IE propriétaire...
ajax et innerHTML ne sont pas exclusif IE
et en quoi ne respecteraient-il pas les
soit-disant standards du web ?

>>une autre méthode pour afficher du texte utilisant appendChild.
oui, on peut aussi. createElement + appendChild
c'est un peu "plus compliqué", enfin, si on peut dire,
mais innerHTML risque de dégrader les performances
si de nombreux ajouts consécutifs sont faits

>>je ne vois pas comment rendre cela interactif!
je ne comprend pas bien la question ?
rien à changer sauf remplacer l'affichage
du résultat de ajax.

pour l'instant, cela doit renvoyer du html
à afficher directement ( je ne dis pas que
ce n'est pas bien, mais ajax est fait pour
retourner des informations qui seront traitées
par le javascript, pas du html ) renvoyez
les données en php nécessaires à la construction
par createElement+appendChild

>>appendChild est prévu et ne permet pas
>>d'inclure une requête PHP.
ça ne veut rien dire ça
appendChild ajoute des éléments
une requête php n'a rien à voir
la réponse du php, par contre, devrait retourner
des données pour que le javascript les traite
et pourquoi pas fasse des appendChild

Messages postés
7
Date d'inscription
mercredi 9 janvier 2008
Statut
Membre
Dernière intervention
15 septembre 2009

Bonjour,
merci pour cette réponse!
J'ai passé un peu de temps à décortiquer tes exemples, et j'ai toujours quelques problèmes:
- la méthode "PHP pure" nécessite, si j'ai bien compris, de recharger la page pour mettre à jour le 2° select, ce qui est ennuyeux dans le cas d'un formulaire à plusieurs champs. Je me suis donc penché sur la méthode java...
- j'ai suivi, il me semble, les instructions et honteusement copié... mais cela ne marche toujours pas.
Le fichier correspondant au 2° select (ajax1.php) fonctionne lorsque je l'appelle directement dans le navigateur:
<?php require_once('../../Connections/bd.php'); ?>
<?php
   header('Content-type:text/html;charset=ISO-8859-1');
      //Liste des villes du département
mysql_select_db($database_bd1, $bd1);
$code='WHERE dpt_ville="' . $_GET["tb2"] . ' " ';
$query_ville1 = "SELECT * FROM mdm_ville_cat " . $code . "ORDER BY nom_ville"  ;
$ville1 = mysql_query($query_ville1, $bd1) or die(mysql_error());
$row_ville1 = mysql_fetch_assoc($ville1);
$totalRows_ville1 = mysql_num_rows($ville1);
$t="";
   for ($nb=0;$nb<$totalRows_ville1;$nb++)
   {  
   $i=mysql_result($ville1,$nb,"id_ville");
      $t.="\t".$i;   
   }	 
   echo $t;
?>


Le code du 1° select fonctionne aussi puisqu'il affiche bien ce que je veux voir:
<?php
//Liste des departements
mysql_select_db($database_bd1, $bd1);
$query_departement1 = "SELECT * FROM mdm_departement_cat ORDER BY nom_dpt ASC";
$departement1 = mysql_query($query_departement1, $bd1) or die(mysql_error());
$row_departement1 = mysql_fetch_assoc($departement1);
$totalRows_departement1 = mysql_num_rows($departement1);
?>
<select name="tb1" id="tb1" size=3 onchange='appel();'>
<?php
   for ($nb=0;$nb<$totalRows_departement1;$nb++)
   {  $i=mysql_result($departement1,$nb,"id_dpt");
   		$j=mysql_result($departement1,$nb,"nom_dpt");
      echo '<option value="' . $i . '">'.$j.'</option>';   
}
?></select>
      <select name="tb2" id="tb2" size=3></select>  


Pourtant, lorsque je clique sur un numéro, rien ne se passe...

La fonction est après mise à jour avec mes variables:
<script type="text/javascript">
function xmlhttp()
   {  var x;
      try         {  x = new ActiveXObject("Microsoft.XMLHTTP");   }
      catch (e)   {  try         {   x = new ActiveXObject("Msxml2.XMLHTTP");   }
                     catch (e)   {   try         {   x = new XMLHttpRequest();   }
                                     catch (e)   {   x=false;   }
                                 }
                  }
      return x;
   }
function appel()
   {   var xml = xmlhttp();
      if(!xml)
             {   alert("XmlHttpRequest non supporté");   }
      else   {   xml.onreadystatechange = function()
                 {   if(xml.readyState==4)
                     {   var opt=xml.responseText.split("\t");
                         tb2.length=0;
                         for ( var n=1;n<opt.length;n++ )
                         {   tb2.length++;
                             tb2.options[tb2.length-1].text=opt[n];
                         }
                     }
                  }
                  xml.open("GET", "./javascript/ajax1.php?tb2="+tb1.options[tb1.selectedIndex].text, true);
                  xml.send(null);
             }
   }      
</script>


Aurais-tu une idée??
Merci!
Renan
Messages postés
7
Date d'inscription
mercredi 9 janvier 2008
Statut
Membre
Dernière intervention
15 septembre 2009

J'ai installé FireBug! c'est vraiment très utile!! Merci!
Mais malheureusement, je ne comprends rien au Javascript...
Pourrais-tu me dire ce qui cloche quand on a :

tb1 is not defined
xml.open("GET", "./jav...options[tb1.selectedIndex].text, true);\n

pourtant la table est définie juste après le script, cf le code collé au dessus!
Merci!
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
>> xml.open("GET", "./javascript/ajax1.php?tb2="+tb1.options[tb1.selectedIndex].text, true);

tel que c'est fait là, ça appelle le php
"./javascript/ajax1.php"
( donc dans le répertoire où l'on est, dans
le sous-répertoire "javascript", le php "ajax1.php" )

tb1, c'est le "1er" select
qui donc doit être de la forme <select name="tb1" id="tb1" ...>
ce serait mieux, d'ailleurs, de faire
var t1=document.getElementById("tb1");
xml.open("GET", "./javascript/ajax1.php?tb2="+t1.options[t1.selectedIndex].text, true);


>>pourtant la table est définie juste après le script,
ah... vous avez oublié que le html/javascript,php...
sont des langages interprétées ?
les lignes sont exécutées dans l'ordre où elles
se présentent !
donc cet ordre doit être donné après le select

>>je ne comprends rien au Javascript...
ben.... si vous voulez utiliser, il faudrait
vous y mettre ! non ?
entre nous, le javascript est toujours facultatif,
on peut toujours s'en passer, pourquoi vouloir
utiliser si on ne connait pas ?