Bouton radio dans un sondage

**Giantrick** · 15/07/2009, 23h00

Bonjour,

Voilà, je bloque sur un bout de mon programme pour créer un sondage sur mon site.

Le principe est le suivant :
Je propose une liste de réponses (quatre) que l'internaute devra classer par ordre de préférence.

Mon problème est que je ne sais pas comment faire pour que l'utilisateur ne puisse choisir qu'une réponse par chiffre ou dans l'autre sens, qu'un chiffre par réponse.

Voici le résultat visuel de mon affichage :

ceci est la présentation idéale

Voici ce que mon code ci-dessous permet (ce n'est pas possible de laisser cette solution car on pourrait fausser les résultats.)

Mon code actuel est le suivant :

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
 
//recherche des propositions de réponse
	$query_affichage3 = "SELECT * FROM formulaire_proposition_reponse WHERE id_formulaire_question='$formulaire_question_id' AND date_fin>'$datejour' ORDER BY hierarchie";								
	$res_affichage3 = mysql_query($query_affichage3);
	$var_affichage_count3 = mysql_num_rows($res_affichage3);
	//affichage d'un tableau pour l'affichage des réponses
	// la première colonne pour les propositions de réponse et une colonne par nombre de réponse afin de les ordonner
	echo"<table class='tab_reponse_ordre'><tr><td>&nbsp;</td>";
	$hr_ordre=0;
	while($hr_ordre<$var_affichage_count3)
	{
	$hr_ordre++;	
	echo"<td>$hr_ordre</td>";	
	}
	$hr_ordre=0;
	echo"</tr>";
	while($var_affichage3 = mysql_fetch_array($res_affichage3))
		{
$formulaire_proposition_id=$var_affichage3['id_formulaire_proposition_reponse_origine'];
		$proposition_texte=$var_affichage3['texte'];
		$hr=$var_affichage3['hierarchie'];
		//echo"$hr : $formulaire_question_id<br>";
		$reponse_ordre=$formulaire_proposition_id. "#%#" . $formulaire_question_id;
		echo"<tr><td>$proposition_texte</td>";
		while($hr_ordre<$var_affichage_count3)
			{
			$hr_ordre++;	
			echo"<td><input type=radio name='$hr_ordre' value='$reponse_ordre'></td>";	
			}
		$hr_ordre=0;	
		echo"</tr>";	
		}

Le problème est que j'ai la possibilité de limiter le choix de l'utilisateur soit par ligne soit par colonne. In fine, je devrais pourvoir faire un mixte des deux pour n'avoir qu'une réponse par ligne et qu'une par colonne.

Dois je faire appel à de l'ajax, du javascript, du DHTML ou une boucle automatique en PHP ?

Merci d'avance de votre aide.

**darkstar123456** · 16/07/2009, 13h32

pas évident comme problème... bon voici où j'en suis arrivé perso (utilisation obligatoire du JavaScript donc bof bof niveau accessibilité :s)

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
<?php
$questions = array("blabla 1", "bibi 2", "bubu 3", "toto 4");
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="myPoll">
	<table>
	<tr><th>QUESTION</th><th>1</th><th>2</th><th>3</th><th>4</th></tr>
	<?php
	for ($j = 0; $j < count($questions); $j++) {
		echo '<tr><td>'.$questions[$j].'</td>';
		for ($i = 1; $i <= 4; $i++) {
			echo '<td><input type="radio" name="reponse['.$j.']" value="'.$i.'" onchange="checkPoll(this);"/></td>';
		}
		echo '</tr>';
	}
	?>
	<tr><td colspan="5" style="text-align:center;"><input type="submit" /></td></tr>
	</table>
</form>
<script type="text/javascript">
function checkPoll(elmt) {
	var myPoll = document.forms['myPoll'];
	var count = 0;
	for (var i = 0; i < myPoll.elements.length; i++) {
		if (myPoll.elements[i].type == 'radio') {
			if (myPoll.elements[i].value == elmt.value && myPoll.elements[i].checked) {
				count++;
			}
			if (count > 1) {
				myPoll.elements[i].checked = false;
			}
		}
	}
}
</script>

**Giantrick** · 16/07/2009, 22h13

Merci darkstar123456,

C'est vrai que le javascript n'est peut être pas la meilleure solution, mais cela fonctionne...

J'ai intégrer ton code au mien et cela fonctionne pour la première question avec choix par ordre.

Mon problème est que j'ai plusieurs questions à réponse par ordre.
La première question (ceci est une question par ordre 21: ) prend en compte le javascript mais la seconde question (ceci est une question par ordre) n'en tiens plus compte.

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
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
 
 
//recherche des propositions de réponse
	$query_affichage3 = "SELECT * FROM formulaire_proposition_reponse WHERE id_formulaire_question='$formulaire_question_id' AND date_fin>'$datejour' ORDER BY hierarchie";								
	$res_affichage3 = mysql_query($query_affichage3);
	$var_affichage_count3 = mysql_num_rows($res_affichage3);
	//affichage d'un tableau pour l'affichage des réponses
	// la première colonne pour les propositions de réponse et une colonne par nombre de réponse afin de les ordonner
	echo"<table class='tab_reponse_ordre'><tr><td>&nbsp;</td>";
	$hr_ordre_nb=0;
	while($hr_ordre_nb<$var_affichage_count3)
	{
	$hr_ordre_nb++;	
	echo"<td class='text_black_12_center'>$hr_ordre_nb</td>";	
	}
	$hr_ordre=0;
	echo"</tr>";
	?>	
	<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="myPoll">
	<?php	
	while($var_affichage3 = mysql_fetch_array($res_affichage3))
		{
		//recherche des questions que l'on va mettre dans un tableau	
		$formulaire_proposition_id=$var_affichage3['id_formulaire_proposition_reponse_origine'];
		$proposition_texte=$var_affichage3['texte'];
		$hr=$var_affichage3['hierarchie'];
		//echo"$hr : $formulaire_question_id<br>";
		//$reponse_ordre=$formulaire_proposition_id. "#%#" . $formulaire_question_id;
		echo"<tr><td class='text_black_12_right'>$proposition_texte</td>";
 
		while($hr_ordre<$var_affichage_count3)
			{
			$hr_ordre++;	
			echo "<td class='text_black_12_center'><input type='radio' name='reponse[".$hr."]' value='".$hr_ordre."' onchange='checkPoll(this);'/></td>";	
			}
		$hr_ordre=0;	
		echo"</tr>";	
		}		
	echo"</form>";

Je pense que c'est simplement un souci de boucle avec le javascript. Il faut peut être mettre à zéro certaines variables... ??

Le script "javascript" est en en-tête de page sur le même fichier.

Merci pour ta réponse.

**darkstar123456** · 17/07/2009, 08h49

Voilà une petite mise à jour du code :

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
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="myPoll">
<?php
$nbQuestions = 3;
$questions = array("blabla 1", "bibi 2", "bubu 3", "toto 4");
for($k = 0; $k < $nbQuestions; $k++) {
?>
	<table>
	<tr><th>QUESTION</th><th>1</th><th>2</th><th>3</th><th>4</th></tr>
	<?php
	for ($j = 0; $j < count($questions); $j++) {
		echo '<tr><td>'.$questions[$j].'</td>';
		for ($i = 1; $i <= 4; $i++) {
			echo '<td><input type="radio" name="reponse['.$k.']['.$j.']" value="'.$i.'" onchange="checkPoll(this);"/></td>';
		}
		echo '</tr>';
	}
	?>
	<tr><td colspan="5" style="text-align:center;"><input type="submit" /></td></tr>
	</table>
<?php
}
?>
</form>
<script type="text/javascript">
function checkPoll(elmt) {
	var myPoll = document.forms['myPoll'];
	var count = 0;
	for (var i = 0; i < myPoll.elements.length; i++) {
		if (myPoll.elements[i].type == 'radio') {
			if (myPoll.elements[i].value == elmt.value && myPoll.elements[i].checked) {
				if (myPoll.elements[i].name.charAt(8) == elmt.name.charAt(8)) {
					count++;
				}
			}
			if (count > 1) {
				myPoll.elements[i].checked = false;
				return;
			}
		}
	}
}
</script>

CHANGEMENTS :
modification des noms des inputs : reponse[numero_question][numero_proposition]

Du coup dans le JavaScript, j'ai fait un truc un peu sale : je vérifie le numéro de la question avec un charAt() (je sais pas si on peut faire mieux, j'suis pô très doué en JS).
De plus, j'ai rajouté un return; dans le cas où j'interdit de check la radiobox car sinon ça remettait à 0 toutes les radios :s

