Changement en temps réel avec liste déroulante

**Truthy** · 25/08/2009, 14h06

Bonjour,

Je viens tout juste de commencer le javascript car j'en ai réellement besoin pour continuer à dev' mon site web. C'est pour cela que je vous demande d'être indulgent si des erreurs vous choquent ou vous paraissent idiotes.

Je suis en train de développer un module de QCM. Lors de la création d'un QCM, j'aimerais que le visiteur sélectionne grâce à une liste déroulante le nombre de question qu'il veut y mettre (de 1 à 50 questions). (Ca j'ai réussis sans aucun soucis, c'est que du html)
Je voudrais que dès que le visiteur fait son choix, un div s'affiche autant de fois que le numéros choisis. Et ce, sans avoir à recharger la page.

Voilà ce que j'ai fait pour l'instant :

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
 
<script type="text/javascript">
 
		function selection(liste)
		{
				var valeur = liste.options[liste.selectedIndex].value;
 
				for(var i = 0; i < valeur;i++)
				{
                                      <div id="question_h.php"></div>
                                }			
		}
 
</script>
 
 
<form method="post" action="create_quizz.php">
<p>Nombre de questions : <select name="nombre" id="nombre" onchange="selection(this)" > <!-- creation liste déroulante -->
 
<!-- La partie PHP sert à insérer les nombre de 1 à 50 dans la liste déroulante -->
 
<?php
for($number = 1; $number <= 50; $number++)
{?>
<option value="<?php echo $number; ?>"><?php echo $number; ?></option>
 
<?php } ?>
 
</select><br /></form>

Je sais que ma façon d'inclure du HTML dans les balise <script> n'est pas la bonne mais je ne sais pas comment faire.

**andry.aime** · 25/08/2009, 14h27

Bonjour et Bienvenue sur developpez.

Les questions se trouvent sur question_h.php ?
Si c'est le cas, tu dois utiliser AJAX:
http://siddh.developpez.com/articles/ajax/

Je sais que ma façon d'inclure du HTML dans les balise <script> n'est pas la bonne mais je ne sais pas comment faire.

Mets ton script dans la balise head du document.

**E.Bzz** · 25/08/2009, 14h29

Bonjour,
2 indices :

un ID doit être unique dans la page (pas le cas dans ta boucle JS)
le DOM

A+

**Truthy** · 25/08/2009, 14h39

Merci de ta réponse.

Je ne sais pas pourquoi le .php s'est glissé là. Normalement cest "<div id="question_h"> </div>".

J'ai mis mon script dans l'en tête mais toujours rien.

**E.Bzz** · 25/08/2009, 14h58

Envoyé par Truthy

Je ne sais pas pourquoi le .php s'est glissé là. Normalement cest "<div id="question_h"> </div>".

Ca ne change pas grand chose, pour un ID dupliqué.

Envoyé par Truthy

J'ai mis mon script dans l'en tête mais toujours rien.

Ce n'était qu'une des étapes : relis

A+

**andry.aime** · 25/08/2009, 14h58

Code HTML :

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
<html>
<head>
<script type="text/javascript">
                var question = Array();
                question[0]="Comment ?";
                question[1]="Pourquoi ?";
                question[2]="Qoi ?";
                question[3]="Quoi ?";
                function choix(liste)
                {
                                var valeur = liste.options[liste.selectedIndex].value;
                                document.getElementById('question_h').innerHTML="";
                                for(var i = 0; i < valeur;i++)
                                {
                    var ligne=document.createElement('br');
                                        document.getElementById('question_h').appendChild(document.createTextNode("Question "+(i+1)+" :"+question[i]));
                                        document.getElementById('question_h').appendChild(ligne);
                }
                }
                
</script>
</head>
<body>
 
<form method="post" action="create_quizz.php">
<p>Nombre de questions : 
<select name="nombre" id="nombre" onchange="choix(this)" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br /></form>
<div id="question_h"></div>
 </body>
</html>

