Discussion :

[oliola4]

Bonjour,

J'ai réalisé un questionnaire contenant des inputs "radio", soit une case à cocher en fonction de la qualité du répondant (employé, indépendant, ouvrier, étudiant,...)

Code html :

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

1
2
3
<input type="radio" name="qualite" value="employe"/> employé
<input type="radio" name="qualite" value="independant"/> indépendant
<input type="radio" name="qualite" value="ouvrier"/> ouvrier

J'essaie ensuite de récupérer la valeur de la case cochée en jquery et voudrais la placer dans un tableau

Code :

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

myArray[3] = $(':input[name="qualite"]:checked').val();

Lorsque j'essaie de visualiser le résultat, le tableau semble vide.

Code :

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

alert(myArray[3]); //ne donne aucun résultat

Je n'ai aucun souci par contre quand je procède de la sorte pour un input de type "text"

Code :

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

1
2
3
4
5
<input name="date_naissance_txt" type="text" size="15" maxlength="10" />
 
myArray[1] = $(':input[name="date_naissance_txt"]').val();
 
alert(myArray[1]); //donne bien la date de naissance introduite dans le champs

Auriez-vous une idée du problème?

Merci!

[Toufik83]

cette ligne

Code jQuery :

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

 myArray[3] = $(':input[name="qualite"]:checked').val();

ne fonctionnera que si un de tes radio est coché, au chargement de la page, il n'y a aucun radio checked, c'est pour cela que ton tableau est vide.
soit que tu ajoute un attribut checked="checked" a un radio (par defaut), soit tu met un écouteur de click sur ces éléments radios.

Code html :

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

1
2
3
4
 
<input type="radio" name="qualite" value="employe"/> employé
<input type="radio" name="qualite" value="independant" checked="checked"/> indépendant <!-- on check ce radio !-->
<input type="radio" name="qualite" value="ouvrier"/> ouvrier

Code jQuery :

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

1
2
3
4
5
6
7
8
9
10
 
$(function(){
var myArray=[];
console.log("au chargement :"+$(':input[name="qualite"]:checked').val());
$(":input[name='qualite']").click(function(){
myArray[0] = $(':input[name="qualite"]:checked').val();
console.log("après clique :"+myArray[0]);
});
 
});

[oliola4]

Un super grand merci Toufik!

J'y vois beaucoup plus clair.

[Toufik83]

de rien, c'est avec plaisir.
si ton problème est résolu, n'oublis pas de passer le sujet en résolu.

[oliola4]

C'est bizarre, j'ai ajouté le code suivant pour tester mais j'ai toujours le même problème

Code :

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

1
2
3
4
$(":input[name='qualite']").click(function(){
	myArray[3] = $(':input[name="qualite"]:checked').val();
	alert("après clique :"+myArray[3]);
	});

L'alert ne me renvoie aucune valeur, toujours comme si le tableau était vide

[Toufik83]

a-tu mis ce code dans une fonction $(document).ready ?

Code jQuery :

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

1
2
 
$(document).ready(function(){/*ta fonction clique doit être  ici*/});

[oliola4]

En fait, à la toute base, j'avais paramétré le bouton "suivant" (qui mène à la page suivante de mon questionnaire) de la sorte:

Code :

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

1
2
3
4
5
 
$('#next').click( function() {
 
myArray[3] = $(':input[name="qualite"]:checked').val();
});

donc en principe, la page est déjà chargée lorsque l'on clique sur ce bouton.

J'ai quand même essayé le code suivant (en dehors du bouton "next"):

Code :

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

1
2
3
4
5
6
7
 
 $(document).ready(function(){
							$(":input[name='qualite']").click(function(){
	myArray[3] = $(':input[name="qualite"]:checked').val();
	alert("après clique :"+myArray[3]);
	});
							});

Donc là, l'alert se déclenche lorsque je clique sur la case radio.

Mais j'ai toujours le problème du tableau vide.

[Toufik83]

il doit y avoir une erreur que tu n'a pas écrit, par-ce que j'ai testé le code et ça fonctionne parfait.

[oliola4]

Voici mon code complet:

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
 
<head>
 
<script src="http://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="crossorigin="anonymous"></script>
 
</head>
 
<body>
<h1>Enquête satisfaction</h1>
<form id="id-formulaire">
 
<div class="page1">
<p>
1. Date de naissance<br />
<input name="date_naissance_txt" type="text" size="15" maxlength="10" />
<br /><br />
2. Code postal<br />
<input name="cp_txt" type="text" size="15" maxlength="4" />
<br /><br />
3. Qualité<br /><br />
<input type="radio" name="qualite" value="employe" id="employe" />
employé<br />
<input type="radio" name="qualite" value="ouvrier" id="ouvrier" />
ouvrier<br />
<input type="radio" name="qualite" value="independant" id="independant" />
indépendant<br />
<input type="radio" name="qualite" value="pensionne" id="pensionne" />
pensionné<br />
<input type="radio" name="qualite" value="etudes" id="etudes" />
aux études<br />
<input type="radio" name="qualite" value="incapacite" id="incapacite" />
en incapacité<br />
<input type="radio" name="qualite" value="sans_emploi" id="sans_emploi" />
sans emploi   
</p>
</div>
</form>
 
<script src="jquery.js"></script>
    <script>
 
 
 var myArray = new Array();
 
 $(document).ready(function(){
	$(":input[name='qualite']").click(function(){
	myArray[3] = $(':input[name="qualite"]:checked').val();
	alert("après clique :"+myArray[3]);
	});
							});
 
 
 
//fonction bouton next 
 
	$('#next').click( function() {
 
	myArray[1] = $(':input[name="date_naissance_txt"]').val();
	myArray[2] = $(':input[name="cp_txt"]').val();
	myArray[3] = $(':input[name="qualite"]:checked').val();                  	
 
}); 
 
 
 
 
 
 
 
</script>

Comme je le disais dans un message précédent, je n'ai aucun problème avec myArray[1] et myArray[2]

[Toufik83]

j'ai copié collé ton code et je l'ai testé, il fonctionne parfait, je reçois bien les valeurs des radios sur lesquels j'ai cliqué (myArray n'est jamais vide).

[oliola4]

C'est vraiment étrange. Je vais tester le code chez moi à la maison (ici je suis au boulot) et te dis quoi.

[oliola4]

Toufik,

J'ai compris mon erreur! J'avais laissé trainé le code suivant dans le formulaire:

Code :

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

1
2
3
4
5
6
 
function effacer (formulaire) { 
 
	$(formulaire+' :input') .not(':button, :submit, :reset') .val('') .removeAttr('checked') .removeAttr('selected') .prop('checked', false);
}
effacer('#id-formulaire');

Donc, forcément, le bouton radio coché n'était pas reconnaissable à cause de la fonction

Code :

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

1
2
 
effacer('#id-formulaire');

que j'avais laissé trainer!

Un grand merci pour ton aide précieuse en tout cas!

[Toufik83]

haa ! je t'avais dis qu'il y'avait un truc bizarre dans le code que tu n'a pas cité
de rien, bonne continuation