Page 1 sur 1

Pb de onchange -> concaténation de variable à la volée ?!

Posté : 10 mars 2006, 16:52
par didgar
Salut !

Ca fait un moment que je tourne en rond ! N'y tenant plus, je demande de l'aide.


Voici mon pb ! A la fin du [ long ] script ci-dessous, il y a deux var JS tab_1 et tab_2 qui contiennent du HTML. Ces deux variables sont fabriquées à la volée par du PHP. Ca pas de pb je maitrise ;-)

Dans mon form, il y a un menu déroulant "id_groupe" avec 4 propositions : Groupe 1 => value = 1 , Groupe 2 => value 2 etc ...

Dans le script il y a un "<span id="blocRubParent"></span>" dont le contenu, un autre menu déroulant, est supposé être affiché dynamiquement :

1 - au chargement de la page
2 - quand on change de Groupe avec un onchange

Ca fonctionne si en bas de script JS je tape en dur afficheMenu(tab_1); ou afficheMenu(tab_2);

Si je remets afficheMenu('tab_'+document.getElementById("id_groupe").value); ben il m'affiche la chaine de caractères tab_x ( ou x est la value du groupe ) au lieu de m'afficher le menu déroulant adéquat ! Je suis pas sur que mes explications soient hyper claires !

Si quelqu'un a une piste ...

Merci d'avance !

A+

Didier qui laisse la place au code :
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table border="0" cellspacing="5" cellpadding="5" align="center" style="background-color:#E7E7E7; margin-top:20px; border:1px solid #000; margin-bottom:20px">
    <tr><th colspan="2">Modification de la Rubrique</th></tr>

    <form action="/page.php" method="post" name="rubrique" id="rubrique">
    <tr>
    <td>Cette rubrique appartient au groupe</td>
    <td>
		<select name="id_groupe" id="id_groupe" class="formfield" onChange="afficheMenu('tab_'+this.value);">
		<option value="1">Groupe 1</option>
		<option value="2"  selected>Groupe 2</option>
		<option value="3" >Groupe 3</option>
		<option value="4" >Groupe 4</option>
		</select>
	</td>
  </tr>
      <tr>
    <td>Cette rubrique descend de </td>
    <td>
		<span id="blocRubParent"></span> <!-- second menu déroulant -->
	</td>
  </tr>
  <tr>
    <td>Non de la rubrique</td>
    <td><input name="titre_rub" type="text" value="Categ" class="formfield"></td>
  </tr>
  <tr>
    <td>En ligne</td>
    <td>
		<select name="published" class="formfield2">
			<option value="1" selected>Oui</option>
			<option value="2" >Non</option>
		</select>
	</td>
  </tr>
    <input name="key_value" type="hidden" value="id_rub">
	<input name="value_id" type="hidden" value="4">
  
    <tr>
    <td colspan="2" align="center"><input name="reset" type="reset" class="submit" value="Annuler">&nbsp;<input name="submit" type="submit" class="submit"></td>
  </tr>
  </form>
</table>	
<script type="text/javascript">

function afficheMenu(toThis)
  {
  	alert(toThis);
	if (document.getElementById)
    {
   	 	document.getElementById("blocRubParent").innerHTML = toThis;
    }
  	else if (document.all)
    {
    	document.all["blocRubParent"].innerHTML = toThis;
    }
  }

var tab_1 = '<select name=\"rub_parent\" class=\"formfield\" id=\"dyn_rubrique\"><option value=\"0\">Personne !</option><option value=\"1\" >Accueil</option><option value=\"2\" selected>Toto</option><option value=\"5\" >Tata</option><option value=\"6\" >Titi</option></select>';
var tab_2 = '<select name=\"rub_parent\" class=\"formfield\" id=\"dyn_rubrique\"><option value=\"0\">Personne !</option><option value=\"1\" >Accueil</option><option value=\"2\" selected>Marcel</option><option value=\"5\" >René</option><option value=\"6\" >Paulo</option></select>';	

afficheMenu('tab_'+document.getElementById("id_groupe").value); // rempli le second menu deroulant à partir de la value du menu id_groupe selectionné par défaut !
</script>
</body>
</html>

Posté : 10 mars 2006, 23:27
par Truc
Salut,

l'affichage est tab_x car la variable passée est considérée comme un string donc ce qui doit être affiché.

Proposition, en passant par un tableau:
<script type="text/javascript">

var tab_1 = '<select name=\"rub_parent\" class=\"formfield\" id=\"dyn_rubrique\"><option value=\"0\">Personne !</option><option value=\"1\" >Accueil</option><option value=\"2\" selected>Toto</option><option value=\"5\" >Tata</option><option value=\"6\" >Titi</option></select>';
var tab_2 = '<select name=\"rub_parent\" class=\"formfield\" id=\"dyn_rubrique\"><option value=\"0\">Personne !!</option><option value=\"1\" >Accueil</option><option value=\"2\" selected>Marcel</option><option value=\"5\" >René</option><option value=\"6\" >Paulo</option></select>';    


var tableau = new Array(tab_1,tab_2);

function afficheMenu(toThis)
  {
    
	index = toThis - 1;
	  
    if (document.getElementById)
    {
            document.getElementById("blocRubParent").innerHTML = tableau[index];
    }
      else if (document.all)
    {
        document.all["blocRubParent"].innerHTML = tableau[index];
    }
  }

afficheMenu(document.getElementById("id_groupe").value); // rempli le second menu deroulant à partir de la value du menu id_groupe selectionné par défaut !
</script>
et l'appel de la fonction:
onChange="afficheMenu(this.value);"

Posté : 10 mars 2006, 23:59
par didgar
Salut !

Je n'ai pas encore essayé ta solution mais elle semble tout à fait habile !!!!

A+

Didier

Posté : 11 mars 2006, 00:09
par didgar
Re !

Bon ! Je viens d'essayer mon bordel avec tes modifs et ça marche parfaitement =D>

Par contre quand j'envoie le form, méthode POST, et bien figure toi que je reçois tous mes couples nom_de_la_variable => value_de_la_variable SAUF le couple issu du menu déroulant affiché dynamiquement #-o :-k ](*,)

Chuis vert !

A+

Didier

Posté : 11 mars 2006, 13:02
par Truc
en efftet pas de récupération de la liste, peut être parcequ'elle est construite a la volée.

Parade, un champ caché qui récupère la valeur séléctionnée de la liste puis récupération de ce champ caché:

Fonction JS:
function val(valeur)
{  
	document.forms['rubrique'].elements['cache'].value = valeur;
}
Ajout de l'évenement onclick aux listes (tab_1, ...)
var tab_1 =  '<select onchange="val(this.value);" ...
Le champ caché pour récupérer la valeur:
<input name="cache" type="hidden" value="" />