Initialisation de variable

**vidzo** · 21/09/2009, 14h47

Bonjour à tous.

Je code un formulaire qui contient plusieurs champs select.

Ces select sont remplis par des valeurs stockées dans la base de donnée.

J'utilise l'évenement onchange pour mettre la valeur choisie dans une variable javascript.

Mais l'utilisateur n'est pas obligé de changer la valeur de chaque select, parfois, la valeur par défaut est la valeur qu'il souhaite sélectionner.

Il faut donc que je déclare en haut de ma page la variable javascript, et que je lui donne la valeur par défault. J'écrase cette valeur par un "this.value" dans un onchange lorsque l'utilisateur change de valeur.

Mon problème vient de l'initialisation de la variable. Le script marche uniquement si je change la valeur de TOUS les select...

Pourtant, j'ai beau chercher, je ne vois pas ce qui cloche.

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
<SCRIPT language="Javascript">
	 var <?php echo ($nomval);?> = <?php echo ($dflt);?>;
</SCRIPT>
 
<select  name='<?php echo$param; ?>' id='<?php echo ($nomval);?>' onchange="<?php echo ($nomval);?> = this.value;">
	<?php                                                                                                   
                $values = get_valeurs($id);
                                                                
                        while ($donnees=mysql_fetch_assoc($values))
                        {
                                $id_value = $donnees["id"];
                                $value = $donnees["valeur"];
                                
                                echo "<option value='$id_value'>$value</option>";
                        }       
        ?>
</select>

Firebug me renvoie cela:

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
<SCRIPT language="Javascript">
	 var val1 = 95;
</SCRIPT>
 
 
<select  name='param1' id='val1' onchange="val1 = this.value;">
	<option value='95'>no</option><option value='94'>yes</option></select>			
</p>
 
<p>
<SCRIPT language="Javascript">
	 var val2 = 93;
</SCRIPT>
 
 
<select  name='param2' id='val2' onchange="val2 = this.value;">
	<option value='93'>no</option><option value='92'>yes</option></select>			
</p>
<input type="submit" value="OK" onclick="var req ='id_valeur='+val1; req = req+' OR id_valeur='+val2; alert('req vaut:'+req); "/>

La ligne "var val1 = 95;" est bien censé déclarer la variable val1, et lui donner la valeur 95, non?

Pourtant, si je ne change pas la valeur de chaque select, rien ne se passe si j'appuis sur le bouton de validation, et firebug annonce "val1 is not defined" (ou val2, val3 etc en fonction des valeurs changées ou non par l'utilisateur)

Si je change chaque valeur, l'alert affiche le resultat voulu.

Si quelqu'un voit d'ou vient mon probleme, je lui en serais très reconnaissant.

**emmanuel.remy** · 22/09/2009, 00h52

Salut et bienvenue sur les forums de developpez.com

J'ai repris ton code et je ne rencontre pas de souci particulier.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
<SCRIPT language="Javascript">
	 var val1 = 95;
</SCRIPT>
 
 
<select  name='param1' id='val1' onchange="val1 = this.value;">
	<option value='95'>no</option><option value='94'>yes</option></select>			
</p>
 
<p>
<SCRIPT language="Javascript">
	 var val2 = 93;
</SCRIPT>
 
 
<select  name='param2' id='val2' onchange="val2 = this.value;">
	<option value='93'>no</option><option value='92'>yes</option></select>			
</p>
<input type="submit" value="OK" onclick="var req ='id_valeur='+val1; req = req+' OR id_valeur='+val2; alert('req vaut:'+req); "/>
 
  </body>
</html>

Donc soit les infos ne sont pas complètes, soit tu as un autre souci.

ERE

**vidzo** · 22/09/2009, 09h38

Mes variables javascript sont initialisées dans un while, et le bouton avec le onclick qui ne reconnait pas les variables est dans un if un peu plus bas dans la page. Le problème peut il venir de la?

Pour être plus clair, je te copie le code de façon un peu plus complète:

