Récupérer la valeur d'un bouton radio avec json

**Rony Rauzduel** · 12/11/2012, 11h16

Bonjour,

Dans mon formulaire HTML, j'ai un bouton radio masquerTel oui non, je ne parviens pas à récupérer la valeur du bouton radio lorsque les données sont envoyées sur le serveur en Ajax.

Code HTML :

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

1
2
3
4
 
<label for="masquerTel">Masquer num&eacute;ro dans l'annonce</label>
				<input type="radio" name="masquerTel" value="oui" id="oui" /><span>Oui</span>
				<input type="radio" name="masquerTel" value="non" id="non" checked="checked" /><span>Non</span><p>

Code PHP :

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

1
2
 
$masquerTel = !(empty($_POST['masquerTel']))?$_POST['masquerTel']:null;

Code Javascript :

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

1
2
 
var masquerTel = $('input:radio[name=masquerTel]:checked').val();

Je pense qu'il faudrait utiliser un $.each() pour parcourir chacun des éléments du bouton radio masquerTel.
Cela pourrai être ceci :

Code Javascript :

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

1
2
3
4
 
$.each(masquerTel, function() {
$('input:radio[name=masquerTel]:checked').val();
});

Merci d'avance,
Transact.

**SpaceFrog** · 12/11/2012, 11h34

???
Pourquoi un each ???

les radios portant le même name fonctionnent ensemble, il ne peut donc y en avoir qu'un seul de checked ...

Code :

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

$('input:radio[name=masquerTel]:checked').val();

te retournera donc la valeur de l'element radio coché

coté serveur fais un var_dump de ton $_POST pour voir ce qu'il contient

**Rony Rauzduel** · 12/11/2012, 11h39

masquerTel est vide

Code PHP :

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

string(0) ""

**SpaceFrog** · 12/11/2012, 14h15

y'a quoi dans ton var_dump ?

**Rony Rauzduel** · 12/11/2012, 14h25

Dans mon var_dump, je mets $_POST['masquerTel'] et il me renvoi

string(0) ""

**SpaceFrog** · 12/11/2012, 14h51

non mais du POST complet ...

Code :

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

var_dump($_POST);

**Rony Rauzduel** · 12/11/2012, 14h58

Code PHP :

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
 
array(7) {
  ["pseudo"]=>
  string(6) "solmat"
  ["password"]=>
  string(9) "123456789"
  ["verifPassword"]=>
  string(9) "123456789"
  ["anneeNaiss"]=>
  string(4) "1985"
  ["email"]=>
  string(23) "rony.rauzduel@gmail.com"
  ["region"]=>
  string(9) "Aquitaine"
  ["telephone"]=>
  string(10) "0687325047"
}

**SpaceFrog** · 12/11/2012, 15h18

tes radios sont pas dans le form ??
fait voir le html ...

