Select qui se charge en ajax

[espoir2joie]

Bonjour,

J'ai le formulaire ci-dessous

<SELECT name="lechoix" id="general" onchange="montreSelect();">
<OPTION value="0">----------</OPTION>
<OPTION value="1">animaux</OPTION>
<OPTION value="2">legumes</OPTION>
</SELECT>

<SELECT name="legumes" id="select2" style="display:none">
<OPTION value="1">patate</OPTION>
<OPTION value="2">faillot</OPTION>
</SELECT>

<SELECT name="animaux" id="select1" style="display:none">
<OPTION value="1">Chien</OPTION>
<OPTION value="2">Chat</OPTION>
<OPTION value="3">Cheval</OPTION>
</SELECT>

<script type="text/javascript">
function montreSelect(){
  document.getElementById("select1").style.display='none';
  document.getElementById("select2").style.display='none';
  document.getElementById("select"+document.getElementById("general").value).style.display='block';
}
</script>

Ce code affiche le menu legumes et animaux selon la sélection du choix.

Ce que je veux c'est de charger la liste de légumes et animaux de la base de donnée, pour pas charger les deux listes et les cacher je veux utiliser du ajax ou javascript, donc lorsqueue $valeur=1 je connecte sur la bdd pr charger les legumes et si $valeur=2 je charge ls animaux (je maitrise le html et le php mais pas d'ajax pouvez vous m'aider svp.

merci

 

[Axiso]

Tu veux vraiment envoyer une requête pour ça ? Si les options de tes listes sont connues et en nombre limité, tu peux les afficher par défaut et gérer seulement leur visibilité, puisque de toute façon tes deux listes ont déjà des identifiants différents.

("fayot", pas "faillot". Ou bien "Agnan")

 

[espoir2joie]

Oui je dois utiliser des requêtes car la liste est longue des centaines d'options pour pas agrandir la page

 

[zeb]

<span class="syntaxhtml"><span class="syntaxdefault"></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">select id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"unTruc"</span><span class="syntaxdefault"> onchange</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"maFonctionAjax();"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">OPTION value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"0"</span><span class="syntaxkeyword">>----------</</span><span class="syntaxdefault">OPTION</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">OPTION value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"1"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">animaux</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">OPTION</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">OPTION value</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"2"</span><span class="syntaxkeyword">></span><span class="syntaxdefault">legumes</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">OPTION</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">select</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">div id</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"reponseEnHTML"</span><span class="syntaxkeyword">></</span><span class="syntaxdefault">div</span><span class="syntaxkeyword">><br /><br /><</span><span class="syntaxdefault">script type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text/javascript"</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">   maFonctionAjax</span><span class="syntaxkeyword">(){<br /></span><span class="syntaxdefault">      </span><span class="syntaxcomment">// le contenu de ton select ou d'un input bref une saisie utlisateur<br /></span><span class="syntaxdefault">      var maValeurChoisie </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> document</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">getElementById</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"unTruc"</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">value</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">      </span><span class="syntaxcomment">// ton objet Ajax<br /></span><span class="syntaxdefault">      var xhr</span><span class="syntaxkeyword">=</span><span class="syntaxdefault">null</span><span class="syntaxkeyword">;<br /><br /></span><span class="syntaxdefault">      </span><span class="syntaxcomment">// instanciation de l'objet ajax en fonction du navigateur<br /></span><span class="syntaxdefault">      if</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">window</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">XMLHttpRequest</span><span class="syntaxkeyword">){</span><span class="syntaxdefault">xhr</span><span class="syntaxkeyword">=</span><span class="syntaxdefault">new XMLHttpRequest</span><span class="syntaxkeyword">();}<br /></span><span class="syntaxdefault">      else if</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">window</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">ActiveXObject</span><span class="syntaxkeyword">){</span><span class="syntaxdefault">xhr</span><span class="syntaxkeyword">=</span><span class="syntaxdefault">new ActiveXObject</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"Microsoft.XMLHTTP"</span><span class="syntaxkeyword">);}<br /><br /></span><span class="syntaxdefault">      </span><span class="syntaxcomment">// envoie d'un requête au serveur web depuis la page du visiteur par l'objet ajax<br /></span><span class="syntaxdefault">      xhr</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">open</span><span class="syntaxkeyword">(</span><span class="syntaxstring">"GET"</span><span class="syntaxkeyword">,</span><span class="syntaxstring">"http://www.example.com/ajax/script.php?data="</span><span class="syntaxdefault"> </span><span class="syntaxkeyword">+</span><span class="syntaxdefault"> maValeurChoisie</span><span class="syntaxkeyword">,</span><span class="syntaxdefault">false</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">      xhr</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">send</span><span class="syntaxkeyword">(</span><span class="syntaxdefault">null</span><span class="syntaxkeyword">);<br /></span><span class="syntaxdefault">      </span><span class="syntaxcomment">// utilisation de la réponse du serveur (en html) pour remplir la div qui était vide<br /></span><span class="syntaxdefault">      document</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">getElementById</span><span class="syntaxkeyword">(</span><span class="syntaxstring">'reponseEnHTML'</span><span class="syntaxkeyword">).</span><span class="syntaxdefault">innerHTML</span><span class="syntaxkeyword">=</span><span class="syntaxdefault">xhr</span><span class="syntaxkeyword">.</span><span class="syntaxdefault">responseText</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">   </span><span class="syntaxkeyword">}<br /></span><span class="syntaxdefault"></script></span></span>

