mes boutons radio ne sont pas vérifiés

**seblille59** · 14/12/2008, 19h22

bonjour a tous,

pouvez vous m aider, je voudrais que mes bouton radio son verifier comme mes champs de texte mais sa ne fonctionne pas mon formulaire et quand meme envoyé . pouvez svp m'aider?

voici mon code de verification :

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
119
120
121
122
123
//La fonction JavaScript qui vérifie si les champs obligatoirs du formulaire ont été bien remplis
<!--
function envoie(formulaire) {
if ( (document.getElementById('sex').value.length>0)
&&(document.getElementById('nom').value.length>0)
&&(document.getElementById('prenom').value.length>0)
&&(document.getElementById('IKOS').value.length>0)
&&(document.getElementById('LOTUS').value.length>0)
&&(document.getElementById('Meuble').value.length>0)
&&(document.getElementById('poste').value.length>0)
&&(document.getElementById('Tel').value.length>0)
&&(document.getElementById('email').value.length>0)
){
){
formulaire.submit();
} else
alert('Vos réponses ne peuvent pas être envoyées, Vous avez oublié de remplir des champs obligatoires ');
}
-->
et voici mon script :
 
<form action="envoi.php" method="post"
 name="form_contacts" id="form_contacts">
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span style="text-decoration: underline;">Veuillez
indiquez
l'identit&eacute; du nouveau arriv&eacute; sit&eacute; dans
le mail pr&eacute;sedent</span> :</p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span style="color: rgb(0, 0, 0);">*</span><span
 style="font-weight: normal;">Madame</span><input
 name="sex" value="Madame" id="sex" type="radio"><span
 style="font-weight: normal;">Monsieur</span> <input
 name="sex" value="Monsieur" id="sex" type="radio"></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span style="color: rgb(0, 0, 0);">&nbsp;
&nbsp; *</span><span style="font-weight: normal;">Nom
:</span> <input size="50" name="Nom" id="nom"></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span style="color: rgb(0, 0, 0);">*</span><span
 style="font-weight: normal;">Pr&eacute;nom</span>
: <input size="50" name="Prenom" id="prenom"></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span style="color: rgb(0, 0, 0);"></span><span
 style="text-decoration: underline; font-weight: bold;">Quelles
sont les applications dont cette personne a besoin en dehors du profil
de d&eacute;marrage du poste de travail</span><span
 style="font-weight: bold;"> :</span><span
 style="font-weight: bold;"></span></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span style="color: rgb(0, 0, 0);">*
IKOS : </span><span style="font-weight: normal;">Oui</span>
  <input name="Ikos" value="oui" id="sex"
 type="radio"><span style="font-weight: normal;">Non</span>
  <input name="Ikos" value="Non" id="sex"
 type="radio"></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span style="color: rgb(0, 0, 0);">*LOTUS
: </span><span style="font-weight: normal;">Oui </span><input
 name="Lotus" value="Oui" id="sex" type="radio"><span
 style="font-weight: normal;">Non</span> <input
 name="Lotus" value="Non" id="sex" type="radio"></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span style="font-weight: normal;">*
Application
sp&eacute;cifique :</span> <input size="50"
 name="appli" id="adresse"></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span style="font-weight: normal;">*
Le bureau dans lequel va travailler la personne est t'il
&eacute;quip&eacute; d'un meuble de bureau ?</span><span
 style="color: rgb(0, 0, 0); font-weight: normal;"> : </span><span
 style="font-weight: normal;">Oui</span> <input
 name="Meuble" value="Oui" id="meuble" type="radio"><span
 style="font-weight: normal;">Non</span> <input
 name="Meuble" value="Non" id="meuble" type="radio"></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span
 style="color: rgb(0, 0, 0); font-weight: normal;">* Y a t'il
y poste de travail
disponible pour cette personne ? Si Oui nom du poste de travail</span><span
 style="font-weight: normal;">&nbsp;:</span><input
 name="poste" id="poste"><span
 style="font-weight: normal;">
Non </span><input name="poste" value="Non"
 id="poste" type="radio"></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span style="font-weight: normal;">*
Futur n&deg; de t&eacute;l&eacute;phone</span><span
 style="color: rgb(0, 0, 0); font-weight: normal;"></span><span
 style="font-weight: normal;">&nbsp;:</span> <input
 name="Tel" id="Tel"></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; color: rgb(0, 0, 0);"
 class="Style10"> <span style="color: rgb(0, 0, 0);"><span
 style="text-decoration: underline;">Renseignement
vous concernant :</span></span></p>
  <p
 style="text-align: center; font-family: Helvetica,Arial,sans-serif; font-weight: bold; color: rgb(0, 0, 0);"
 class="Style10"><span
 style="color: rgb(0, 0, 0); font-weight: normal;">*</span><span
 style="font-weight: normal;">
