[AJAX] Liste déroulante dynamique
Bonjour,
Nouveau sur ce site super, je me suis enfin décidé de demander votre aide car cela fait au moins 2 semaine que je suis bloqué.
Débutant en développement, encore plus en javascript et encore plus débutant en ajax, j'ai suivi un tuto pour mettre en place des listes déroulantes dynamiques. Cela fonctionne mais j'ai besoin maintenant d'afficher en dessous, dans un div qui s'appelle resultat, la reference choisie dans la liste deroulante produit.
Mais impossible rien ne s'affiche et je ne comprend pas pourquoi.
merci de votre aide
**********************************************************
PAGE PRINCIPALE newpropo3.php
**********************************************************
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260
| <script type="text/javascript">
<!-- script navigation par onglet -->
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
<!-- script verification formulaire -->
function verif_formulaire()
{
if(document.formulaire.date.value == "") {
alert("Veuillez entrer la date !");
document.formulaire.date.focus();
return false;
}
if(document.formulaire.societe.value == "") {
alert("Veuillez entrer le nom de la société !");
document.formulaire.societe.focus();
return false;
}
if(document.formulaire.interlocuteur.value == "") {
alert("Veuillez entrer le nom de l'interlocuteur !");
document.formulaire.interlocuteur.focus();
return false;
}
if(document.formulaire.mail.value == "") {
alert("Veuillez entrer l'adresse mail !");
document.formulaire.mail.focus();
return false;
}
adresse = formulaire.mail.value;
var place = adresse.indexOf("@",1);
var point = adresse.indexOf(".",place+1);
if ((place > -1)&&(adresse.length >2)&&(point > 1))
{
formulaire.submit();
return(true);
}
else
{
alert('Entrez une adresse e-mail valide !');
return(false);
}
}
<!-- script listes deroulantes dynamiques -->
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;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function change(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById('resultproduit').innerHTML = xhr.responseText;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxProduit.php",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, l'id de l'auteur
idtype = document.getElementById('type').options[document.getElementById('type').selectedIndex].value;
idmarque = document.getElementById('marque').options[document.getElementById('marque').selectedIndex].value;
xhr.send("idType="+idtype+"&idMarque="+idmarque);
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function result(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById('resultat').innerHTML = xhr.responseText;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxResultat.php",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, l'id de l'auteur
idproduit = document.getElementById('produit').options[document.getElementById('produit').selectedIndex].value;
xhr.send("idProduit="+idproduit);
}
</script>
<form name="formulaire" method="post" action="?page=resultat" onSubmit="return verif_formulaire()">
<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="50" align="center"></td>
</tr>
<tr>
<td>
<div class="systeme_onglets">
<div class="onglets" align="left">
<span class="onglet_0 onglet" id="onglet_expediteur" onclick="javascript:change_onglet('expediteur');">EXPEDITEUR</span>
<span class="onglet_0 onglet" id="onglet_destinataire" onclick="javascript:change_onglet('destinataire');">DESTINATAIRE</span>
<span class="onglet_0 onglet" id="onglet_machine" onclick="javascript:change_onglet('machine');">MACHINE ET OPTIONS</span>
<span class="onglet_0 onglet" id="onglet_tarifs" onclick="javascript:change_onglet('tarifs');">TARIFS</span>
<span class="onglet_0 onglet" id="onglet_observations" onclick="javascript:change_onglet('observations');">OBSERVATIONS</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_expediteur">
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td colspan="2" height="30"></td>
</tr>
<tr>
<td width="200" align="left" class="champs">DATE DE LA PROPOSITION :</td>
<td align="left"><input type="text" name="date" id="champs" size="15" value="<?php if (isset($_POST['date'])) { echo $_POST['date']; } else { echo date("d/m/Y");} ?>"></td>
</tr>
<tr>
<td align="left" class="champs">EXPEDTEUR :</td>
<td align="left"><div class="champs"><?php {echo "$pseudo";} ?></span></td>
</tr>
<tr>
<td align="left" class="champs">QUALITE :</td>
<td align="left"><div class="champs"><?php {echo "$qualite";} ?></span></td>
</tr>
<tr>
<td colspan="2" height="30"></td>
</tr>
</table>
</div>
<div class="contenu_onglet" id="contenu_onglet_destinataire">
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td colspan="2" height="30"></td>
</tr>
<tr>
<td width="200" align="left" class="champs">NOM DE LA SOCIETE :</td>
<td align="left" colspan="2"><input type="text" name="societe" id="champs" size="60" value="<?php if(isset($_POST['societe'])) echo $_POST['societe']; ?>"></td>
</tr>
<tr>
<td align="left" class="champs">A L'ATTENTION DE :</td>
<td align="left"><select name="civ" id="champs" ><option value="Monsieur" <?php if(isset($_POST['civ'])) if($_POST['civ']== 'Monsieur') echo 'selected'; ?>>Monsieur</option>
<option value="Madame" <?php if(isset($_POST['civ'])) if($_POST['civ']== 'Madame') echo 'selected'; ?>>Madame</option>
<option value="Mademoiselle" <?php if(isset($_POST['civ'])) if($_POST['civ']== 'Mademoiselle') echo 'selected'; ?>>Mademoiselle</option>
</select> </td>
<td align="left"><input type="text" name="interlocuteur" id="champs" size="60" value="<?php if(isset($_POST['interlocuteur'])) echo $_POST['interlocuteur']; ?>"></td>
</tr>
<tr>
<td align="left" class="champs">ADRESSE MAIL DESTINATAIRE :</td>
<td align="left" colspan="2"><input type="text" name="mail" id="champs" size="60" value="<?php if(isset($_POST['mail'])) echo $_POST['mail']; ?>"></td>
</tr>
<tr>
<td colspan="2" height="30"></td>
</tr>
</table>
</div>
<div class="contenu_onglet" id="contenu_onglet_machine">
<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td colspan="2" height="30"></td>
</tr>
<tr>
<td width="100" align="left" class="champs">MARQUE :</td>
<td align="left">
<select name='marque' id='marque' onchange='change()'><option value='-1'>Aucun</option>
<?php
mysql_select_db("propo");
$res = mysql_query("SELECT * FROM marque ORDER BY id_marque");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["nom_marque"]."'>".$row["nom_marque"]."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td width="100" align="left" class="champs">TYPE :</td>
<td align="left">
<select name='type' id='type' onchange='change()'><option value='-1'>Aucun</option>
<?php
mysql_select_db("propo");
$res = mysql_query("SELECT * FROM type ORDER BY id_type");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["nom_type"]."'>".$row["nom_type"]."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td align="left" class="champs">PRODUIT :</td>
<td align="left">
<div id='resultproduit'>
<select name='produit'>
<option value='-1'>Aucun</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2" height="30"><div id='resultat'>resultat</div></td>
</tr>
</table>
</div>
<div class="contenu_onglet" id="contenu_onglet_tarifs">
<h1>TARIFS</h1>
Pour simplifier la navigation et la diviser en parties
</div>
<div class="contenu_onglet" id="contenu_onglet_observations">
<h1>OBSERVATIONS</h1>
Pour simplifier la navigation et la diviser en parties
</div>
</div>
</div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//<!--
var anc_onglet = 'expediteur';
change_onglet(anc_onglet);
//-->
</script> |
**********************************************************
PAGE ajaxProduit.php
**********************************************************
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <?php
echo "<select name='produit' onchange='result()' >";
if(isset($_POST['idType'])&& $_POST['idType'] != '-1' OR isset($_POST['idMarque']) && $_POST['idMarque'] != '-1'){
require('inc/connect_bdd.php');
mysql_select_db("propo");
$Cnd="";
if(isset($_POST['idMarque']) && $_POST['idMarque'] != '-1') $Cnd=" and marque='".$_POST['idMarque']."'";
if(isset($_POST['idType']) && $_POST['idType'] != '-1') $Cnd.=" and type_1='".$_POST['idType']."'";
$Cnd.=" and visible='OUI'";
$req = mysql_query("SELECT * FROM produits WHERE 1=1".$Cnd );
//on compte les résultats
$res= mysql_numrows($req);
if($res !='0') {
while($row = mysql_fetch_assoc($req)){
echo "<option value='".$row["id"]."'>".$row["reference"]."</option>";}
echo "</select>";
} else {
echo "<option value='-1'>Aucun</option>";}
} else {
echo "<option value='-1'>Aucun</option>";
}
?> |
**********************************************************
PAGE ajaxResultat.php
**********************************************************
Code:
1 2 3 4 5 6 7 8 9 10
| <?php
if(isset($_POST['idProduit'])&& $_POST['idProduit'] != '-1' ){
echo ($_POST['idProduit']);
} else {
echo "Rien recu";}
?> |