Comment tracer un trait et récupérer une valeur

**rocofolie** · 12/04/2011, 19h37

Bonjour ,
Je ne sais pas si je suis au bon endroit pour poser ma question mais je n'en voyait pas d'autres...

Je vous explique mon soucis.

Pour une amie j'ai crée une qestionnaire que je vais mettre enligne dont elle a besoin pour ses etudes, plusieurs pages de questions en .php avec des formulaires en .html, je recupere ces donnés ( de session ) dans ma bdd pour qu'elle est un tableau des reponses par utilisateur.

Mais dans les dernieres questions il s'agit a l'utilisateur de tracer un trait vertical sur une ligne horizontale pour indiquer son niveau de reponse.
Une fois ce trait tracer , sa position me genere une valeur ( entre 0 et 9 de gauche a droite ).

Donc inséré une image ( de la ligne horizontale ) puis avec l'objet "map" créer des zones.
Mais je ne sais pas comment faire pour que l'utilisateur puisse dessiner un trait et aussi comment récupérer cette valeur ?
Peut etre en passant par du flash mais je n'y connait rien , j'ai vu que l'on pouvait créer des zones de dessins sans flash , mais plusieurs quesitons la aussi, comment faire , comment forcer a ne faire q'un trait , comment recupérer cette donnée ?

Voilou je ne sais aps si c est tres clair mais j'ai vraiment besoin d'aide pour terminer ce questionnaire.

Merci et bonne soirée ;0)

**ABCIWEB** · 12/04/2011, 22h23

Envoyé par rocofolie

Mais dans les dernieres questions il s'agit a l'utilisateur de tracer un trait vertical sur une ligne horizontale pour indiquer son niveau de reponse.

pas vraiment clair...

Sinon en javascript tu peux faire afficher ce que tu veux (un segment de ligne par image par exemple) avec les évènements onmouseover, ou onclick, ou encore onmousedown et onmousemove qui simuleraient plus le tracé d'une ligne mais qui seraient plus compliqués à mettre en place.

**rocofolie** · 12/04/2011, 23h41

Merci pour ta reponse ,
je vais essayé d'expliquer ce que je veux faire .
En fait imagine une une ligne horizontale, graduée de 0 a 9, et pour choisir une valeur sur cette ligne l'utilisateur doit faire un trait dessus ou poser un trait dessus.
Je recupere ensuite cette valeur dans ma bdd.

mais je ne sais pas du tout comment m y prendre pour faire ce marquage.

Ha mais je vient de comprendre comment je peux faire avec ton idée de onmouseover.
Il faudrait que je divise mon image de base vierge (ligne horitontale) en plusieurs segment et lorsque la souris passe au dessus le segment change avec le segment ligne horizontale + trait verticale .
C'est bien cela ?

**ABCIWEB** · 13/04/2011, 03h37

Envoyé par rocofolie

Merci pour ta reponse ,
je vais essayé d'expliquer ce que je veux faire .
En fait imagine une une ligne horizontale, graduée de 0 a 9, et pour choisir une valeur sur cette ligne l'utilisateur doit faire un trait dessus ou poser un trait dessus.

Oui mais pourquoi faire un trait dessus ? Pourquoi ne pas simplement cliquer sur la ligne au niveau que l'on souhaite et faire afficher des images (représentant par exemple des led) jusqu'à ce niveau? Tu complique les choses avec ton trait.

Envoyé par rocofolie

Ha mais je vient de comprendre comment je peux faire avec ton idée de onmouseover.
Il faudrait que je divise mon image de base vierge (ligne horitontale) en plusieurs segment et lorsque la souris passe au dessus le segment change avec le segment ligne horizontale + trait verticale .
C'est bien cela ?

Oui c'est l'idée mais je reprendrais plutôt mon exemple avec des segments (ou leds) qui s'illuminent onclick par changement de l'image source.

**rocofolie** · 13/04/2011, 08h55

Merci ABCIWEB

En fait je veux retranscrire sur une page web un test qui se fait habituellement sur papier, qui est une methode imposée lors de questions .
Au debut je voulais le faire avec des checkbox mais ca deforme la methode de base.
Je vais tenté avec des onmouseover et onclick.

Par contre je ne sais aps trop comment récupérer un variable suite a ce click , comme je le fait sur un variable $_POST ?

