Select lié en JS+PHP : problème avec IE

Select lié en JS+PHP : problème avec IE - HTML/CSS - Programmation

Marsh Posté le 08-11-2009 à 11:23:32    

Bonjour à tous
 
Toujours un probleme avec IE 7 ou 8 !!!
 
Je me suis lancé dans l'écriture d'un site marchand !!!!!
Cette page permet de renseigner une table BEL_Stock à partir des info recuperées dans un table BEL_Catalogue  
 
test : http://www.yethi-info.fr/test/AjoutDansStockForm.php
 
Principe du code  
 
-le 1 <select> deroulant est construit par une req sql en ligne 148 > pas de probleme
-le 2eme <select> est renseigné lorsque il y a un changement dans le 1er select (onchange en lg 154)
-la fct appelMarque appelée a ce moment vas chercher un deuxieme php en lui envoyant en param la categorie (lg46)
 
tout marche bien avec FF ou Chrome mais pas avec IE... j'ai ajouté our les test un alert qui affiche l'indice de l'élément sélectionné dans le 1 select en lg45 et la j'ai un message dans IE 'Categorie est indefinie' ......
 
 
Et là je comprend plus rien..... si une bonne âme pouvait m'aider !!!!!
(j'ai pensé a un probleme dans la declaration de l'instance :fonction xmlhttp)
 
MERCI
 
Code :  

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Ajout d'article dans le stock</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <link rel="stylesheet" type="text/css" href="Boutique.css">
  7. </head>
  8. <script type="text/javascript">
  9. function xmlhttp()
  10. {
  11.  var x=null;
  12.  if (window.XMLHttpRequest) // Firefox et autres
  13.  x = new XMLHttpRequest();
  14.  else if (window.ActiveXObject) // Internet Explorer
  15.  {
  16.   try   {x = new ActiveXObject("Msxml2.XMLHTTP" );}
  17.   catch (e) {
  18.        try {x = new ActiveXObject("Microsoft.XMLHTTP" );}
  19.         catch (e) {x = null;}
  20.       }
  21.  }
  22.  else
  23.   {
  24.    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..." );
  25.   }
  26.  return x;
  27. }
  28. function AppelMarque()
  29. {
  30.  var xml = xmlhttp();
  31.  if(!xml)
  32.    {alert("XmlHttpRequest non supporté" );}
  33.  else
  34.    {xml.onreadystatechange = function()
  35.       {if (xml.readyState==4)
  36.       {var  opt=xml.responseText.split("\t" );
  37.          Marque.length=0;
  38.        for ( var n=1;n<opt.length;n++ )
  39.         {Marque.length++;
  40.         Marque.options[Marque.length-1].text=opt[n];
  41.         }
  42.       }
  43.      }
  45.      alert(Categorie.selectedIndex);
  46.      xml.open("GET", "AjoutDansStockFormMarque.php?GetCategorie="+Categorie.options[Categorie.selectedIndex].text, true);
  47.      xml.send(null);
  48.     }
  49. }
  50. function AppelModele()
  51. {
  52.  var xml = xmlhttp();
  53.  if(!xml)
  54.    {alert("XmlHttpRequest non supporté" );}
  55.  else
  56.    {xml.onreadystatechange = function()
  57.       {if (xml.readyState==4)
  58.       {var  opt=xml.responseText.split("\t" );
  59.          Modele.length=0;
  60.        for ( var n=1;n<opt.length;n++ )
  61.         {Modele.length++;
  62.         Modele.options[Modele.length-1].text=opt[n];
  63.         }
  64.       }
  65.      }
  66.      xml.open("GET", "AjoutDansStockFormModele.php?GetMarque="+Marque.options[Marque.selectedIndex].text+"&GetCategorie="+Categorie.options[Categorie.selectedIndex].text, true);
  67.      xml.send(null);
  68.     }
  69. }
  70. function AppelCouleur()
  71. {
  72.  var xml = xmlhttp();
  73.  if(!xml)
  74.    {alert("XmlHttpRequest non supporté" );}
  75.  else
  76.    {xml.onreadystatechange = function()
  77.       {if (xml.readyState==4)
  78.       {var  opt=xml.responseText.split("\t" );
  79.          Couleur.length=0;
  80.        for ( var n=1;n<opt.length;n++ )
  81.         {Couleur.length++;
  82.         Couleur.options[Couleur.length-1].text=opt[n];
  83.         }
  84.       }
  85.      }
  86.      xml.open("GET", "AjoutDansStockFormCouleur.php?GetModele="+Modele.options[Modele.selectedIndex].text+"&GetMarque="+Marque.options[Marque.selectedIndex].text+"&GetCategorie="+Categorie.options[Categorie.selectedIndex].text, true);
  87.      xml.send(null);
  88.     }
  89. }
  90. function AppelTaille()
  91. {
  92.  var xml = xmlhttp();
  93.  if(!xml)
  94.    {alert("XmlHttpRequest non supporté" );}
  95.  else
  96.    {xml.onreadystatechange = function()
  97.       {if (xml.readyState==4)
  98.       {var  opt=xml.responseText.split("\t" );
  99.          Taille.length=0;
  100.        for ( var n=1;n<opt.length;n++ )
  101.         {Taille.length++;
  102.         Taille.options[Taille.length-1].text=opt[n];
  103.         }
  104.       }
  105.      }
  106.      xml.open("GET", "AjoutDansStockFormTaille.php?GetCouleur="+Couleur.options[Couleur.selectedIndex].text+"&GetModele="+Modele.options[Modele.selectedIndex].text+"&GetMarque="+Marque.options[Marque.selectedIndex].text+"&GetCategorie="+Categorie.options[Categorie.selectedIndex].text, true);
  107.      xml.send(null);
  108.     }
  109. }
  110. function ControleVide()
  111. {
  112.  if(document.Formulaire.Nombre.value=='')
  113.   {
  114.   alert('Le nombre d\'article ne peut pas rester vide.');
  115.   document.Formulaire.Nombre.focus();
  116.   }
  117.   else if(isNaN(document.Formulaire.Nombre.value))
  118.   {
  119.   alert('Le nombre d\'article doit obligatoirement être numérique.');
  120.   document.Formulaire.Nombre.focus();
  121.   }
  122.   else if(document.Formulaire.Nombre.value.length>3)
  123.   {
  124.   alert('Le nombre d\'article ne peut pas excéder 3 caractères.');
  125.   document.Formulaire.Nombre.focus();
  126.   }
  127.   else
  128.   {
  129.   document.Formulaire.method = "POST";
  130.   document.Formulaire.action = "AjoutDansStockAction.php";
  131.   document.Formulaire.submit();
  132.   }
  133. }
  134. </script>
  135. <body>
  136. <div id="cadre_haut">
  137. </div>
  138. <div id="boite_centre">
  139.  <h4 align="center">Ajout d'article dans le stock</h4>
  140.  <?php
  141.  $co=mysql_connect("*****", "*****", "*****" );
  142.  $db=mysql_select_db("*****" );
  143.  //Affichage du nombre de ligne la table BEL_Stock
  144.  $retour = mysql_query("SELECT COUNT(*) AS nbre_entrees FROM BEL_Stock" );
  145.  $donnees = mysql_fetch_array($retour);
  146.  echo '<p><b>Actuellement ' . $donnees['nbre_entrees'] . ' ligne dans la table BEL_Stock</b></p>';
  147.  //== on affiche dans un select la TABLE 1 ==
  148.  $res=mysql_query("SELECT DISTINCT Categorie FROM BEL_Catalogue",$co);
  149.  $max=@mysql_num_rows($res);
  150.  ?>
  151.  <form name="Formulaire">
  152.   <div id="form1">
  153.    <label for="Categorie">Catégorie :</label><br>
  154.    <select style="width:100%;" name="Categorie" id="Categorie" size=5 onchange='AppelMarque();'>
  155.    <?php
  156.     for ($nb=0;$nb<$max;$nb++)
  157.     {
  158.      $i=mysql_result($res,$nb,"Categorie" );
  159.      echo '<option>'.$i.'</option>';
  160.     }
  161.    ?> 
  162.    </select>
  163.   </div>
  165.   <div id="form2">
  166.    <label for="Marque">Marque :</label><br>
  167.    <select style="width:100%;" name="Marque" id="Marque" size=5 onchange='AppelModele();'> 
  168.    </select>
  169.   </div>
  171.   <div id="form3">
  172.    <label for="Modele">Modèle :</label><br>
  173.    <select style="width:100%;" name="Modele" id="Modele" size=5 onchange='AppelCouleur();'> 
  174.    </select>
  175.   </div>
  177.   <div id="form4">
  178.    <label for="Couleur">Couleur :</label><br>
  179.    <select style="width:100%;" name="Couleur" id="Couleur" size=5 onchange='AppelTaille();'>
  180.    </select>
  181.   </div>
  183.   <div id="form5">
  184.    <label for="Taille">Taille :</label><br>
  185.    <select style="width:100%;" name="Taille" id="Taille" size=5>
  186.    </select>
  187.   </div>
  188.   <div id="form6">
  189.    <label for="Nombre">Nombre d'article:</label><br>
  190.    <input type="text" name="Nombre" id="Nombre" size=5>
  191.   </div>
  192.   <?php
  193.     mysql_close($co);
  194.   ?>
  195.   <div id="bouton">
  196.    <input type="button" value="Valider" onClick="ControleVide();">
  197.   </div>
  198.  </form>
  199. </div>
  200. <div id="cadre_bas">
  201. </div>
  202. </body>
  203. </html>