Le nom de fonction selection pose un problème avec IE6 et j'ai remplacé par choix. Adapte ce code à ton besoin.
EDIT: Sur le forum Javascript, donne le code HTML généré et non pas le php.

**Truthy** · 25/08/2009, 15h41

J'avoue être complètement perdu.
Je vais abandonner le JS qui me semble insurmontable.
Cela dit, j'ai testé ton code. Il fonctionne mais je n'arrive pas à l'adapter à ma situation, à comprendre pourquoi il faut faire un array etc.

Merci tout de même pour votre aide.

EDIT : Le code HTML me donnait 50 ligne en plus (pour chacune des options). C'est pour cela que je ne l'ai pas mis.

**andry.aime** · 25/08/2009, 15h49

Je vais abandonner le JS qui me semble insurmontable.

N'abandonne pas facilement comme ça, faire du web sans Js à nos jour

Les tutoriels

Faq

à comprendre pourquoi il faut faire un array etc.

L'array c'est pour stocker les questions. Tu peux le générer avec php.

**Truthy** · 25/08/2009, 16h03

Merci.
Je vais lire et re-lire les tutoriels maintenant jusqu'à ce que je comprenne.

Je pourrais poster mes questions sur ce topic ou je devrais en créer un nouveau ?

**E.Bzz** · 25/08/2009, 16h14

Envoyé par Truthy

Je pourrais poster mes questions sur ce topic ou je devrais en créer un nouveau ?

Tant que ça concerne ta génération de questionnaire tu peux continuer ici

A+

**Truthy** · 25/08/2009, 17h44

Donc voilà, j'ai persisté et j'ai lu un cour sur le JS. Je pense avoir réellement mieux compris.
J'ai un problème avec ce code-ci :

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
 
 
   <head>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
		<title><?php echo $title; ?></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
		<script type="text/javascript">
 
			function ecrire(list)
			{
				var elmt = document.form1.list.selectedIndex;
 
				document.write("You choose : "+ elmt);
			}
 
		</script>
 
	</head>
 
 
<body>
 
	<form name="form1" >
	<select name="list" onchange="ecrire(this)">
	<option value="0"> Choisissez... </option>
	<option value="1"> 1 </option>
	<option value="2"> 2 </option>
	<option value="3"> 3 </option>
	</select>
	<br />
	</form>
 
</body>
</html>

La fonction écrire sert à écrire l'option que l'utilisateur a choisis. Comment faire pour que cela s'écrive en dessous du formulaire et ne l'efface pas la liste déroulante ?

**E.Bzz** · 25/08/2009, 17h51

Le plus simple est de prévoir un span (ou autre) pour afficher le résultat :

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
   <head>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
		<title><?php echo $title; ?></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		
		<script type="text/javascript">
		
			function ecrire(list)
			{
                           document.getElementById("res").innerHTML = "Vous avez choisis " + list.value;
// ou list.options[list.selectedIndex].value pour les fans
			}
 
		</script>
		
	</head>
   
   
<body>
 
	<form name="form1" >
	<select name="list" onchange="ecrire(this)">
	<option value="0"> Choisissez... </option>
	<option value="1"> 1 </option>
	<option value="2"> 2 </option>
	<option value="3"> 3 </option>
	</select>
        <span id="res">Aucun choix</span>
	<br />
	</form>
 
</body>
</html>

A+

**Truthy** · 25/08/2009, 20h05

Concernant mon problème de départ, j'ai réussis à faire en sorte que lorsque je sélectionne une option dans la liste déroulante, 1 image s'affiche. Le problème est que même si je selectionne "4", il y aura toujours une seule image. Je pense que ça vient de ma boucle for à moins que innerHTML ne puisse se répéter. Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
				function selection(liste)
				{
						var valeur = liste.options[liste.selectedIndex].value;
						var affichage = document.getElementById('affichage');
 
 
						for(var i = 0; i <= valeur;i++)
						{
							affichage.innerHTML = '<div id="question_h"></div>';
						}			
				}