**ABCIWEB** · 14/04/2011, 04h40

Envoyé par rocofolie

Par contre je ne sais aps trop comment récupérer un variable suite a ce click , comme je le fait sur un variable $_POST ?

Une méthode simple (un peu bourrin mais qui passera partout sans souci de compatibilité entre les navigateurs) serait de constituer ta ligne continue par une succession d'images représentant un segment de ligne. Soit 10 images identiques répétées si tu veux une note de 1 à 10. Et dans chacune d'entre elle tu mets un id incrémenté dont tu récupères "onclick" la valeur que tu transmets dans un champ caché (de type hidden) de ton formulaire.
Tu pourras ainsi récupérer cette valeur dans le post de ton formulaire.

**rocofolie** · 15/04/2011, 11h25

Merci pour ton aide .
Je pensais en effet partir sur ce principe " bourrin "

Je débute donc je ferai peut etre dans la finesse une prochaine fois

J'essai ce soir et je te tiens au courant
Merci
Bonne journée

**ABCIWEB** · 15/04/2011, 18h54

Quand je dis "un peu bourrin" ce n'est pas nécessairement un défaut dans le sens où les bourrins avancent quelque soit le terrain

En plus dans ce cas cela ne ralentira pas significativement l'affichage de ta page (un peu théoriquement mais pratiquement imperceptible) , et le code est assez simple à faire.

Utiliser javascript pour récupérer les coordonnées de la souris onclick par rapport à un trait serait plus hi tech mais beaucoup plus délicat à mettre en place pour être cross-browser.

**rocofolie** · 16/04/2011, 09h53

Bon bein j'ai du ratezr quelque chose car je ne comprend pas pourquoi je 'arrive pas a faire de rollover sur ma page ???
Il y a une rreur d syntaxe a priori soit un , soit ; mais où tu n'aurai pas une idée ??

Parceque j'ai beau faire bourrin bein j'avance pas donc c est pas top

Code :

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

1
2
3
4
5
6
7
8
	<div class="question_ligne2">
		<p>-Test de Rollover<br/>
			souvent
				<a><IMG src="images/ligne_small.jpg" name="ligne" onmouseover="this.src='images/ligne_select.jpg'" onmouseout="this.src='images/ligne_small.jpg'"/></a>
			jamais
		</p>
	</div>

**rocofolie** · 16/04/2011, 10h21

En fait je me repond , je faisait mes pages en php avec du html a l interieur car j'ai besoin de recupérer des variables de SESSION , si je repasse ma page complet e en html ca fonctionne mais du coup comment dois je m y prendre pour que ma page soit en php et affiche correctement le html ?

**ABCIWEB** · 16/04/2011, 15h54

Voilà un exemple complet fonctionnel, il suffit de cliquer quelque part sur la ligne puis de cliquer sur envoyer :

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
<?php
if (isset($_POST['envoi']))
{
    $note = substr($_POST['ligne_value'],1);
    
    
    echo 'note = '.htmlspecialchars($note);
}  
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--    
function marque(el) // el représente l'objet cliqué puisqu'il reçois "this" (= l'objet en cours) dans l'appel de la fonction
{
    // cherche l'élément avec un id = ligne
    var ligne = document.getElementById('ligne');

    // cherche l'élément avec un id = ligne_value
    var input = document.getElementById('ligne_value');

    // si var ligne est défini 
    if (typeof ligne != 'undefined')
        {    
            // Tableau des tag (balises) "img" contenus dans l'élément var ligne 
            var tab_img = ligne.getElementsByTagName('img');

            // Longueur du tableau
            var tab_img_length = tab_img.length;
    

            for (var i= 0; i < tab_img_length; i++)//liste les éléments du tableau
            {
                tab_img[i].src = "images_nav/segment.png";// on attribue à toutes les sources des images du tableau, l'image du segment horizontal continu
                
                if(tab_img[i].id == el.id) // si l'id de l'image du tableau est égal à l'id de l'objet cliqué
                    {
                       //on attribue à la source de l'image de l'objet cliqué, l'image avec le segment vertical
                        el.src = "images_nav/segment_v.png";
                        
                        //si var input est défini on lui donne la valeur de l'id de l'objet cliqué
                        if (typeof input != 'undefined') input.value = el.id; 
                    }
            }
        }
}
-->
</script>
</head>
<body>