J'espère que ceci fonctionnera (chez moi ça marche)

**darkstar123456** · 17/07/2009, 08h53

hmmm j'ai repensé un peu tout ça.... je repars sur la même base, je garde le charAt() pcq je ne connais toujours rien d'autre

MAIS j'ai modifié pour avoir un comportement qui corresponde beaucoup aux input de type radio !!!

TADAAAAAM voici le code, ensuite les explications :

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
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="myPoll">
<?php
$nbQuestions = 3;
$questions = array("blabla 1", "bibi 2", "bubu 3", "toto 4");
for($k = 0; $k < $nbQuestions; $k++) {
?>
	<table>
	<tr><th>QUESTION</th><th>1</th><th>2</th><th>3</th><th>4</th></tr>
	<?php
	for ($j = 0; $j < count($questions); $j++) {
		echo '<tr><td>'.$questions[$j].'</td>';
		for ($i = 1; $i <= 4; $i++) {
			echo '<td><input type="radio" name="reponse['.$k.']['.$j.']" value="'.$i.'" onchange="checkPoll(this);"/></td>';
		}
		echo '</tr>';
	}
	?>
	<tr><td colspan="5" style="text-align:center;"><input type="submit" /></td></tr>
	</table>
<?php
}
?>
</form>
<script type="text/javascript">
function checkPoll(elmt) {
	var myPoll = document.forms['myPoll'];
	var count = 0;
	for (var i = 0; i < myPoll.elements.length; i++) {
		if (myPoll.elements[i].type == 'radio' && myPoll.elements[i].name.charAt(8) == elmt.name.charAt(8)) {
			if (myPoll.elements[i].value == elmt.value) {
				myPoll.elements[i].checked = false;
			}
			elmt.checked = true;
		}
	}
}
</script>