**Rony Rauzduel** · 12/11/2012, 15h20

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<div class="boite">
	<div id="inscriptionFormContainer" >
		<form name="form2" id="inscriptionForm" action="includes/inc_ajoutMembre.php" method="post">
			<fieldset>	
				<span id="formErreur"></span><br/>		
				<label for="login">Pseudo </label><em>*</em>
				<input id="login" name="pseudo" size="35" class="required" /><br/>
				<label for="password">Mot de passe</label><em>*</em>
				<input id="pass" name="password" size="35" class="required" minlength="8" type="password"/><br/>
				<label for="verif_password">Confirmez le mot de passe</label><em>*</em>
				<input id="verif_password" name="verifPassword" size="35" class="equalTo" minlength="8" type="password"/><br />
				<label for="anneeNaiss">Ann&eacute;e de naissance </label><em>*</em>
				<input id="anneeNaiss" name="anneeNaiss" placeholder="e.g : 1984" size="35"class="required" maxlength="4" /><br />
				<label for="email">Email </label><em>*</em>
				<input id="email" type="email" name="email" size="35" class="email" class="required"/><br />
				<label for="telephone">T&eacute;l&eacute;phone</label><em>*</em>
				<input id="telephone" type="telephone" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" 
					name="telephone" size="35" class="required" /><br />
				<label for="masquerTel">Masquer num&eacute;ro dans l'annonce</label>
				<input type="radio" name="masquerTel" value="oui" id="oui" /><span>Oui</span>
				<input type="radio" name="masquerTel" value="non" id="non" checked="checked" /><span>Non</span><p>
				<label for="region">R&eacute;gion</label><em>*</em>								
 
				<select id="region" name="region" size="1" class="required" style="width:180px">	
				<option value="" selected="selected" > </option>								
				<option value="Alsace">Alsace </option>
				<option value="Aquitaine">Aquitaine </option>
				<option value="Auvergne">Auvergne</option>
				<option value="Basse-Normandie">Basse-Normandie</option>
				<option value="Bourgogne">Bourgogne</option>
				<option value="Bretagne">Bretagne</option>
				<option value="Centre">Centre</option>
				<option value="Champagne-Ardenne">Champagne-Ardenne</option>
				<option value="Corse">Corse</option>
				<option value="Franche-Comte">Franche-Comt&eacute;</option>
				<option value="Haute-Normandie">Haute-Normandie</option>
				<option value="Ile-de-France">Ile-de-France</option>
				<option value="Languedoc-Roussillon">Languedoc-Roussillon</option>
				<option value="Limousin">Limousin</option>
				<option value="Lorraine">Lorraine</option>
				<option value="Midi-Pyrenees">Midi-Pyr&eacute;n&eacute;es</option>
				<option value="Nord-Pas-de-Calais">Nord-Pas-de-Calais</option>
				<option value="Pays_de_la_Loire">Pays de la Loire</option>
				<option value="Picardie">Picardie</option>
				<option value="Poitou-Charentes">Poitou-Charentes</option>
				<option value="Provence-Alpes-Cote_Azur">Provence-Alpes-C&ocirc;te d'Azur</option>
				<option value="Rhone-Alpes">Rh&ocirc;ne-Alpes</option>
				</select><br />
				<span id="loader" style="display:none;"><img src="img/loader.gif" alt="loader" /></span>
				<span id="inscriptionSent"></span><br />				
				<button id="sendInscription" type="submit" name="submit" />Envoyer</button><br />				
				<label for="obligatoire">* Champs obligatoires.</label> 
			</fieldset>				
		</form><!-- inscriptionForm -->		
	</div><!-- inscriptionFormContainer -->

**SpaceFrog** · 12/11/2012, 15h31

rien a voir je pense... mais ton for du label ne sert à rien ..

Code :

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

<label>Masquer num&eacute;ro dans l'annonce</label>

Sinon ton form est soumis de façon traditionnelle avec l'action ou avec jquery ?

**Rony Rauzduel** · 12/11/2012, 15h36

Le formulaire est soumis en jQuery avec Ajax

Code Javascript :

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
 
