combobox dynamique html php javascriptRésolu

Question

Salut tout le monde !!

j'ai besoin d'aide. Voila je voudrais créer un formulaire composé de 2 combobox en fonction d'une base de données.
La 1ere, j'ai réussi grace a une requête mais je suis bloqué à la 2eme. Ce que je voudrais c'est que en fonction du choix de l'option de la 1ere combo le php creer les options de la 2eme combo. La 2eme combo est faite grace a une requete qui fait intervenir une variable (choix de l'option de la 1ere).
Le probleme c'est que moi j'ai l'habitude de le faire garce a $_post mais ici c'est impossible car il n'y a pas d'envoi. J'ai essaye çà bidouiller avec le JavaScript mais sans résultat.

Merci d'avance !! ^^

Tonio_35 · Accepted Answer

Bonjour, Si tu veux le faire sans recharger la page, tu auras besoin du JavaScript (Ajax). Prenons le problème dans l'ordre : L'évènement qui permet de remplir la 2ème combo est déclenché au changement d'état de la 1ère. Quand tu clique sur un élément de la combo, l'évènement "onChange" est appelé. Il faut donc associer cet évènement a la fonction qui va remplir la seconde combo box à partir de la valeur de la première. Détails sur onChange. Ensuite, cette fonction devras vider la seconde combo box, aller chercher la liste des valeurs à y mettre puis la re-remplir. Voici ce dont tu auras besoin coté Javascript function actualiserCombo(valueID) { // On vide la combo 2 document.getElementById('maCombo2').innerHTML=null; // On lance la requete ajax var xhr = getXhr(); xhr.onreadystatechange = function(){ if(xhr.readyState 4 && xhr.status 200){ optionsselect = xhr.responseText; // On se sert de innerHTML pour rajouter les options a la liste document.getElementById('maCombo2').innerHTML = optionsselect; } } // Ici on va voir comment faire du post xhr.open("POST","tapage.php?vue=ajax",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments // ici, on regarde ce qui est séléctionné dans la combo1 maCombo = document.getElementById('maCombo2'); idvalue = maCombo.options[maCombo.selectedIndex].value; // On envois la requete xhr.send("idvalue="+idvalue); } // Ici cf doc AJAX function getXhr(){ var xhr = null; if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); else if(window.ActiveXObject){ try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } return xhr; } Documentation sur getElementById Documentation sur innerHTML Documentation sur l'AJAX Ici tu devras avoir une page "tapage.php" qui appelée avec la variable d'url "vue" égale à "ajax" et la variable post "idvalue" égale à la valeur de la combo box 1 qui renveras les options de ta combo box 2... '.$element['nom'].''; // FIN BOUCLE WHILE exit(); } ?> Avec tout ca tu devrais arriver à ton compte... _________________________________ Min iPomme

cs_lilj · Answer

Bon sa ma lair bien faut que je letudi de plus pres car je ni konnai rien en ajax. Merci!!

Tonio_35 · Answer

Hésite pas si t'as des questions...


_________________________________
Min iPomme

cs_lilj · Answer

deja jvoi ke la methode sa marche pas avec quel navigateur stp ? Et puis une kestion ki a pa tro de rapport avec tt mais eqt ce que le traitement dun formulaire sur une meme page php est plus optimum qu en utilisan une page pr le form et une otre pr le traitement ?

Tonio_35 · Answer

J'ai du mal à te lire, si tu peux écrire des mots complets ce seras plus facile .

Conditions pour que ce script fonctionne :
- Si JavaScript est désactivé, Ajax ne peut fonctionner. Il faut demander au lecteur de l'activer parmi les options du navigateur.
- Les navigateurs qui prennent en charge l'objet XMLHttpRequest sont :
[list]
[*] Konqueror 3.3
[*] Microsoft IE 5.5
[*] Mozilla 1.4
[*] Mozilla Firefox 0.8
[*] Netscape 7.1
[*] Opera 8.01
[*] Safari 1.2.1
[*] Chrome
/list
Toutes les versions plus récentes de ces navigateurs supportent bien entendu également les objets XMLHttpRequest. Bref tout les navigateurs actuels... Attention, les bots (Google bot et autre) n'ont pas le javascript d'activer. Si ton javascript permet la navigation dans ton site, il faut prévoir une solution de contournement...

Autres aides :
http://javascript.developpez.com/faq/?page=Ajax#ajax.compatiblite
http://www.xul.fr/xml-ajax.html


Pour ce qui es du traitement, à mon avis ca reviens au même. c'est plutôt toi qui décide comment tu organise ton code. En suivant le modèle MVC ou non, en séparant ce qui est traitement de l'affichage ou non...

Pour un gros site avec de nombreux développeurs il est conseillé de réaliser une sorte de MVC, donc autant t'habituer à le faire...
http://tahe.developpez.com/web/php/mvc/
_________________________________
Min iPomme

cs_lilj · Answer

Bon alor jai etudier ton code et je voulai savoir ce que tu enTendai par " ne pas oublier de poster les arguments" dans le JS et  dans le php ce serait quoi les headers ?

Tonio_35 · Answer

Tu envois via la méthode POST des variables, tu devrais vraiment lire ceci :
http://www.xul.fr/xml-ajax.html
Et cela :
http://www.xul.fr/scripts/ajax-php.php

Quand je dis "ne pas oublier de poster les arguments" en gros c'est ne pas oublier de dire à la page que t'appel, quel élément est sélectionné dans ton premier select...

Pour les headers, tu dois indiquer que ta page php envois du html... Regarde du coté de la fonction header de php et de ces arguments Content-type et charset...

Ensuite tu peux aussi mettre des header pour éviter le cache navigateur...


_________________________________
Min iPomme

cs_lilj · Answer

Jai reussi a le faire fonctionner sauf que jai du metre document.monform.moncham car getbyID ne fonctionne pas !

cs_lilj · Answer

Jai reussi a le faire fonctionner sauf que jai du metre document.monform.moncham car getbyID ne fonctionne pas !

cs_lilj · Answer

Oups! Negligeance de ma part je confirme tout fonctione bien meme avec getelementbyid. Desole le dernier bug qui reste c'est que sous IE sa fonctionne pas comme d'habitude

Tonio_35 · Answer

Quel est le problème sous IE ? Quelle est ta version de IE ? As tu un message d'erreur ?

PS : Pense à marquer les messages qu'y t'on aider dans la résolution de ton problème afin d'obtenir une meilleur navigation dans le forum...


_________________________________
Min iPomme

cs_lilj · Answer

Merci ta documentation ma permit de trouver le probleme.Sous IE l'ID nest pas pris en charge dans un select faut donc passer par une div. Merci encore !!

Tonio_35 · Answer

De rien !
TROOOL MOD START
IE est toujours la pour nous permettre d'aller au bout des choses... Qu'es que serais un développeur sans lui ? Un développeur 10 fois plus rapide peut-être mais du coup 10 fois moins payé par rapport au résultat...

TROOOL MOD END

_________________________________
Min iPomme

cs_lilj · Answer

Cest sur !!

Combobox dynamique html php javascript

14 réponses

Votre réponse

Discussions similaires