Griser / Désactiver un élément

Version imprimable

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:

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>

15/01/2012, 10h39
NoSmoking

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!
15/01/2012, 11h55
gege765

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 ?
15/01/2012, 12h01
Bovino
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:

1 2 3 4 function grise(radio) { document.choix.ip.disabled=radio[1].checked; document.choix.nom.disabled=radio[0].checked; }
15/01/2012, 12h49
gege765
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:

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:

<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 ?
15/01/2012, 13h59
Bovino

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:

<body onload="grise(document.getElementsByName('choixRech')">
15/01/2012, 14h39
gege765

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