/** script traitant de l'affichage de la zone d'inscription */
$(document).ready(function() {
	$("#inscription").click(function() {
		$("#inscriptionForm").fadeIn("fast");		
		// pour la soumission du formulaire
		$("#inscriptionForm").submit(function(e) {
			// pendant la soumission on affiche le loader d'attente Ajax
			$("#loader").show();
			e.preventDefault(); // empêcher le navigateur de soumettre lui-même le formulaire			
 
			// pour l'appel Ajax puisqu'on veut rester sur la même page suite à la soumission
			// lors de l'appel Ajax la référence #inscriptionForm sera perdu il faut donc la réaffecter
			var url = $(this).attr('action');
			var pseudo = $(this).find("input[name=pseudo]").val();
			var password = $(this).find("input[name=password]").val();
			var verifPassword = $(this).find("input[name=verifPassword]").val();
			var anneeNaiss = $(this).find("input[name=anneeNaiss]").val();
			var email = $(this).find("input[name=email]").val();
			var telephone = $(this).find("input[name=telephone]").val();
			var masquerTel = $(this).find('input[name=masquerTel]').val();			
			var region = $(this).find("select[name=region]").val();
 
			var form = $(this);	
			// pour récupérer la valeur des champs pseudo et password nous utilisons la paire {clé:valeur}
			// préciser à jQuery que l'on veut le type de sortie JSON en dernier paramètre de $.post()
			$.post(url, 
				{pseudo: pseudo, password: password, verifPassword:verifPassword, anneeNaiss:anneeNaiss, email:email, telephone:telephone, masquerTel:masquerTel, region: region },
				function(data) {
				// une fois les données soumises on cache le loader
				 $("#loader").hide();
				 /** le cas du pseudo **/
				if(data.erreurPseudo) {
					console.log(data.erreurPseudo); // pour le test
					$('#formErreur').show("fast").text(data.erreur);
					$('#inscriptionSent').show("fast").text(data.erreurPseudo);												
					$('#inscriptionSent').fadeOut(3000);
					$('#formErreur').fadeOut(3000);
					form.find("input[name=pseudo]").val('').focus();																						 					
				} // fin if(data.erreurPseudo)								
				/** le cas du mot de passe **/
				if(data.erreurPassword) {
					console.log(data.erreurPassword); // pour le test						
					$('#formErreur').show("fast").text(data.erreur);
					$('#inscriptionSent').show("fast").text(data.erreurPassword);
					$('#inscriptionSent').fadeOut(3000);
					$('#formErreur').fadeOut(3000);
					form.find("input[name=password]").val('').focus();	
					form.find("input[name=verifPassword]").val('');
				} // fin if(data.erreurPassword)
				// si tout est ok dans le formulaire //
				if(data.erreur=="ok") {
					console.log(data.retour); // pour le test
					$('#inscriptionSent').show('fast').text(data.retour);
					$('#inscriptionSent').fadeOut("slow"); 
					form.fadeOut(3000); 																					
				} // fin if(data.erreur=="ok")				
			}, "json"); // fin $.post()				
		}); // fin $("#inscriptionForm").submit()
		// on vide le formulaire
		$("#inscriptionForm input").val(''); $("#inscriptionForm select").val('');		
	}); // fin $("#inscription").click()	
}); // fin $(document)

**SpaceFrog** · 12/11/2012, 15h39

Tu as juste oublié le checked

Code :

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

var masquerTel = $(this).find('input[name=masquerTel]:checked').val();

**Rony Rauzduel** · 12/11/2012, 15h49

Je ne récupère toujours pas la valeur.

Code Javascript :

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

1
2
3
4
5
6
7
8
9
 
anneeNaiss	1985
email	rony.rauzduel@gmail.com
masquerTel	
password	123456789
pseudo	solmat
region	Aquitaine
telephone	0687325047
verifPassword	123456789

**SpaceFrog** · 12/11/2012, 15h55

rajoute ceci pour inhiber l'envoi du form par le bouton submit

Code :

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

