8795 sujets

Développement web côté serveur, CMS

j'ai créé une liste déroulante (catégorie) liée à un une autre(sous catégorie), le code fonctionne et tout marche bien...Mais, j'ai trouvé une difficulté au niveau de la récupération de la valeur de sous categorie choisie(à partir de la 2ème liste) par l'utilisateur pour la stocker dans un autre table SQL.

NB: la base de données est déjà crée.

catégorie.php :
<html>
	<head>
		<title>Liste</title>
		<script type='text/javascript'>
	 
			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 go(){
				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){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('souscategorie').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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 Catégorie
				sel = document.getElementById('categorie');
				idcategorie = sel.options[sel.selectedIndex].value;
				xhr.send("idcategorie="+idcategorie);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Categorie</label>
				<select name='categorie' id='categorie' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("test");
						$res = mysql_query("SELECT * FROM categorie ORDER BY categorie");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["categorie"]."</option>";
						}
					?>
				</select>
				<label>sous categorie</label>
				<div id='souscategorie' style='display:inline'>
				<select name='souscategorie'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>



ajaxlivre.php :

<?php
	echo "<select name='souscategorie'>";
	if(isset($_POST["idcategorie"])){
		mysql_connect("localhost","root","");
		mysql_select_db("test");
		$res = mysql_query("SELECT id,souscategorie FROM souscategorie 
			WHERE idcategorie=".$_POST["idcategorie"]." ORDER BY souscategorie");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["souscategorie"]."</option>";
		}
	}
	echo "</select>";
?>
y a pas ni problème de connexion ni d'affichage de deux liste....je veux savoir seulement comment récupérer la valeur de la liste déroulante sous catégorie
Sa marche pas.....
Notice: Undefined index: souscategorie in C:\xampp\htdocs\ajaxlivre.php on line 13
En JavaScript, pour récupérer la valeur de ton select d'id "categorie", tu peux faire :
// Récupération de la valeur sélectionnée (le texte affiché)
document.byId('categorie').value;
// Récupération de l'index de la valeur sélectionnée (le numéro de la ligne)
document.byId('categorie').selectedIndex;

Modifié par Gothor (14 Feb 2012 - 10:54)
Bonjour

Sur ton code je ne vois pas où as tu essayé de récupérer ta variable, alors si tu veux la récupérer avec du JS je crois que tu connais déjà le comment puisque tu l'as fait avec Catégorie, par conséquent je suppose que c'est au niveau de php que tu veux l'avoir, dans ce cas ma réponse et comme suit:

Ton formulaire manque des deux attributs action=" Smiley url page_de_réception_des_données" et aussi method="post/get" pour spécifier la méthode d’envoi, et je ne voie null part aussi ni de bouton ou de fontcion de soumission, et sur cette page tu fait usage soit à $_POST['nom_de_variable'] ou $_GET['nom_de_variable'], selon la method que tu as spécifié sur ton formulaire.
Voila mon travail :

index.php
<?php

echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");

/* Variables de connexion : ajustez ces paramètres selon votre propre environnement */

$serveur = "localhost";

$admin   = "root";

$mdp     = "";

$base    = "test";

?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Publier une annonce</title>

<meta name="description" content="Listes dynamiques liées: la seconde liste est modifiée via un objet XHR lors d'une sélection sur la première." />

<meta name="keywords" content="menu,déroulant,select,liées,JavaScript" />

<meta name="author" content="Cyrano" />

<meta name="generator" content="Zend Studio Environnement et WebExpert 5" />

<meta http-equiv="imagetoolbar" content="no" />

<meta http-equiv="Pragma" content="no-cache" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>

		<script type='text/javascript'>
	 
			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 go(){
				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){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('souscategorie').innerHTML = leselect;
					}
				}

				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxlivre.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
				sel = document.getElementById('categorie');
				idCategorie = sel.options[sel.selectedIndex].value;
				xhr.send("idcategorie="+idCategorie);
			}
		</script>


<script type="text/javascript" >
 $(document).ready(function() { 
		
            $('#photoimg').live('change', function()			{ 
			           $("#preview").html('');
			    $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
			$("#imageform").ajaxForm({
						target: '#preview'
		}).submit();
		
			});
        }); 
</script>

<style>

body
{
font-family:arial;
}
.preview
{
width:200px;
border:solid 1px #dedede;
padding:10px;
}
#preview
{
color:#cc0000;
font-size:12px
}