Message édité par yethi le 08-11-2009 à 11:34:15
Reply

Marsh Posté le 08-11-2009 à 11:23:32   

Reply

Marsh Posté le 08-11-2009 à 11:43:20    

n'appelle pas directement categorie comme si il existait partout, déjà
utilise plutôt  
var categorie = document.getElementById('Categorie');


---------------

Reply

Marsh Posté le 08-11-2009 à 20:23:06    

Merci Flo850 pour ta réponse
 
J'ai modifié la fonction AppelMarque et maintenant ca fonctionne Youppie !!!
Petite question quand même il m'a aussi fallu ajouter la ligne
 
var Marque = document.getElementById('Marque');
 
dans la partie qui "remplit" le 2eme select mais là ca me parrait moins clair : a ce moment les options du 2eme select ne sont pas renseignées alors kes qu'il va chercher ?????
 
De toutes manieres : MERCI !!!
 
 

Code :
  1. function AppelMarque()
  2. {
  3.  var xml = xmlhttp();
  4.  var Categorie = document.getElementById('Categorie');
  5.  if(!xml)
  6.    {alert("XmlHttpRequest non supporté" );}
  7.  else
  8.    {
  9.     xml.onreadystatechange = function()
  10.      {
  11.       if (xml.readyState==4)
  12.       {
  13.        var opt = xml.responseText.split("\t" );
  14.        var Marque = document.getElementById('Marque');
  15.         Marque.length=0;
  16.         for ( var n=1;n<opt.length;n++ )
  17.          {
  18.           Marque.length++;
  19.           Marque.options[Marque.length-1].text=opt[n];
  20.          }
  21.       }
  22.      }
  23.      xml.open("GET", "AjoutDansStockFormMarque.php?GetCategorie="+Categorie.options[Categorie.selectedIndex].text, true);
  24.      xml.send(null);
  25.    }
  26. }


Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed