Désactiver un champ texte en fonction d'un bouton radio

oioou · 24/11/2011, 17h25

Bonjour a tous,je suis débutant en javascript,il y a un petit problème dans mon script,ca me bloque qqs heures,je m'en sors pas.

Voici la demande :
"Si le bouton radio Société est sélectionné, la zone « Prénom » est rendue inactive et grisée
(Utilisez style.backgroundColor). Si un prénom est déjà indiqué, on vide cette zone."

Le contenu de inscription.html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Inscription</title>
<script type="text/javascript" src="inscription.js"></script>
</head>
<body>
<table>
<form name="formulaire" method="get">
<tr>
<td>Nom</td>
<td><input type="text" name="nom"></td>
</tr>
<tr>
<td>Prénom</td>
<td><input type="text" name="prenom"></td>
</tr>
<tr>
<td><input type="radio" name="radio" value="Particulier">Particulier</td>
<td><input type="radio" name="radio" value="Société">Société</td>
</tr>
<tr colspan ="2" text-align="center">
<td "><input type="submit" ></td>
</tr>
</form>
</table>
</body>
</html>

Le contenu de inscription.js :

Code :

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

1
2
3
4
5
6
7
8
9
10
function soumettre() {
        document.forms[0].prenom = "";
	document.forms[0].prenom.style.backgroundColor="gray";
}
 
window.onload = function() {
 
	document.forms[0].onsubmit = soumettre;
 
}

Voici mes question :
1.Quelle est la difference entre "document.forms[0].onsubmit = soumettre;" et "document.forms[0].onsubmit = soumettre();"

2.J'ai vu dans mon page HTML,le champ prenom est grisé pendant un millisecond

,et après il redevient blanc.pq?

andry.aime · 24/11/2011, 19h43

Bonsoir,

1- Avec document.forms[0].onsubmit = soumettre;, tu affectes la fonction soumettre à l’évènement onsubmit du formulaire. Mais avec document.forms[0].onsubmit = soumettre();, tu appelles la fonction soumettre c'est le résultat qui sera affecté à l'évenement onsubmit du formulaire.

2-

Citation:

"Si le bouton radio Société est sélectionné, la zone « Prénom » est rendue inactive et grisée
(Utilisez style.backgroundColor). Si un prénom est déjà indiqué, on vide cette zone."

Utilise disabled=true si tu veux que le champ soit désactivé et que la valeur ne soit pas envoyé.

A+.

oioou · 24/11/2011, 22h46

Citation:

Envoyé par andry.aime

Bonsoir,

2-
Utilise disabled=true si tu veux que le champ soit désactivé et que la valeur ne soit pas envoyé.

A+.

Voici la correction,mais ca ne marche pas.
D'abord les deux radios sont tous déactivés,puis il vérifie les deux cas possibles.

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
function radioActive() {
	if(document.forms[0].radio[1].disabled == true && 
	   document.forms[0].radio[0].disabled == true) {
	   return false;
	} else {
		if(document.forms[0].radio[1].checked === true) { 
		   document.forms[0].prenom.style.backgroundColor="gray";
		}
		if(document.forms[0].radio[0].checked === true) { 
		   document.forms[0].prenom = "";
		   document.forms[0].prenom.style.backgroundColor="white";
		}
		return true;
	}
}
 
function soumettre() {
 
}
 
window.onload = function() {
	if(radioActive) {
	   document.forms[0].onsubmit = soumettre;
	}	
}

NoSmoking · 24/11/2011, 22h52

Bonsoir,

Code :

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

1
2
3
4
5
window.onload = function() {
	if(radioActive) {
	   document.forms[0].onsubmit = soumettre;
	}	
}

le code ci dessu signifie que le test se fera UNE SEULE FOIS lorsque la page aura fini de se charger.
Si aucun des radio n'est coché, au chargement donc, alors tu n'affectera JAMAIS ta fonction.

Il semble plus judicieux de faire le test et affectation éventuelle, sur l'événement onclick des radios, il y aura un véritable dynamisme.

oioou · 27/11/2011, 23h02

Citation:

Envoyé par NoSmoking

Bonsoir,

Code :

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

1
2
3
4
5
window.onload = function() {
	if(radioActive) {
	   document.forms[0].onsubmit = soumettre;
	}	
}

le code ci dessu signifie que le test se fera UNE SEULE FOIS lorsque la page aura fini de se charger.
Si aucun des radio n'est coché, au chargement donc, alors tu n'affectera JAMAIS ta fonction.

Il semble plus judicieux de faire le test et affectation éventuelle, sur l'événement onclick des radios, il y aura un véritable dynamisme.

Je vous en remercie,je m'en sors

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
function active() {
	     document.forms[0].elements[1].disabled = false;
	     document.forms[0].nom = "";
	     document.forms[0].prenom.style.backgroundColor="white";
}
 
function desactive() {
	     document.forms[0].elements[1].disabled = true;
	     document.forms[0].prenom.style.backgroundColor="gray";
}
 
function soumettre() {
		 document.write("Bon travail");
}
 
window.onload = function() {
 
	     document.forms[0].onsubmit = soumettre;	   		
}

Code :

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

1
2
3
4
<tr>
<td><input type="radio" name="radio" value="Particulier" onclick="desactive()">Particulier</td>
<td><input type="radio" name="radio" value="Société" onclick="active()">Société</td>
</tr>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email