EXPLICATIONS

Waaah j'suis fier de mwa, même si j'aurais pu y penser plus tot... j'étais vraiment fatigué hier faut m'excuser (bon ok, j'arrête avec ma vie

)

Donc voilà ce qu'il se passe maintenant : plutot que de vérifier si la valeur existe déjà et d'interdire le check, je remet tout à 0 pour la question qui a la valeur (et apres pour être certain, je recoche l'élément clické)

Ainsi donc, on a le même fonctionnement d'un input type radio normal : le nouveau click prend le dessus sur l'ancien...

Attention ici, un check d'un bouton peut prendre le dessus sur 2 anciens check au lieu d'un (forcément

)

PS : j'ai préféré faire un nouveau post, ainsi si l'autre code convient mieux, les 2 sont là ^^

**Giantrick** · 17/07/2009, 11h44

J'ai testé ton code et il fonctionne nickel.

Par contre, lorsque je l'insert dans mon code, il ne fonctionne pas en l'état.... je fais de nouveau test ce soir et je reviens pour donner mes derniers commentaires et questions à ce sujet...

J'ai bien remplacé tes variables k, j et i par les miennes afin de prendre en compte :

k = le numéro de ma question
j = le numéro de la proposition de réponse
i = le numéro d'ordre.

Juste une question : dans le code JS, pourquoi tu as mis (8) après ton charArt ?

Code :

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

if (myPoll.elements[i].type == 'radio' && myPoll.elements[i].name.charAt(8) == elmt.name.charAt(8)) {

Merci encore, mais grâce à toi, c'est sur la bonne voie.... ce n'est qu'une question d'adaptation de ton code à mon programme....

ps : En attendant de faire mieux, si cela fonctionne c'est ce qui m'importe... de plus, je n'aurais pas trouvé la solution tout seul car, pire que toi, je ne sais pas programmer en JS du tout, juste le comprendre un peu.

A ce soir

**darkstar123456** · 17/07/2009, 12h05

Code :

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

myPoll.elements[i].name.charAt(8)

ah voui, j'ai oublié d'expliquer... désolé

J'en suis tellement pas fier, ça doit être pour ça

en fait, le nom des input sont : reponse[Y][Z], 8 correspond à Y

(de 0 à 7, je zape, et je garde 8) c'est pour ça que si tu as plus de 9 questions le code sera un peu pourri :s

Il faudrait alors faire un

Code :

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

sptrinf("%02d", $k)

pour le numéro de question dans les INPUT

et donc tester sur 2 caractères dans le JS

**Giantrick** · 17/07/2009, 21h47

Envoyé par darkstar123456

Il faudrait alors faire un

Code :

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

sptrinf("%02d", $k)

pour le numéro de question dans les INPUT

et donc tester sur 2 caractères dans le JS

1°) modification du chartArt
Je vois bien que nous parlons de la même chose, et je pense aussi que mon souci viens de cette variable chartArt(x), mais comme j'ai écris plus haut, je ne sais pas trop comment faire en JS pour tester sur 2 caractères.

En fin de compte pour faire simple et direct (j'ai un peu honte), mais il faudrait me dire quoi mettre dans mon script PHP d'un coté et dans mon script JS de l'autre.

J'espère ne pas trop en demander....

nb, j'ai bien tester ton script en modifiant le chiffre à 9 par exemple et du coup, cela ne fonctionne plus du tout avec la seconde question et cela fausse également les résultats du premier.

2°) problème de JS dans mon script (application de ton script au mien)
Par contre, lorsque j'applique ton script dans le mien, et peut importe le chiffre que je met dans ma "variable" du chartArt(x), la seconde question ne tiens pas compte du javascript....

exemple :
a) la première question fonctionne très bien avec ton script intégré au mien (voici le résultat lorsque l'on ne choisi rien sur la seconde question) :

b) lorsque je renseigne la seconde question sur le choix 1 en position 1 cela retire le choix en position 1 de la première question