J'ai une page testparam.php qui comprend:

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
$i=0;
			while ($row_param=mysql_fetch_assoc($rq))
			{ 
				$rqt = get_type_release($rel);
				$rslt=mysql_fetch_assoc($rqt);
				$typerel=$rslt['S4'];
				$typeparam=$row_param['S4'];
 
				if( $typeparam==0 ) //On vérifie que le paramètre peut être affiché. 
				{	
					?> 
					<p>
					<?php                                   
                                        $i++;
                                        $param='param'.$i;
                                        $nomval='val'.$i;
                                        $id = $row_param['id'];
                                        $retval=get_valeurs_lim1($id);
                                        $ret=mysql_fetch_assoc($retval);
                                        $dflt=$ret['id'];
                                
                                                include("vues/select_param.php");
                                        ?>			
					</p>
					<?php
                                }                               
                        }
                        
                        if($i==0) //Si aucun paramètre ne peut être affiché
                        {
                                // Le problème ne vient pas de la, je vous épargne le code
                        }       
        
                        else
                        {
                                 $rel=$_GET['rel']; $board=$_GET['board'];?>
				<input type="submit" value="<?php echo$valid;?>" onclick="var req ='id_valeur='+val1;
				<?php
                                        for($m=2;$m<=$i;$m++)
                                        {
                                                $value='val'.$m;
                                        ?>		
						req = req+' OR id_valeur='+<?php echo$value;?>;
					<?php   
                                        }
                                        ?>;
					alert('req vaut:'+req); 
					loadparamind(req, '<?php echo$rel;?>', '<?php echo$board;?>');"/>
					<?php
			}

cette page (testparam) appelle select_param.php par un include.
(select_param.php affiche les selects avec les onchange)

select_param.php:

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
<SCRIPT language="Javascript">
	var <?php echo ($nomval);?> = <?php echo ($dflt);?>;
</SCRIPT>
 
 
<?php
echo "<label class=\"visu\">$row_param[parametre] :</label>";
?>
 
<select  name='<?php echo$param; ?>' id='<?php echo ($nomval);?>' onchange="<?php echo ($nomval);?> = this.value;">
	<?php                                                                                                   
                $values = get_valeurs($id);
                                                                
                        while ($donnees=mysql_fetch_assoc($values))
                        {
                                $id_value = $donnees["id"];
                                $value = $donnees["valeur"];
                                
                                echo "<option value='$id_value'>$value</option>";
                        }       
        ?>
</select>

C'est tout de même assez étonnant que le code fonctionne chez toi, et qu'il bloque chez moi.

En tout cas je te remercie de t'interesser à mon problème.

**emmanuel.remy** · 22/09/2009, 15h35

Salut,

Peux tu passer le code HTML finalement réellement envoyé au client ? Ce sera plus simple pour y voir clair.

ERE

**vidzo** · 22/09/2009, 16h29

Voici le code html :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>managment tool</title>
<meta content="text/html; charset=iso-8859-15" http-equiv="Content-Type"/>
<link href="/styles/style.css" title="Design" type="text/css" media="screen" rel="stylesheet">
<link rel="icon" type="image/png" href="images/icone.png" /> 
<script type="text/javascript" src="includes/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<script type="text/javascript" src="includes/functions.js" charset="iso_8859-1"></script>
 
</head>
<body>
<div id="haut">
<span class="right">
</span>
</div>
<div id="corps">
<div id="menu">
</div>
<div id="contenu">
<div id="partleft">
<h3>Select:</h3>
<label class="visu" for="typerelease">A product type:</label>
<select id="typerelease" onchange="getReleases(this.value);" name="typerelease">
<option value="vide">- - Choose a product type - -</option>
<option value="type1">type 1</option>
<option value="type2">type 2</option>
</select>
<br/>
<span id="blocReleases">
<label class="visu" for="release">A release:</label>
<select id="release" onchange="getFamily(this.value);" name="release">
</select>
<br/>
</span>
<span id="blocFamily">
<label class="visu" for="family">A board family:</label>
<select id="family" onchange="getBoards(this.value, '2');" name="family">
<option value="vide">- - - Choose a family - - -</option>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
</select>
<br/>
</span>
<span id="blocBoards">
</span>
</div>
<div id="blocParams">
<h3>Define the parameters:</h3>
<p>
<script language="Javascript">
var val1 = 95;
</script>
<label class="visu">Connected :</label>
<select id="val1" onchange="val1 = this.value;" name="param1">
<option value="95">no</option>
<option value="94">yes</option>
</select>
</p>
<p>
<script language="Javascript">
var val2 = 93;
</script>
<label class="visu">Connected to another board :</label>
<select id="val2" onchange="val2 = this.value;" name="param2">
<option value="93">no</option>
<option value="92">yes</option>
</select>
</p>
<input type="submit" onclick="var req ='id_valeur='+val1; req = req+' OR id_valeur='+val2; ; alert('req vaut:'+req); loadparamind(req, '2', '22');" value="OK"/>
</div>
<div id="blocParamsind"/>
</div>
</div>
</body>
<div id="_firebugConsole" style="display: none;" FirebugVersion="1.4.2"/>
</html>

