| Auteur |
|
| Master |
|
| 8 Posts |
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>";
?>
|
|
| PanPan50 |
|
| 63 Posts |
C'est quoi le problème exactement ? Parce que ce n'est pas trés clair....
|
|
| Master |
|
| 8 Posts |
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
|
|
| PanPan50 |
|
| 63 Posts |
$_POST["souscategorie"]
|
|
| Master |
|
| 8 Posts |
Sa marche pas.....
Notice: Undefined index: souscategorie in C:\xampp\htdocs\ajaxlivre.php on line 13
|
|
| Gothor |
|
| 325 Posts |
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)
|
|
| unami |
|
| 75 Posts |
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="  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.
|
|
| Master |
|
| 8 Posts |
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> </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
|
|
| unami |
|
| 75 Posts |
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
|
|
| Master |
|
| 8 Posts |
La même erreur :
|
|
| unami |
|
| 75 Posts |
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 
Bon courage
|
|
| Master |
|
| 8 Posts |
Et enfin, merci beaucoup "unami"  ça marche bien ... (Juste pour l'info mon ami, je suis encore un élève non pas un developper  )
|
|
| unami |
|
| 75 Posts |
Bon continuation dans tes études alors
|
|
HTML Best Effort Valid
