Combobox dynamique html php javascript [Résolu]

Messages postés
205
Date d'inscription
dimanche 13 décembre 2009
Dernière intervention
1 avril 2012
- 28 déc. 2009 à 13:29 - Dernière réponse :
Messages postés
205
Date d'inscription
dimanche 13 décembre 2009
Dernière intervention
1 avril 2012
- 30 déc. 2009 à 06:30
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 !! ^^
Afficher la suite 

Votre réponse

14 réponses

Meilleure réponse
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Dernière intervention
30 août 2011
28 déc. 2009 à 16:13
5
Merci
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.
<select name="maCombo1" id ="maCombo1" onChange="actualiserCombo()">
    <option value="1">Valeur 1</option>
    <option value="2">Valeur 2</option>
  </select>
<select name="maCombo2" id="maCombo2">
</select>

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...

<?php
if($_GET['vue'] == 'ajax')
{
    // Mettre les bon headers (Pas de cache retour type text/html
    // SELECT SQL avec dans la close WHERE $_POST['idvalue']
    // BOUCLE WHILE
        echo '<option value="'.$element['valeur'].'">'.$element['nom'].'</option>';
    // FIN BOUCLE WHILE
    exit();
}
?>


Avec tout ca tu devrais arriver à ton compte...
_________________________________
Min iPomme

Merci Tonio_35 5

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 92 internautes ce mois-ci

Commenter la réponse de Tonio_35
Messages postés
205
Date d'inscription
dimanche 13 décembre 2009
Dernière intervention
1 avril 2012
29 déc. 2009 à 09:40
0
Merci
Bon sa ma lair bien faut que je letudi de plus pres car je ni konnai rien en ajax. Merci!!
Commenter la réponse de cs_lilj
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Dernière intervention
30 août 2011
29 déc. 2009 à 10:12
0
Merci
Hésite pas si t'as des questions...


_________________________________
Min iPomme
Commenter la réponse de Tonio_35
Messages postés
205
Date d'inscription
dimanche 13 décembre 2009
Dernière intervention
1 avril 2012
29 déc. 2009 à 10:36
0
Merci
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 ?
Commenter la réponse de cs_lilj
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Dernière intervention
30 août 2011
29 déc. 2009 à 10:53
0
Merci
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
Commenter la réponse de Tonio_35
Messages postés
205
Date d'inscription
dimanche 13 décembre 2009
Dernière intervention
1 avril 2012
29 déc. 2009 à 12:06
0
Merci
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 ?
Commenter la réponse de cs_lilj
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Dernière intervention
30 août 2011
29 déc. 2009 à 14:09
0
Merci
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
Commenter la réponse de Tonio_35
Messages postés
205
Date d'inscription
dimanche 13 décembre 2009
Dernière intervention
1 avril 2012
29 déc. 2009 à 14:30
0
Merci
Jai reussi a le faire fonctionner sauf que jai du metre document.monform.moncham car getbyID ne fonctionne pas !
Commenter la réponse de cs_lilj
Messages postés
205
Date d'inscription
dimanche 13 décembre 2009
Dernière intervention
1 avril 2012
29 déc. 2009 à 14:30
0
Merci
Jai reussi a le faire fonctionner sauf que jai du metre document.monform.moncham car getbyID ne fonctionne pas !
Commenter la réponse de cs_lilj
Messages postés
205
Date d'inscription
dimanche 13 décembre 2009
Dernière intervention
1 avril 2012
29 déc. 2009 à 14:37
0
Merci
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
Commenter la réponse de cs_lilj
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Dernière intervention
30 août 2011
29 déc. 2009 à 15:40
0
Merci
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
Commenter la réponse de Tonio_35
Messages postés
205
Date d'inscription
dimanche 13 décembre 2009
Dernière intervention
1 avril 2012
29 déc. 2009 à 19:20
0
Merci
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 !!
Commenter la réponse de cs_lilj
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Dernière intervention
30 août 2011
29 déc. 2009 à 19:53
0
Merci
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
Commenter la réponse de Tonio_35
Messages postés
205
Date d'inscription
dimanche 13 décembre 2009
Dernière intervention
1 avril 2012
30 déc. 2009 à 06:30
0
Merci
Cest sur !!
Commenter la réponse de cs_lilj

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.