et fire bug me répond :"val1 is not defined
function onclick(event) { var req = "id_valeur=" + val1; req = req + " OR id_valeur=" + val2; alert("req vaut:" + req); loadparamind(req, "2", "21"); }(click clientX=700, clientY=292)"

**vidzo** · 22/09/2009, 16h38

hum... étrange, en copiant ce code dans une nouvelle page, cela fonctionne, pourtant, je n'ai fait qu'un copié coller du code. J'ai utilisé l'onglet "html" de firebug pour récupérer le code, car puisque les différents éléments de la page se chargent en ajax, le code entier n'est pas apparent directement depuis le navigateur.

J'ai uniquement supprimer les énumérations (1 et 2, voir ci-dessous) dans les balises script, mais elles semblent être générées par firebug car ce texte n'est pas "selectionnable", il est grisé.

Il y avait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language="Javascript">
1
2 var val1 = 95;
</script>
<label class="visu">Connected :</label>
<select id="val1" onchange="val1 = this.value;" name="param1">
</select>
</p>
<p>
<script language="Javascript">
1
2 var val2 = 93;
</script>

**emmanuel.remy** · 22/09/2009, 18h55

RE,

car puisque les différents éléments de la page se chargent en ajax,

Si les scripts sont chargés depuis AJAX, il se peut que ton problème vienne de là... Les scripts ne sont pas interprétés si tu les injectes via un simple innerHTML par exemple.

ERE

**vidzo** · 23/09/2009, 11h19

J'apelle les pages qui sont chargées par le biais d'ajax en appelant des fonctions de ce type:

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
function loadpage(board, rel) {
 
var param = document.getElementById('blocParams');
param.innerHTML = "In process, please wait...";
creerRequete();
var url = 'testparam.php?board='+board+'&rel='+rel;
requete.open('GET', url, true);
 
requete.onreadystatechange = function() {
if(requete.readyState == 4) {
if(requete.status == 200) {
 
var resultat = requete.responseText;
param.innerHTML = resultat;
}
}
};
requete.send(null);
}

Mais je ne pense pas que le problème vienne de la, parce que le code qui plante est chargé par le 3eme script ajax de la page, et les deux premiers se chargent sans probleme, avec le même type de fonction.

**SpaceFrog** · 23/09/2009, 11h24

bingo !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

param.innerHTML = resultat;

resultat est du string , tu ne peux pas injecter du script en innerHTML

**vidzo** · 23/09/2009, 11h32

Je t'avoue que je ne connaissais pas cette subtilité.

Mais alors, comment expliquer que la page appelée par la fonction s'affiche bien, et que le seul problème est que l'initialisation des variables javascript de la page ne semble pas s'effectuer?

**SpaceFrog** · 23/09/2009, 11h35

la page oui c'est du code html il est donc interprété plus ou moins consciencieusement (certains objets pouvant ne pas etre pris en compte par le DOM)
pour ce qui est du script c'est à la base une erreur de conception
ajax n'est fait que pour rapatrier du string ou du xml
le srcipt de base doit déja etre sur la page et ajax ne doit recupérer que des paramètres

**vidzo** · 23/09/2009, 11h45

Merci pour l'éclaircissement, mon problème doit donc effectivement venir de la.
Je vais essayer d'arranger ca.

**vidzo** · 23/09/2009, 15h19

Au final, je m'en suis sorti autrement, en utilisant

document.forms['...'].elements[i].options[document.forms['...'].elements[i].selectedIndex].value

Merci a ceux qui ont passé du temps à m'aider.

Initialisation de variable

JavaScript

Discussions similaires

Partager

Partager