script.php :

<span class="syntaxdefault"><?php<br />$myData </span><span class="syntaxkeyword">=</span><span class="syntaxdefault"> $_GET</span><span class="syntaxkeyword">[</span><span class="syntaxstring">'data'</span><span class="syntaxkeyword">];<br />....<br /></span><span class="syntaxdefault">traitement avec la base ou autre chose<br /></span><span class="syntaxkeyword">....<br /></span><span class="syntaxdefault">echo </span><span class="syntaxstring">"contenu de la div 'reponseEnHTML'."</span><span class="syntaxkeyword">;<br /></span><span class="syntaxdefault">?></span>

 

[espoir2joie]

Bonjour, Merci ZEB de votre réponse c'est exactement ce que je veux sauf que ça ne marche pas voici mon code :

<SELECT id="voitures" name="voiture" onchange="maFonctionAjax();" required>
				<OPTION></OPTION>
				<OPTION value="1">Renault</OPTION>
				<OPTION value="2">Peugot</OPTION>
				<OPTION value="3">DACIA</OPTION>
</SELECT>
						
				
		
				<div id="reponseEnHTML"></div>

				<script type="text/javascript">
					maFonctionAjax(){
					  // le contenu de ton select ou d'un input bref une saisie utlisateur
					  var maValeurChoisie = document.getElementById("voitures").value;
					  // ton objet Ajax
					  var xhr=null;

					  // instanciation de l'objet ajax en fonction du navigateur
					  if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}
					  else if(window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHTTP");}

					  // envoie d'un requête au serveur web depuis la page du visiteur par l'objet ajax
					  xhr.open("GET","voiture.php?data=" + maValeurChoisie,false);
					  xhr.send(null);
					  // utilisation de la réponse du serveur (en html) pour remplir la div qui était vide
					  document.getElementById('reponseEnHTML').innerHTML=xhr.responseText;
				   }
				</script>

A savoir que la page voiture qui contient le code (pour tester) :

    <?php
    $myData = $_GET['data'];

    echo "Braavo !";
    ?>

et la page qui contient le formulaire se trouvent dans le même dossier.

Quand je choisi entre renault peugot etc ... ça ne donne rien le div est toujours vide !!

Merci de votre aide

 

[zeb]

xhr.open("GET","voiture.php?data=" + maValeurChoisie,false);
xhr.open("GET","http://www.tondomaine.com/ton-dossier/voiture.php?data=" + maValeurChoisie,false);

 

[baud74]

regarder dans la console si le fichier voiture.php est bien appelé par la fonction javascript, s'il y a des erreurs javascript.

 

[espoir2joie]

@zeb, oui j'ai déjà essayé : xhr.open("GET","http://localhost:82/webtest/voiture.php?data=" + maValeurChoisie,false);
Mais ça ne donne rien !

@baud74 comment voir quelle console ? Firebug ?

 

[espoir2joie]

la console m'affiche une erreur :

SyntaxError: missing ; before statement
maFonctionAjax(){

Puis quand je sélectionne dans le formulaire une autre erreur apparait dans la console :

ReferenceError: maFonctionAjax is not defined
<!DOCTYPE html>

 

[zeb]

oui j'ai écrit ça a l'arrache vite fait hier soir j'ai oublié des trucs.

ReferenceError: maFonctionAjax is not defined

<script type="text/javascript">
function maFonctionAjax(){
// le contenu de ton select ou d'un input bref une saisie utlisateur ...

il est probable que "SyntaxError: missing ; before statement" soit lié aussi à l'oublie de "function".

 

[espoir2joie]

Et comment que j'ai pas vu XD, oui c'est bon ça marche merci beaucoup ZEB x)

 

[espoir2joie]

ZEB sauve moi

Je veux cette foici sur le même code, lors de l'ouverture de la page j'ai sélectionné un choix par défaut avec (selected) mais le secods select ne se charge pas car il se charge que quand on change avec la souris, un moyen pour qu'il se charge automatiquement avec la page ?

 

[zeb]

<body onload="maFonctionAjax();>

 

[espoir2joie]

Merci zeb ça marche que sur Body ? on ne peut pas mettre le code onload dans une div ?

 

[espoir2joie]

C'est bon j'ai trouvé, j'ai ajouté tout en bas :
<script type="text/javascript">
maFonctionAjax();
</script>