Discussion :

[Torpedox]

Bonjour,

J'ai un petit probl�me dans mon script. Je tiens tout d'abord � dire que je ne suis pas un sp�cialiste du javascript mais plus du php, j'ai r�cuperer un script js pour ajouter/supprimer des listes d�roulantes dynamiquement � souhait.
Cela marche nickel sauf que chaque fois j'ajoute ou supprime une nouvelle liste, toutes les "options" des listes <select> reviennent par d�faut au premier choix, ne stockant pas les valeurs eventuellement choisis par l'utilisateur.

J'ai r�ussis � les stocker dans un tableau Javascript. Mais je s�che sur la derni�re partie du code, juste pour ecrire le petit "checked" sur l'option voulue, car cette liste � option est g�ner�e par un code PHP qui est lui m�me integr�e dans une fonction javascript.

Si vous avez une id�e de la marche � suivre, je n'ai jamais trop m�lang� les deux languages.

Un bout de code valant de long discours, le voici:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<? $mets = $Menu->listMets(); ?> //Les données sont pompées d'une BD, triées puis formatée dans un beau tableau.
....
function createInput(id) {
  arrInput[id] = "<select onchange='saveValue("+id+",\"mets-"+id+"\")' id='mets-"+id+"' name='mets[]'>
        <? 
	foreach ($mets as $valueMet) { 
	$valueSelect .= "<option value='".$valueMet[0]."'>".$valueMet[1]."</option>";
	} 
echo $valueSelect; //On écrit la variable php dans la variable Js
?></select><a href='javascript:deleteInput("+ id +")'>Remove field(s)</a><br>\n\n";
 
  return arrInput[id];
}

La fonction saveValue enregistre cette fameuse valeur dans le tableau Js arrInputValue[] avec la meme cl� que arrInput[].
Comment et dans quel language pos� mon if(--->checked) sur la bonne balise <option>. En gros je dois mettre du genre if(arrInputValue[id] == $valueMet[0]) echo "checked" mais j'ai deux langages m�lang�s, donc il faudrait le faire plutot en javascript pour que �a reste dynamique.

Voil� si quelqu'un � une id�e �a serait vraiment sympa, je m'embrouille les neurones et n'ai aucune id�e de comment jongler de l'un � l'autre. Merci

[d-Rek]

Cela marche nickel sauf que chaque fois j'ajoute ou supprime une nouvelle liste, toutes les "options" des listes <select> reviennent par d�faut au premier choix, ne stockant pas les valeurs eventuellement choisis par l'utilisateur.

Qu'est ce qui marche "nickel" ? Tes �l�ments select reviennent au premier option par d�faut, ok mais � quel moment ? Quelle action fais-tu ?

J'ai r�ussis � les stocker dans un tableau Javascript.

Les valeurs envoy�s par le formulaire ?

Ta fonction devrait s'appeler createSelect et non createInput.
Peut-on voir la fonction saveValue ?

[andry.aime]

Bonjour,
Php tourne du cot� serveur et JS du cot� client. Quand tu envoies le formulaire, les variables javascript seront tous perdues et reprend les valeurs initiales au chargement de la page. Pour les sauvegarder, tu dois utiliser un cookie.
Pour s�lectionner un option dans un select, l'attribut est selected et non pas checked.
Durant la g�n�ration des options, n'utilise pas une variable avec lequel tu concat�nes pour les options mais utilises tout de suite un echo qui te faciliteras la selection de l'�l�ment envoy�.
Regarde la Faq: Comment conserver la s�lection d'un menu d�roulant apr�s une soumission ?

[Torpedox]

Voil� pour finir j'ai retourner le probl�me mais peut-�tre un peu lourd.
J'ai copi� mon tableau php en javascript pour faire le tout en javascript.

Aucun probl�me de rechargement de page, puisque c'est la fonction display() qui recharge juste le div avec les listes d�roulantes. (le script de base n'est pas de moi, et il �tait fait pour des <input> d'o� les noms des fonctions....)
Je poste le code ici. Il y a surement moyen de faire beaucoup plus simple, pour l'instant je n'ai pas trop le temps de m'y attarder �a marche c'est l'essentiel.
Il y aurait moyen de g�n�raliser et simplifier un peu la mise en oeuvre pour toutes les balises,form o� des balises personnalisables.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
 
<? $mets = $Menu->listMets(); //Tableau 2D provenant d'une base de donnée.
?>
<script type="text/javascript" language='javascript'>
 
var arrInput = new Array(0);
var arrInputValue = new Array(0);
 
//Initialisation du tableau des mets
var arrMetsNom = new Array(<?= count($valueSelect) ?>);
var arrMetsId = new Array(<?= count($valueSelect) ?>);
 
<?
 $valueJs = "";
foreach ($mets as $key=>$valueMet) {
		$valueJs .= "arrMetsNom[".$key."]='".$valueMet[1]."';";
		$valueJs .= "arrMetsId[".$key."]='".$valueMet[0]."';";
	} 
 
echo $valueJs;
?>
 
function addInput() {
  arrInput.push("");
  arrInputValue.push(0);
  display();
}
 
function display() {
  document.getElementById('parah').innerHTML="";
  for (intI=0;intI<arrInput.length;intI++) {
    document.getElementById('parah').innerHTML+=createInput(intI);
  }
 
document.getElementById('showResult').innerHTML = arrInputValue + "\n\n" + arrInput; //Pour le debugging uniquement
}
 
 
function saveValue(arrId,idSelect) {
  var selSelect = document.getElementById(idSelect);
  arrInputValue[arrId] = selSelect.options[selSelect.selectedIndex].value;
}  
 
function createInput(id) {
  arrInput[id] = "<select onchange='saveValue("+id+",\"mets-"+id+"\")' id='mets-"+id+"' name='mets[]'>";
  for(i=0; i < arrMetsId.length; i++) {
	arrInput[id] += "<option value='"+arrMetsId[i]+"' ";
	if(arrInputValue[id]==arrMetsId[i]) //Je peux finalement faire mon if pour tester si la valeur était selectionnée.
		arrInput[id] += " selected ";
	arrInput[id] += ">"+arrMetsNom[i]+"</option>";
 
  }
  arrInput[id] += "</select><a href='javascript:deleteInput("+ id +")'>Remove field(s)</a><br>\n\n";
 
  return arrInput[id];
}
 
function deleteInput(idInput) {
  if (arrInput.length > 0) { 
     arrInput.splice(idInput,1); 
     arrInputValue.splice(idInput,1);
  }
  display(); 
}
 
</script>

Puis dans le main:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
<a href='javascript:addInput()'>Ajouter un met</a><br />		
<p id="parah"></p>
<br /><br />
<textarea id='showResult' cols='40' rows='10'></textarea>

Pour r�cuperer les valeurs dans la page suivante, via un simple $_POST en php.