</style>
<script type="text/javascript" src="./cat1_xhr.js" charset="iso_8859-1"></script>



</head>

<body style="cursor: auto;">

<table width="669" border="0">
     <form action="cible.php" method="post" enctype="multipart/form-data">
                        
  <tr>
    <td width="154" align="right" nowrap="nowrap"><B>Catégorie *</B></td>
    <td width="505" scope="col"><select name='categorie' id='categorie' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("test");
						$res = mysql_query("SELECT * FROM categorie ORDER BY categorie");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["categorie"]."</option>";
						}
					?>
				</select>
                          
                          </td>
                          
               <tr>
                 <td align="right" nowrap="nowrap"><b>Sous Catégorie *</b></td>
    <td>	<div id='souscategorie' style='display:inline'>
				<select name='souscategorie' id="souscategorie"">
					<option value='-1'>Choisir sous categorie</option>
				</select>
				</div></td></tr>
  <tr>
    <td>&nbsp;</td>
    <td>         <input name="submit"  value="Publier cette annonce" type="submit">
      <input name="reset" value="Annuler" type="reset"></td>
  </tr>
  
  </form>
</table>

</body>
</html>


cible.php
<?php

include('db.php');
echo "Categorie : ";
$x=	$_POST['categorie'];
					   $cat=mysql_query("Select id,categorie from categorie where id='$x'");
						   $resultat= mysql_fetch_array($cat);
						   echo $resultat["categorie"];
	?><br><?		
	echo " Sous Categorie : ";		
			$x1=$_POST['souscategorie'];
					echo $x1;		
						   $cat1=mysql_query("Select id,souscategorie from souscategorie where id='$x1'");
						   $resultat1= mysql_fetch_array($cat1);
						   echo $resultat1["souscategorie"];
			
?>


ajaxlivre.php

<?php
	echo "<select name='souscategorie'>";
	if(isset($_POST["idcategorie"])){
		mysql_connect("localhost","root","");
		mysql_select_db("test");
		$res = mysql_query("SELECT id,souscategorie FROM souscategorie 
			WHERE idcategorie=".$_POST["idcategorie"]." ORDER BY souscategorie");
		while($row = mysql_fetch_assoc($res)){
			?>
		 <?	echo "<option value='".$row["id"]."'>".$row["souscategorie"]."</option>"; 
		}
	}
	echo "</select>";
	
	?>


Mon but c'est d'afficher la Valeur sous Catégorie dans la page cible.php
Bonsoir
Oui je comprends ton problème maintenant, en fait je suppose que tu testes sur un navigateur IE, mais avant j'ai quelques remarques :

-l'id souscategorie tu en a faits usage deux fois une pour le select et la deuxième pour son parent, je suppose que tu gardes l'id pour le div parent pour la suite de réponse.
-Tu as codé ton fichier en XHTML et toute fois tu délimites les valeurs de tes attributs par fois avec des (') au lieu des (") .

Le problème se trouve ici:
// On se sert de innerHTML pour rajouter les options a la liste 
document.getElementById('souscategorie').innerHTML = leselect;


Pour IE innerHTML ne crée pas les éléments reçu dans le DOM et les ignore à la soumission du formulaire, pour cela je te conseille de faire recours à Jquery qui fera le boulot pour toi puisque tu l'utilise déjà, si non pour le faire avec le createElement et le setAttribute tu vas avoir un code très long et embêtant, alors ma proposition et comme suit:
// On crée la liste dans le DOM
$('#souscategorie').html('');
$('#souscategorie').append($(leselect));


J'espère que ça répond à ta question
Re

En fait j'ai corrigé ton problème, je sais que la non-conformité de la structure XHtml au standards peut engendre des problème mais là je comprends pas pour quoi alors il laisse une valeur passé et l'autre non.

La question est purement relié à l'XHtml, En tout cas tu as mis ta balise <form ...> dans la balise <table> ce qui n'est pas bon du tout, c'est la balise <form> qui va contenir le <table>:

<form>
  <table>
  </table>
</form>


cela va résoudre ton problème (Je l'ai tester) à l'addition de ce que j'ai dit tout à l'heure
Toute fois pour les structure X/Html tu dois encore te former à ce niveau, si non tu rencontrera pleines d’ennuis de ce genre Smiley biggrin
Bon courage
Et enfin, merci beaucoup "unami" Smiley smile ça marche bien Smiley biggrin ... (Juste pour l'info mon ami, je suis encore un élève non pas un developper Smiley ravi )