Votre adresse
email :</span> <input name="email" id="email"
 size="50"></p>
  <p style="width: 1007px;" align="left"> <input
 name="envoyer" id="envoyer" value="Envoyer"
 onclick="envoie(this.form)" type="button"> <input
 name="retablir" id="retablir" value="R&eacute;tablir"
 type="reset"></p>
</form>
<!--END CUSTOM HTML CODE-->

**le_chomeur** · 14/12/2008, 21h55

bonjour , tes boutons radio on le même id , un id doit être UNIQUE dans une page web , premier point a corriger

ensuite , tu peux utiliser le nom pour vérifier si l'un ou l'autre est coché ( avec checked == true ;-)

**seblille59** · 14/12/2008, 22h02

oui mais checked je le met ou stp

**le_chomeur** · 14/12/2008, 22h17

une astuce ....

sur ton bouton radio :

<input type="radio" name="sex" value="oui" onclick="this.checked ? toto=true:toto=false" />

en déclarant une variable toto globale ( en dehors de toute fonction )

ça te permettra au moment de la vérification de faire : if toto = true

**seblille59** · 15/12/2008, 14h08

ok merci

je fais un essai et je te dis si cela fonctionne

**marcha** · 15/12/2008, 15h12

Envoyé par le_chomeur

une astuce ....

sur ton bouton radio :

<input type="radio" name="sex" value="oui" onclick="this.checked ? toto=true:toto=false" />

en déclarant une variable toto globale ( en dehors de toute fonction )

ça te permettra au moment de la vérification de faire : if toto = true

C'est malheureusement pas super fiable. Au moins deux cas de figure
posent problème

1) Si tu clique sur un bouton radio et que tu fais un refresh de la page,
sur certains navigateurs, l'état du formulaire est conservé mais les variables
javascript sont réinitialisées.

2) L'évènement onclick est levé avant que le bouton radio ne change réellement
d'état. Si on fait un "return false" dans le onclick le bouton sera pas effectivement
"checked". étonnement (sur FF2 ici) le this.checked vaut true temporairement, mais le bouton s'active pas.

**le_chomeur** · 15/12/2008, 15h18

effectivement

donc , placer le code de vérification checked au moment du test ... ^^

**seblille59** · 18/12/2008, 13h58

bonjour,

je voudrais suivre vos conseilles mais je ne vois pas comment je dois integret ce que vous m'expliquez

pouvez vous me donner un exemple complet svp

grand merci

**marcha** · 19/12/2008, 08h15

Salut,

Le plus sur pour valider un formulaire c'est d'utiliser l'évènement onsubmit
de la balise form. Utiliser le onclick sur un bouton n'est pas fiable car la
touche Enter sur un champs texte peut provoquer l'envoi du formulaire
sans passer par le onclick de ton bouton.

Par contre l'évènement onsubmit est levé quelque soit la façon d'envoyer
le formulaire.

Code :

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

1
2
 
<form name='nom_du_form' onsubmit='return checkForm("nom_du_form");'  ... >

La fonction checkForm doit retourner false si il faut empêcher l'envoi du
formulaire, true si il faut laisser partir le formulaire. (et tu vire le onclick
sur le bouton)

Exemple de fonction checkForm

Code :

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

1
2
3
4
5
6
7
 
function checkForm(nom_frm) {
  if(isEmpty(nom_frm, 'nom', 'Nom de famille')) return false;
  if(isEmpty(nom_frm, 'prenom', 'Prénom')) return false;
  if(isEmpty(nom_frm, 'choix_couleur', 'Couleur')) return false;
  return true;
}

Exemple de fonction isEmpty:

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
 
function isEmpty(formName, fieldName, caption) {
	var field = document.forms[formName].elements[fieldName];
	var type = field.type ? field.type.toLowerCase() : (field.length ? field[0].type.toLowerCase() : '' );
 
	if(type=='select') {
		var v = field.options[field.selectedIndex].value;
		if(v.length!=0) return false;
	}
	else if(type=='radio') {
		if(field.length) {
			for(var i=0;i<field.length;i++) if(field[i].checked) return false;
			field = field[0];
		} 
		else if(field.checked) return false;
	}
	else {
		var v = field.value;
		if(v.length!=0) return false;
	}
	alert("Le champ " + caption + " est requis");
	field.focus();
	return true;
}

**seblille59** · 21/12/2008, 20h44

j ai bien essayé mais sa ne fonctionne pas

je debute et du coup j ai vraiment du mal a comprendre

mes boutons radio ne sont pas vérifiés

JavaScript

Discussions similaires

Partager

Partager