Récupération valeur contenue dans un input radio

Version imprimable

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:

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:

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

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

Code:

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:

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!

cette ligne

Code:

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:

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

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]); }); });

16/09/2016, 15h48
oliola4

Un super grand merci Toufik!

J'y vois beaucoup plus clair.
16/09/2016, 15h59
Toufik83

de rien, c'est avec plaisir.
si ton problème est résolu, n'oublis pas de passer le sujet en résolu.
19/09/2016, 16h17
oliola4
C'est bizarre, j'ai ajouté le code suivant pour tester mais j'ai toujours le même problème
Code:

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 :(
19/09/2016, 16h37
Toufik83
a-tu mis ce code dans une fonction $(document).ready ?
Code:

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

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:

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:

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. :?

19/09/2016, 17h41
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.

Voici mon code complet:

Code:

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]

20/09/2016, 13h56
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).
20/09/2016, 15h26
oliola4

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

Toufik,

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

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:

1 2 effacer('#id-formulaire');
que j'avais laissé trainer!

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

21/09/2016, 11h13
Toufik83

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