<div>  
       
    <form action = "#" method = "post">
    
    <p>
    <span id="ligne">
    <?php
 // on affiche 21 segments de ligne (de 0 à 20) avec un id incrémenté s0,s1,s2,s3...
 for($i=0; $i<21;$i++){?><img src="images_nav/segment.png" id="s<?php echo $i?>" onclick="marque(this)"/><?php } ?>
    </span>
    
    <input type = "hidden"  name="ligne_value" id = "ligne_value" />                     
    <input type = "submit" value = "Envoyez"  name="envoi" />
    </p>    
        
    </form>
    
</div>

</body>
</html>

Mon image de segment horizontal se nomme "segment.png"
Mon image de segment vertical se nomme "segment_v.png"
Les deux images se trouvent dans le répertoire "images_nav"

Une page de test ici (elle ne sera pas longtemps disponible car tout est détaillé dans le code ci-dessus)

**rocofolie** · 17/04/2011, 01h53

C est terrible ça !!! Moi qui rame comme un galerien pour tenter de faire qlque chose d 'a peu pres correct !!!
Je vais regarder ca de pres pour faire en sorte de donnjer une valeur en fonction de l'endroit ou la ligne est cliquée
En tous cas merci car je galere sur mes rollover pour virer le contour des imges.
MErci bcp pour ce coup de pouce

**ABCIWEB** · 17/04/2011, 18h21

Envoyé par rocofolie

Je vais regarder ca de pres pour faire en sorte de donnjer une valeur en fonction de l'endroit ou la ligne est cliquée

C'est déjà fait dans l'exemple puisque lorsque l'on clique sur "envoyer" après avoir choisi une position sur la ligne, la valeur apparaît dans le post du formulaire.
Tu voudrais qu'elle apparaissent également avant de cliquer sur le bouton "envoyer" ?

**rocofolie** · 17/04/2011, 22h02

Non, non c'est tres bien comme ça, pas besoin d'afficher la valeur .
Est ce qu'il te serai possible de commenter le code car il faut que je comprenne comment tu l'as construit pour pouvoir le répéter , car j 'ai plusieurs questions sur la meme page avant d'envoyer les données dans ma bdd.

Si je peux abuser ,
-Est il possible de modifier le code pour voir le curseur se promener sur la ligne lorsque je passe dessus ( comme le rollover ) car sur ton exemple ca marche mais une fois inclus dans ma page ca ne marche pas?

En tous cas merci beaucoup pour le code

C 'ets mon anniversaire aujourd'hui et c'est un beau cadeau

**ABCIWEB** · 18/04/2011, 00h13

Ok j'ai commenté le code

Pour le reste si tu préfère que le curseur s'affiche onmouseover, il te suffit de remplacer dans le code html généré par php :

Code :

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

onclick="marque(this)"

par :

Code :

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

onmouseover="marque(this)"

**rocofolie** · 18/04/2011, 18h54

Encore une fois merci pour ton aide

J'ai modifié un peu le code car j ai 32 segment et les chaque paquet de 4 segment consecutif doit avoir la meme valeur , ca marche nickel.

Le soucis c'est que quand je veux ajouter un autre test , sur ma page, qui porte un autre id soit les valeurs des 2 sont identiques et j'ai essayer de modifier soit ni l'un ni l'autre ne fonctionne ??

**ABCIWEB** · 18/04/2011, 20h34

Voilà un code qui permet d'avoir plusieurs lignes dans une même page :

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
80
81
82
83
84
85
86
87
88
89
90
<?php
if (isset($_POST['envoi']))
{
	$note1 = substr($_POST['ligne_value'],1);
	$note2 = substr($_POST['ligne_value_2'],1);
	
	
	echo 'note_ligne_1 = '.htmlspecialchars($note1);
	echo '<br />';
	echo 'note_ligne_2 = '.htmlspecialchars($note2);
}  
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript">
<!--    
function marque(el,id_ligne,id_input) // el représente l'objet cliqué puisqu'il reçois "this" (= l'objet en cours) dans l'appel de la fonction
{
    // cherche l'élément avec un id = ligne
    var ligne = document.getElementById(id_ligne);

    // cherche l'élément avec un id = ligne_value
    var input = document.getElementById(id_input);

    // si var ligne est défini 
    if (typeof ligne != 'undefined')
        {    
            // Tableau des tag (balises) "img" contenus dans l'élément var ligne 
            var tab_img = ligne.getElementsByTagName('img');

            // Longueur du tableau
            var tab_img_length = tab_img.length;
    

            for (var i= 0; i < tab_img_length; i++)//liste les éléments du tableau
            {
                tab_img[i].src = "images_nav/segment.png";// on attribue à toutes les sources des images du tableau l'image du segment continu
                
                if(tab_img[i].id == el.id) // si l'id de l'image du tableau est égal à l'id cliqué
                    {
                       //on attribue à la source de l'image de l'objet cliqué, l'image avec le segment vertical
                        el.src = "images_nav/segment_v.png";
                        
                        //si var input est défini on lui donne la valeur de l'id de l'objet cliqué
                        if (typeof input != 'undefined') input.value = el.id; 
                    }
            }
        }
}
-->
</script>
</head>
<body>