Je sais qu'un id ne doit pas se répéter mais ça ne fonctionne pas avec les class.

Merci pour votre aide.

EDIT : Je viens de régler le problème mais un nouveau problème se présente. Quand je sélectionne l'option "1", 1 div question_h s'affiche. Si je change et que je prend l'option "3", 3 autre div question_h s'affiche. Ce qui fait au total 4 div affichée au lieu de 3. Comment y remédier ?

**kernelfailure** · 26/08/2009, 02h22

En initialisant ton innerHTML avant d'entrer dans ta boucle ?
innerHTML = ''

**andry.aime** · 26/08/2009, 07h55

Salut,

Pour créer un nouvel élément dans un autre élément, utilise DOM mais pas innerHTML.
Inspires du code que j'ai donné dans mon ancien poste.

Envoyé par Truthy

En initialisant ton innerHTML avant d'entrer dans ta boucle ?
innerHTML = ''

Avec son code, innerHTML remplace le contenue du div ou span. Il doit vider le contenue avant la boucle ensuite concaténer dans la boucle.

**E.Bzz** · 26/08/2009, 10h09

Envoyé par Truthy

Je sais qu'un id ne doit pas se répéter mais ça ne fonctionne pas avec les class.

Une solution basée sur des id dupliqués n'est jamais la bonne ...

A+

**Truthy** · 26/08/2009, 13h11

Merci pour vos réponses.

Je teste beaucoup de choses et j'en suis arrivé à ce code là (qui ne fonctionne pas comme je le voudrais).

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
 
var question = Array();
 
				function choix(liste)
				{
						var valeur = liste.options[liste.selectedIndex].value;
						document.getElementById('dernier_c').innerHTML="";
 
						for(var j=0; j < valeur; j++)
							question[j] = j;
 
						for(var i = 0; i < valeur;i++)
						{
							var ligne=document.createElement('br');
							document.getElementById('dernier_c').appendChild(document.createTextNode('Question '+(i+1)+' : '));
							document.getElementById('dernier_c').appendChild(document.createElement("input"));
							document.getElementById('dernier_c').appendChild(ligne);
						}
				}

J'aimerais mettre une marge au texte mais je ne sais pas comment appliquer du CSS sur du JS. Comment faire ?

**andry.aime** · 26/08/2009, 13h49

Je teste beaucoup de choses et j'en suis arrivé à ce code là (qui ne fonctionne pas comme je le voudrais).

On ne comprend pas ce que tu veux mais ce code fonctionne.

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
function choix(liste)
		{
				var valeur = liste.options[liste.selectedIndex].value;
				document.getElementById('dernier_c').innerHTML="";
				for(var i = 0; i < valeur;i++)
				{
                    var ligne=document.createElement('br');
					document.getElementById('dernier_c').appendChild(document.createTextNode('Question '+(i+1)+' : '));
					if(document.all)//Pour Internet Explorer
					{
						var a = document.createElement('<input name="question_'+i+'">');
					}
					else // pour les autres navigateurs
					{
						var a=document.createElement("input");
						a.name="question_"+i;
					}
					a.id="question_"+i;
					a.type="text";
					document.getElementById('dernier_c').appendChild(a);
					document.getElementById('dernier_c').appendChild(ligne);
                }
		}

J'aimerais mettre une marge au texte mais je ne sais pas comment appliquer du CSS sur du JS. Comment faire ?

Regarde dans la FAQ.

**Truthy** · 26/08/2009, 14h20

Je vais faire une vidéo de mon écran puis la poster, je pense que vous verrez clairement mon problème.

Voici le lien de la vidéo : http://www.vimeo.com/6311875 (C'est le seul hébergeur qui garde une bonne qualité, il faut attendre 25 minutes avant de lire une video

)

PS : Désolé pour le nombre de fautes (inadmissibles, je vous l'accorde) d'orthographes mais l'inconvénient dans les vidéos, c'est qu'on ne peut se relire....