par
pacphil » 14 oct. 2011, 22:30
bonjour voici la fonction ajax et ma page listeAjax.php et une partie de mon formulaire.
Le soucis c'est quand je choisi une liste dans mon premier menu déroulant le second devrai y être aussi c'est pas le cas je trouve pas la solutions ???
j'aurai besoin d'une aide?
Code : Tout sélectionner
/* Initialisation XMLHttpRequest */
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 { // XMLHttpRequest non supporté par le navigateur
alert ("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
};
/* Changer la liste 2 après choix dans la liste 1 */
function changeList2FromList1(id_lis1,id_div2){
var id_lis1; // valeur de l option choisie (liste 1)
var id_div2; // id du div qu'on remplira (liste 2)
var xhr = getXhr();
xhr.onreadystatechange = function(){
// si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200)
{
texthtml = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste des "selections"
document.getElementById(id_div2).innerHTML = texthtml;
}
}
// on defini la methode (post) + le fichier de traitement + asynchrone (true)
xhr.open("POST","listeAjax1.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// on poste les parametres a transmettre au fichier qui fera le traitement
xhr.send("idlist1selected="+id_lis1);
};
liste ajax
<?php
// Ajax : affichage correct des accents
header('Content-Type: text/html; charset=ISO-8859-15');
// Ajax : Changer la liste 2 après choix dans la liste 1
if(isset($_POST['idlist1selected']) && is_numeric($_POST['idlist1selected']) && $_POST['idlist1selected']!=0)
{
// recuperation de id_liste1
$id_liste1_selected = intval($_POST['idlist1selected']);
switch ($id_liste1_selected) {
case 0;
echo'<select id="id_selection" name="selection">
<option value="0">Choisissez ...</option>';
break;
case 1;
echo'<option value="1">Aartselaar</option>
<option value="2">Anvers</option>
<option value="3">Arendonk</option>
<option value="4">Baarle-Hertog</option>
<option value="5">Balen</option>
<option value="6">Beerse</option>
<option value="7">Berlaar</option>
<option value="8">Boechout</option>
<option value="9">Bonheiden</option>
<option value="10">Boom</option>
<option value="11">Bornem</option>
<option value="12">Borsbeek</option>
<option value="13">Brasschaat</option>
<option value="14">Brecht</option>
<option value="15">Dessel</option>
<option value="16">Duffel</option>
<option value="17">Edegem</option>
<option value="18">Essen</option>
<option value="19">Geel</option>
<option value="20">Grobbendonk</option>
<option value="21">Heist-op-den-Berg</option>
<option value="22">Hemiksem</option>
<option value="23">Herentals</option>
<option value="24">Herenthout</option>
<option value="25">Herselt</option>
<option value="26">Hoogstraten</option>
<option value="27">Hove</option>
<option value="28">Hulshout</option>
<option value="29">Kalmthout</option>
<option value="30">Kapellen</option>
<option value="31">Kasterlee</option>
<option value="32">Kontich</option>
<option value="33">Laakdal</option>
<option value="34">Lier</option>
<option value="35">Lille</option>
<option value="36">Lint</option>';
break;
case 2;
echo'<option value="4">Vente Maisons</option>
<option value="5">Locations Maisons</option>';
break;
case 3;
echo'<option value="6">Entretien jardin</option>
<option value="7">Pavage terrasse</option>';
break;
}
echo'</select>';
} else { // SI PAS de liste 1 choisie (0) ou erreur : on remet le select "par defaut" :
echo'<select id="ididliste2" name="idliste2">
<option value="0">(Choisissez d´abord dans la liste 1)</option>
</select>';
}
?>
et enfin mon formulaire
<td><form><b>Province :</b></td>
<td><select id="ididliste1" name="idliste1" onchange="changeList2FromList1(this.options[this.selectedIndex].value,'iddivListe2');">
<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
<option value="0">Choisissez ...</option>
<option value="1">Anvers</option>
<option value="2">Bruxelles</option>
<option value="3">Brabant flamand</option>
<option value="4">Brabant wallon</option>
<option value="5">Flandre occidentale</option>
<option value="6">Flandre orientale</option>
<option value="7">Hainaut</option>
<option value="8">Liege</option>
<option value="9">Limbourg</option>
<option value="10">Luxembourg</option>
</select>
</td>
<td><b>Ville :</b></td>
<td><span id="iddivListe2"><!-- c'est ici que par innerHTML AJAX va ecrire la liste 2 -->
<!-- on peut mettre d abord une option "par defaut" : -->
<select id="iddivListe2" name="idliste2">
<option value="0">(Choisissez d´abord dans la liste 1)</option>
</select>
</span>
</td>
</tr>
<tr>
bonjour voici la fonction ajax et ma page listeAjax.php et une partie de mon formulaire.
Le soucis c'est quand je choisi une liste dans mon premier menu déroulant le second devrai y être aussi c'est pas le cas je trouve pas la solutions ???
j'aurai besoin d'une aide?
[code] /* Initialisation XMLHttpRequest */
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 { // XMLHttpRequest non supporté par le navigateur
alert ("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
return xhr;
};
/* Changer la liste 2 après choix dans la liste 1 */
function changeList2FromList1(id_lis1,id_div2){
var id_lis1; // valeur de l option choisie (liste 1)
var id_div2; // id du div qu'on remplira (liste 2)
var xhr = getXhr();
xhr.onreadystatechange = function(){
// si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200)
{
texthtml = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste des "selections"
document.getElementById(id_div2).innerHTML = texthtml;
}
}
// on defini la methode (post) + le fichier de traitement + asynchrone (true)
xhr.open("POST","listeAjax1.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// on poste les parametres a transmettre au fichier qui fera le traitement
xhr.send("idlist1selected="+id_lis1);
};[/code]
liste ajax
[php]<?php
// Ajax : affichage correct des accents
header('Content-Type: text/html; charset=ISO-8859-15');
// Ajax : Changer la liste 2 après choix dans la liste 1
if(isset($_POST['idlist1selected']) && is_numeric($_POST['idlist1selected']) && $_POST['idlist1selected']!=0)
{
// recuperation de id_liste1
$id_liste1_selected = intval($_POST['idlist1selected']);
switch ($id_liste1_selected) {
case 0;
echo'<select id="id_selection" name="selection">
<option value="0">Choisissez ...</option>';
break;
case 1;
echo'<option value="1">Aartselaar</option>
<option value="2">Anvers</option>
<option value="3">Arendonk</option>
<option value="4">Baarle-Hertog</option>
<option value="5">Balen</option>
<option value="6">Beerse</option>
<option value="7">Berlaar</option>
<option value="8">Boechout</option>
<option value="9">Bonheiden</option>
<option value="10">Boom</option>
<option value="11">Bornem</option>
<option value="12">Borsbeek</option>
<option value="13">Brasschaat</option>
<option value="14">Brecht</option>
<option value="15">Dessel</option>
<option value="16">Duffel</option>
<option value="17">Edegem</option>
<option value="18">Essen</option>
<option value="19">Geel</option>
<option value="20">Grobbendonk</option>
<option value="21">Heist-op-den-Berg</option>
<option value="22">Hemiksem</option>
<option value="23">Herentals</option>
<option value="24">Herenthout</option>
<option value="25">Herselt</option>
<option value="26">Hoogstraten</option>
<option value="27">Hove</option>
<option value="28">Hulshout</option>
<option value="29">Kalmthout</option>
<option value="30">Kapellen</option>
<option value="31">Kasterlee</option>
<option value="32">Kontich</option>
<option value="33">Laakdal</option>
<option value="34">Lier</option>
<option value="35">Lille</option>
<option value="36">Lint</option>';
break;
case 2;
echo'<option value="4">Vente Maisons</option>
<option value="5">Locations Maisons</option>';
break;
case 3;
echo'<option value="6">Entretien jardin</option>
<option value="7">Pavage terrasse</option>';
break;
}
echo'</select>';
} else { // SI PAS de liste 1 choisie (0) ou erreur : on remet le select "par defaut" :
echo'<select id="ididliste2" name="idliste2">
<option value="0">(Choisissez d´abord dans la liste 1)</option>
</select>';
}
?>
[/php]
et enfin mon formulaire
[html] <td><form><b>Province :</b></td>
<td><select id="ididliste1" name="idliste1" onchange="changeList2FromList1(this.options[this.selectedIndex].value,'iddivListe2');">
<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
<option value="0">Choisissez ...</option>
<option value="1">Anvers</option>
<option value="2">Bruxelles</option>
<option value="3">Brabant flamand</option>
<option value="4">Brabant wallon</option>
<option value="5">Flandre occidentale</option>
<option value="6">Flandre orientale</option>
<option value="7">Hainaut</option>
<option value="8">Liege</option>
<option value="9">Limbourg</option>
<option value="10">Luxembourg</option>
</select>
</td>
<td><b>Ville :</b></td>
<td><span id="iddivListe2"><!-- c'est ici que par innerHTML AJAX va ecrire la liste 2 -->
<!-- on peut mettre d abord une option "par defaut" : -->
<select id="iddivListe2" name="idliste2">
<option value="0">(Choisissez d´abord dans la liste 1)</option>
</select>
</span>
</td>
</tr>
<tr>[/html]