<div>  
       
    <form action = "#" method = "post">
    
    <p>
    <span id="ligne">
    <?php 
	// on affiche 21 segments de ligne (de 0 à 20) avec un id incrémenté s0,s1,s2,s3...
	for($i=0; $i<21;$i++){?><img src="images_nav/segment.png" id="s<?php echo $i?>" onclick="marque(this,'ligne','ligne_value')"/><?php } ?>
    </span>
    
    <input type = "hidden"  name="ligne_value" id = "ligne_value" />                     
    </p>   
	
    <p>
    <span id="ligne_2">
    <?php
	// on affiche 21 segments de ligne (de 0 à 20) avec un id incrémenté t0,t1,t2,t3...
 	for($i=0; $i<21;$i++){?><img src="images_nav/segment.png" id="t<?php echo $i?>" onclick="marque(this,'ligne_2','ligne_value_2')"/><?php } ?>
    </span>
    
    <input type = "hidden"  name="ligne_value_2" id = "ligne_value_2" />                     
    </p>   
	
	<input type = "submit" value = "Envoyez"  name="envoi" />
 
        
    </form>
    
</div>

</body>
</html>

J'ai modifié aussi la page d'exemple donnée en lien plus haut (avec deux lignes donc).

Donc quand on appelle la fonction "marque" on indique maintenant l'id de la ligne concernée et l'id de l'input où l'on transmet la valeur. En plus de ces deux paramètres supplémentaires à renseigner il y a aussi l'id de l'image source du code html dont il faut changer la première lettre pour les autres lignes puisque l'on ne doit pas avoir deux id identiques.

J'ai laissé la première ligne avec un "s" :

Code :

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

id="s<?php echo $i?>"

et mis un "t" pour la suivante :

Code :

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

id="t<?php echo $i?>"

