Interconnexion javascript-php sur fond de liste déroulante

Version imprimable

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:

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
:)

09/09/2009, 10h02
d-Rek

Citation:

Envoyé par Torpedox

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 ?

Citation:

Envoyé par Torpedox

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 ?
09/09/2009, 10h38
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 ?

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:

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:

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.