c) enfin, toujours dans la seconde question lorsque je clique sur la propostion 2 et 3 en choix 1, il "cumule" les choix, alors qu'il ne devrait pas... Cela signifie que le script ne fonctionne pas sur la suite des questions... mais pourquoi ? là, est la question

nb : les chiffres avant l'affichage du bouton radio correspondent à la variable de la question(k), la seconde celle de la proposition (j), et la troisième (i) celle de l'ordre de choix.

Voilà le résultat de mes tests.... et pourtant j'aimerais bien trouver la solution....

Merci encore d'avance pour ton aide

**LDDL** · 19/07/2009, 08h53

Salut,

Puis je te demander pourquoi une seule réponse par colonne ? peut être que la dernière question n'est plus un choix mais une obligation de choix.

**Giantrick** · 19/07/2009, 12h03

Envoyé par LDDL

Salut,

Puis je te demander pourquoi une seule réponse par colonne ? peut être que la dernière question n'est plus un choix mais une obligation de choix.

C'est le but de ce type de question. Ceci n'est pas une question à choix multiple mais bien un classement par ordre (préférence de l'utilisateur) des propositions faites.

Exemple concret :

Merci de classer par ordre de préférence dans les choix ci-dessous vos envies de voyages.

- Etats-Unis
- Suisse
- Chine
- Australie

il faut que l'utilisateur classe de 1 à 4 (sachant que 1 est ton favoris), donc une seule réponse par colonne et une seule réponse par ligne également.

Sachant que chaque question est indépendante de la précédente.

Ai-je répondu à ta question ?

**LDDL** · 20/07/2009, 13h09

Slt,
Oui effectivement c'est clair. (juste un mot, là ça va ya 4 lignes mais pour plus disons 10 lignes ça risque de faire un peu bataille naval) d'un autre côté je vois pas vraiment d'autres solutions lol.

Bon courrage.

**Giantrick** · 20/07/2009, 14h26

Envoyé par LDDL

Slt,
Oui effectivement c'est clair. (juste un mot, là ça va ya 4 lignes mais pour plus disons 10 lignes ça risque de faire un peu bataille naval) d'un autre côté je vois pas vraiment d'autres solutions lol.

Bon courrage.

la solution en cas d'un nombre de proposition trop important (à définir selon les auteurs) est juste de proposer d'identifier les quatre premiers (qui seront vérifié par un script php lors de l'envoie) ou de limiter le nombre de choix (en numéro) à quatre par exemple, lors de la création de la question.

**darkstar123456** · 22/07/2009, 11h19

hello, désolé petit w-e de 4 jours suite à la fete nationale

J'ai revu mon code pour le rendre plus "général", j'ai donc viré le "charAt()" pour utiliser une regex !

Peut-être que de cette façon, ça marchera mieux

PS : j'ai rajouté un sprintf() pour avoir toujours le meme nombre de chiffres à comparer et j'ai préciser dans ma regex que je cherchais 2 chiffres entre les crochets... c'est important de le préciser

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
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="myPoll">
<?php
$nbQuestions = 3;
$questions = array("blabla 1", "bibi 2", "bubu 3", "toto 4");
for($k = 0; $k < $nbQuestions; $k++) {
	$num_question = sprintf("%02d", $k);
?>
	<table>
	<tr><th>QUESTION</th><th>1</th><th>2</th><th>3</th><th>4</th></tr>
	<?php
	for ($j = 0; $j < count($questions); $j++) {
		echo '<tr><td>'.$questions[$j].'</td>';
		for ($i = 1; $i <= 4; $i++) {
			echo '<td><input type="radio" name="reponse['.$num_question.']['.$j.']" value="'.$i.'" onchange="checkPoll(this);"/></td>';
		}
		echo '</tr>';
	}
	?>
	<tr><td colspan="5" style="text-align:center;"><input type="submit" /></td></tr>
	</table>
<?php
}
?>
</form>
<script type="text/javascript">
function checkPoll(elmt) {
	var myPoll = document.forms['myPoll'];
	var count = 0;
	var re = new RegExp("^[a-z0-9_-]*\\[{1}([0-9]{2})\]{1}\\[[0-9]{1,2}\]$");
	var current_num = elmt.name.replace(re, '$1');
	for (var i = 0; i < myPoll.elements.length; i++) {
		var question_num = myPoll.elements[i].name.replace(re, '$1');
		if (myPoll.elements[i].type == 'radio' && question_num == current_num) {
			if (myPoll.elements[i].value == elmt.value) {
				myPoll.elements[i].checked = false;
			}
			elmt.checked = true;
		}
	}
}
</script>

EDIT : Perso, tout le javascript fonctionne très bien chez moi... regarde si tu as bien tout adapté
TODO : vérification côté PHP, je suis en train de le faire...

**darkstar123456** · 22/07/2009, 12h02

et vala... vérification PHP un peu à la bourrin mais fonctionnelle

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
<?php
$nbQuestions = 3;
function checkPollPhp($array) {
	$nbQuestions = $GLOBALS['nbQuestions'];
	$ret = true;
	// On vérifie si on a bien répondu à toutes les catégories
	if ($nbQuestions != count($array)) {
		$ret = false;
	} else {
		// Si oui, on vérifie qu'on a bien répondu aux 4 questions
		foreach ($array AS $v) {
			if (count($v) != 4) {
				$ret = false;
			} else {
				// On vérifie qu'on a pas répondu 2 fois la même chose pour une question
				$count = array();
				foreach($v AS $vv) {
					if (in_array($vv, $count)) {
						$ret = false;
					} else {
						$count[] = $vv;
					}
				}
			}
		}
	}
	return $ret;
}
if (isset($_POST['action']) && $_POST['action'] == "envoyer") {
	if (checkPollPhp($_POST['reponse'])) {
		echo '<span style="color:green;">formulaire OK</span>';
	} else {
		echo '<span style="color:red;">formulaire KO</span>';
	}
}
?>
<!-- AFFICHAGE DU FORMULAIRE -->
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="myPoll">
<?php
$questions = array("blabla 1", "bibi 2", "bubu 3", "toto 4");
for($k = 0; $k < $nbQuestions; $k++) {
	$num_question = sprintf("%02d", $k);
?>
	<table>
	<tr><th>QUESTION</th><th>1</th><th>2</th><th>3</th><th>4</th></tr>
	<?php
	for ($j = 0; $j < count($questions); $j++) {
		echo '<tr><td>'.$questions[$j].'</td>';
		for ($i = 1; $i <= 4; $i++) {
			echo '<td><input type="radio" name="reponse['.$num_question.']['.$j.']" value="'.$i.'" onchange="checkPoll(this);"';
			if ($_POST['reponse'][$num_question][$j] == $i) {
				echo ' checked="checked"';
			}
			echo '/></td>';
		}
		echo '</tr>';
	}
	?>
	<tr>
		<td colspan="5" style="text-align:center;">
			<input type="hidden" name="action" value="envoyer" />
			<input type="submit" value="Soumettre"/>
		</td>
	</tr>
	</table>
<?php
}
?>
</form>
<script type="text/javascript">
function checkPoll(elmt) {
	var myPoll = document.forms['myPoll'];
	var count = 0;
	var re = new RegExp("^[a-z0-9_-]*\\[{1}([0-9]{2})\]{1}\\[[0-9]{1,2}\]$");
	var current_num = elmt.name.replace(re, '$1');
	for (var i = 0; i < myPoll.elements.length; i++) {
		var question_num = myPoll.elements[i].name.replace(re, '$1');
		if (myPoll.elements[i].type == 'radio' && question_num == current_num) {
			if (myPoll.elements[i].value == elmt.value) {
				myPoll.elements[i].checked = false;
			}
			elmt.checked = true;
		}
	}
}
</script>

**Giantrick** · 31/07/2009, 08h21

Merci pour ta réponse, désolé de n'être pas revenu avant, trop de boulot, et du coup pas bcp de temps pour tester cela.

Je reviens sur cette discussion fin Août afin de donner les résultats de mes tests... (vacances obliges)

Merci encore et à plus à tous.

Bouton radio dans un sondage

Langage PHP

Discussions similaires

Partager

Partager