Griser / Désactiver un élément [Résolu]

gege765 · 14/01/2012, 17h27

Bonjour,

Voilà j'ai un formulaire de recherche contenant deux éléments;

J'aimerais que seul un des deux éléments soit complété, soit le nom ou l'adresse.

Est-il possible en javascript ou par une autre méthode de désactiver un élément si l'autre a été complété sans passé par un bouton radio comme je le fais actuellement ?

Existe t'il une méthode plu simple ?

Voici mon code :

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
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Recherche</title>
		<script type="text/javascript">
			function grise(radio) {
				if(radio[0].checked){
					document.choix.ip.disabled=true
					document.choix.nom.disabled=false
 
				} 
				if(radio[1].checked){
					document.choix.ip.disabled=false
					document.choix.nom.disabled=true
				}
			} 
		</script> 
	</head>
	<body>	
		<form action='traitementReqPerso.php' name='choix' class='cmxform' id='frm_rech' method='post'>
			<fieldset>
				<legend>Recherche rapide par nom ou adresse </legend>
				<p>
					<input type="radio" name="choixRech" value="Nom" onclick="grise(this.form.choixRech)">
					<label for='nom'>Nom</label>
					<select name='nom' id='nom'>
						<option value=''>Choisir un Nom</option>
						<option value='2510'>2510</option>
						<option value='2610'>2610</option>
						<option value='2510'>2512</option>
						<option value='2510'>2524</option>
						<option value='2510'>2312</option>
						<option value='2510'>2324</option>
					</select>
				</p>
				<p>
					<input type="radio" name="choixRech" value="ip" onclick="grise(this.form.choixRech)">
					<label for='ip'>Adresse IP</label>
					<input type='text' name='ip' value=''>
				</p>
				<p>
					<input class='submit' type='submit' value='Afficher'>
				</p>
			</fieldset>
		</form>
	</body>
</html>

NoSmoking · 15/01/2012, 10h39

Bonjour,
ergonomiquement parlant cela me paraît moyen que de désactiver un champ quand l'autre est renseigné, comment fait-on lorsque l'on décide de changer d'avis, l'autre champ étant disabled il devient inaccessible!

gege765 · 15/01/2012, 11h55

Bonjour,

Merci de ton aide.

Si l'utilisateur change d'avis, il re-sélectionne le bouton radio est dans ce cas le champs n'est plus grisé.

Quel solution alternative existe t'il à cela ?

Bovino · 15/01/2012, 12h01

La réponse de NoSmoking concernait ta demande :

Citation:

Est-il possible en javascript ou par une autre méthode de désactiver un élément si l'autre a été complété sans passé par un bouton radio comme je le fais actuellement ?

et je rejoins d'ailleurs son avis !

Sinon, tu peux simplifier ta fonction :

Code :

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

1
2
3
4
function grise(radio) {
    document.choix.ip.disabled=radio[1].checked;
    document.choix.nom.disabled=radio[0].checked;
}

gege765 · 15/01/2012, 12h49

Désolé.
Je pense que je n'étais pas totalement réveillé.

Merci pour la simplification de la fonction.
D'ailleurs il y avait une petite erreur.

Code :

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

1
2
3
4
function grise(radio) {
	document.choix.ip.disabled=radio[0].checked;
	document.choix.nom.disabled=radio[1].checked;
}

Autre chose au chargement de la page comment faire pour désactiver un des élément.

j'ai ajouté

Code :

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

<input type="radio" name="choixRech" value="Nom" checked='checked' onclick="grise(this.form.choixRech)">

Le problème est je pense lié au faite que l’évènement javascript est onclick est donc il ne se passe rien au chargement de la page.

Quel serait la solution pour qu'un des élément soit grisé au chargement de la page ?

Bovino · 15/01/2012, 13h59

Citation:

Envoyé par gege765

D'ailleurs il y avait une petite erreur.

Bah... non...
Si le radio est coché, sa propriété checked vaut true or tu veux que le champ associé soit activé, donc que sa propriété disabled soit false

Citation:

Envoyé par gege765

Autre chose au chargement de la page comment faire pour désactiver un des élément.

sur le onload du body par exemple

Code html :

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

<body onload="grise(document.getElementsByName('choixRech')">

gege765 · 15/01/2012, 14h39

Citation:

Envoyé par Bovino

Bah... non...
Si le radio est coché, sa propriété checked vaut true or tu veux que le champ associé soit activé, donc que sa propriété disabled soit false

Pourtant lorsque j'ai testé justement je n'obtenais pas le résultat attendu.
Or en inversant cela fonctionne.

Sinon pour le <body onload="grise(document.getElementsByName('choixRech'))"> c'est OK

15/01/2012, 11h55	#3
gege765 Membre à l'essai Inscription : avril 2009 Messages : 125 Détails du profil Informations forums : Inscription : avril 2009 Messages : 125 Points : 24 Points : 24	Bonjour, Merci de ton aide. Si l'utilisateur change d'avis, il re-sélectionne le bouton radio est dans ce cas le champs n'est plus grisé. Quel solution alternative existe t'il à cela ?
	00

15/01/2012, 10h39	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, ergonomiquement parlant cela me paraît moyen que de désactiver un champ quand l'autre est renseigné, comment fait-on lorsque l'on décide de changer d'avis, l'autre champ étant disabled il devient inaccessible!
	10

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