(il faut autant de lettres différentes que de lignes puisque l'on ne doit pas avoir deux id identiques)

**rocofolie** · 18/04/2011, 23h33

J'ai modifié un peu le code pour le mettre à ma sauce , le onmouseclick fonctionne nickel par contre je n'arrive pas à récupérer les valeurs de $_POST .
J'avais modifié les id pour m'y retrouvé dans ma bdd puis remis les memes que toi mais je ne pige pas ce qui deconne, les POST restes deseperement vides?!

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?php
session_start();
$_SESSION['jeu_enfant'] = $_POST['jeu_enfant'];
echo $_SESSION['jeu_enfant'];

echo '

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
		<head>
			<title>Questionnaire d\'Amandine</title>		 
				<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<script type="text/javascript">
<!--	
function marque(el,id_ligne,id_input) // el représente l\'objet cliqué puisqu\'il reçois "this" (= l\'objet en cours) dans l\'appel de la fonction

{
	var ligne = document.getElementById(id_ligne);
	var input = document.getElementById(id_input);
	
	if (typeof ligne != \'undefined\')
		{
			// Tableau des tag (balises) "img" contenus dans l\'élément var ligne 
			var tab_img = ligne.getElementsByTagName(\'img\');
			// Longueur du tableau
			var tab_img_length = tab_img.length;

			//liste les éléments du tableau
			for (var i= 0; i < tab_img_length; i++)

			{
				// on attribue à toutes les sources des images du tableau l\'image du segment continu
				tab_img[i].src = "images/ligne_small.jpg";

				// si l\'id de l\'image du tableau est égal à l\'id cliquée
				if(tab_img[i].id == el.id) 
					{
						//on attribue à la source de l\'image de l\'objet cliqué, l\'image avec le segment vertical
						el.src = "images/ligne_select.jpg";

						//si var input est défini on lui donne la valeur de l\'id de l\'objet cliqué
						if (typeof input != \'undefined\') input_value.value = el.id; 
					}
			}
		}
}
-->
</script>

				</head>


<body>	
		<div class="titre_question_ligne">
			<form name="formulaire" method="post" action="fin.php">
				<h2>Voici quelques propositions, merci d\'indiquer par un trait l\'endroit sur la ligne où vous pensez vous situer.</h2>
				<br><br>
			<div class="question_ligne">
				<p>-chez vous, vous faites la vaisselle...<br/>
					<span id="ligne" >
					jamais
					<img
					src="images/ligne_small.jpg" id="v0" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v0" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v0" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v0" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v1" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v1" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v1" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v1" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v2" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v2" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v2" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v2" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v3" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v3" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v3" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v3" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v4" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v4" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v4" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v4" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v5" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v5" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v5" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v5" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v6" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v6" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v6" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v6" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v7" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v7" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v7" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v7" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v8" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v8" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v8" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v8" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v9" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v9" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v9" onclick="marque(this,\'ligne\',\'ligne_value\')"/><img src="images/ligne_small.jpg" id="v9" onclick="marque(this,\'ligne\',\'ligne_value\')"/>
					</span>
					<input type = "hidden" name="ligne_value" id = "ligne_value" />
					souvent  
			</div>

			<div class="question_ligne">
			<p>-chez vous, vous repassez...<br/>
					<span id="ligne_2" >
					jamais
					<img
					src="images/ligne_small.jpg" id="r0" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r0" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r0" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r0" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r1" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r1" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r1" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r1" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r2" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r2" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r2" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r2" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r3" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r3" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r3" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r3" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r4" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r4" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r4" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r4" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r5" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r5" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r5" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r5" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r6" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r6" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r6" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r6" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r7" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r7" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r7" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r7" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r8" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r8" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r8" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r8" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r9" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r9" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r9" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/><img src="images/ligne_small.jpg" id="r9" onclick="marque(this,\'ligne_2\',\'ligne_value_2\')"/>
					</span>
					<input type = "hidden" name="ligne_value_2" id = "ligne_value_2" />
					souvent  
		</div>

		<div class="question_ligne">
			<p>-chez vous, vous cuisinez...<br/>

		</div>
		<div class="question_ligne">
			<p>-chez vous, vous bricolez...<br/>

		</div>
		<div class="question_ligne">
			<p>-chez vous, vous vous occupez du linge...<br/>

		</div>
		<div class="question_ligne">
			<p>-chez vous, vous vous occupez du linge...<br/>

		</div>
		<div class="question_ligne">
			<p>-chez vous, vous tondez la pelouse...<br/>

		</div>





		<br><br><br>
<TABLE border=5 cellpadding=0 cellspacing=0 align="CENTER"> <TR><TD>


<INPUT type="SUBMIT" value="Suite" name="envoi"></TD></TR> </TABLE>	

</form>
</body>
</html>

';

?>

et je recupere mes variables sur la page fin.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
23
24
25
26
27
28
29
30
31
<?php
session_start();
$_SESSION['ligne_value'] = $_POST['ligne_value'];
$_SESSION['ligne_value_2'] = $_POST['ligne_value_2'];

echo $_SESSION['ligne_value'];
echo "<br>";
echo $_SESSION['ligne_value_2'];

echo '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
	 <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
		 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
			<title>Questionnaire d\'Amandine</title>
</head>

<body>
		<h1 class="titre">Merci d\'avoir répondu à ce questionnaire !! </h1>
		<br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/>			
		
</body>
</html>

';

?>

**ABCIWEB** · 19/04/2011, 00h14

C'est quoi cette histoire de faire un echo sur tout le code html et javascript ?

Prend modèle sur mon code et réécrit ton code proprement (sans echo ' <!DOCTYPE html .... etc')

**rocofolie** · 19/04/2011, 00h38

C'est ce qu'un ami m'avait conseillé de faire

Je vais modifier ca.

Comment tracer un trait et récupérer une valeur

Conception Web

Discussions similaires

Partager

Partager