1
2
$("#inscription").click(function(e) {
e.preventDefault();

**Rony Rauzduel** · 12/11/2012, 16h00

C'est fait ... mais cela ne change rien.

**SpaceFrog** · 12/11/2012, 16h15

Essaye ceci:

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
/** script traitant de l'affichage de la zone d'inscription */
$(document).ready(function() {
	$("#inscription").click(function(e) {
                 e.preventDefault(à;
		$("#inscriptionForm").fadeIn("fast");		
		// pour la soumission du formulaire
		$("#inscriptionForm").submit(function() {
			// pendant la soumission on affiche le loader d'attente Ajax
			$("#loader").show();
 
			// pour l'appel Ajax puisqu'on veut rester sur la même page suite à la soumission
			// lors de l'appel Ajax la référence #inscriptionForm sera perdu il faut donc la réaffecter
			var url = $(this).attr('action');
			var Pseudo = $("input[name=pseudo]").val();
			var Password = $("input[name=password]").val();
			var VerifPassword = $("input[name=verifPassword]").val();
			var AnneeNaiss = $("input[name=anneeNaiss]").val();
			var Email = $("input[name=email]").val();
			var Telephone = $("input[name=telephone]").val();
			var MasquerTel = $('input[name=masquerTel]:checked').val();			
			var Region = $("select[name=region]").val();
 
			var form = $(this);	
			// pour récupérer la valeur des champs pseudo et password nous utilisons la paire {clé:valeur}
			// préciser à jQuery que l'on veut le type de sortie JSON en dernier paramètre de $.post()
			$.post(url, 
				{pseudo: Pseudo, password: Password, verifPassword:VerifPassword, anneeNaiss:AnneeNaiss, email:Email, telephone:Telephone, masquerTel:MasquerTel, region: Region },
				function(data) {
				// une fois les données soumises on cache le loader
				 $("#loader").hide();
				 /** le cas du pseudo **/
				if(data.erreurPseudo) {
					console.log(data.erreurPseudo); // pour le test
					$('#formErreur').show("fast").text(data.erreur);
					$('#inscriptionSent').show("fast").text(data.erreurPseudo);												
					$('#inscriptionSent').fadeOut(3000);
					$('#formErreur').fadeOut(3000);
					form.find("input[name=pseudo]").val('').focus();																						 					
				} // fin if(data.erreurPseudo)								
				/** le cas du mot de passe **/
				if(data.erreurPassword) {
					console.log(data.erreurPassword); // pour le test						
					$('#formErreur').show("fast").text(data.erreur);
					$('#inscriptionSent').show("fast").text(data.erreurPassword);
					$('#inscriptionSent').fadeOut(3000);
					$('#formErreur').fadeOut(3000);
					form.find("input[name=password]").val('').focus();	
					form.find("input[name=verifPassword]").val('');
				} // fin if(data.erreurPassword)
				// si tout est ok dans le formulaire //
				if(data.erreur=="ok") {
					console.log(data.retour); // pour le test
					$('#inscriptionSent').show('fast').text(data.retour);
					$('#inscriptionSent').fadeOut("slow"); 
					form.fadeOut(3000); 																					
				} // fin if(data.erreur=="ok")				
			}, "json"); // fin $.post()				
		}); // fin $("#inscriptionForm").submit()
		// on vide le formulaire
		$("#inscriptionForm input").val(''); $("#inscriptionForm select").val('');		
	}); // fin $("#inscription").click()	
}); // fin $(document)

**Rony Rauzduel** · 12/11/2012, 16h36

En mettant ton code, la valeur du mot de passe n'est pas récupérée ainsi que celle de masquerTel.

**SpaceFrog** · 12/11/2012, 16h42

et avec ceci ?

Code :

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

1
2
3
4
5
6
7
8
var Pseudo = $("input[name='pseudo']").val();
			var Password = $("input[name='password']").val();
			var VerifPassword = $("input[name='verifPassword']").val();
			var AnneeNaiss = $("input[name='anneeNaiss']").val();
			var Email = $("input[name='email']").val();
			var Telephone = $("input[name='telephone']").val();
			var MasquerTel = $('input[name='masquerTel']:checked').val();			
			var Region = $("select[name='region']").val();

si tu utilises firebug regarde mest un point d'arret avant le $.post, et verfie les valeurs

**Rony Rauzduel** · 12/11/2012, 16h49

Cette syntaxe n'est pas possible en jQuery

Code :

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

var MasquerTel = $('input[name='masquerTel']:checked').val();

Le point d'arrêt avant $.post ne me communique pas d'où vietnt l'erreur.

**SpaceFrog** · 12/11/2012, 16h58

arf desolé c'est la seule ligne avec des simples quotes

Code :

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

var MasquerTel = $("input[name='masquerTel']:checked").val();

Récupérer la valeur d'un bouton radio avec json

jQuery

Discussions similaires

Partager

Partager