Grisage dans un formulaire

**chrosnir** · 16/11/2007, 16h49

Bonjour à tous,

Je construit en ce moment ma page web et j'aimerai actualiser un tableau en fonction de 2 critères. Pour celà j'utilise un formulaire:

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
<form action='' name='Filtrer' method='post' onSubmit='return valider();'>
<form name='form2'>
<div class='position3'>
<select name='menu' onChange='menuderoulant(this)'>
<option value='#'>Select. entreprise</option>
<option>Messier</option>
<option>Thompson</option>
</select>
</div>
</form>
 
<table class='position4'>
<tr>
<th><label for'lebelle_devis></label></th>
<td><input type='text' name='numdev' id='libelle_devis' size='3.5'></td>
</tr>
</table>
 
<p class='position5'>
<input type='submit' value='Filtrer'>
</p>
</form>

Comme vous le voyez on peut filter par nom d'entreprise via un menu déroulant, par numéro (via le champs designé par id=libele_devis).

Cependant avant de valider le formulaire (cliquer sur filtrer) je veux etre sur qu'un seul des 2 criteres à été rentré. Donc lorsque je choisi une entreprise via le menu déroulant, le champs libelle_devis se grise et vice-versa. Mais je ne vois pas quel script java utilisé ni comment.

Voilà merci à ceux qui auront le courage de se pencher sur la question parceque c'est vraiment pas facile.

**SpaceFrog** · 16/11/2007, 16h53

disabled

**sachav** · 16/11/2007, 17h12

Bonjour,

pouvez-vous donner tout le code s'il vous plait?
Merci

**jeje13009** · 16/11/2007, 17h46

slt,

dans ta fonction menuderoulant(), tu ajoutes la ligne :

Code :

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

document.getElementById("libelle_devis").disabled = true;

sinon, tu peux aussi faire le submit directement dans ta fonction...

**chrosnir** · 21/11/2007, 10h06

Bjr,

j'ai essayé de mettre cette ligne dans la fonction menuderoulant() mais le champs libelle_devis ne se grise toujours pas lorsque je choisi une option du menu déroulant.

Merci de m'éclairer un petit peu pour les modifications à faire

**E.Bzz** · 21/11/2007, 10h33

Bonjour,

Envoyé par chrosnir

j'ai essayé de mettre cette ligne dans la fonction menuderoulant() mais le champs libelle_devis ne se grise toujours pas lorsque je choisi une option du menu déroulant.

Ou alors peut etre fallait-il entrer cette ligne dans le fichier .js lui meme et non dans le fichier html?

Normallement, non.
Mais les problèmes de syntaxe de ton code empêche peut-être la prise en compte

Code :

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

<label for='libelle_devis'></label>

De même le size='3.5'. size n'accepte que les valeurs entières, me semble-t-il ...

Sinon, fais voir ton code actuel de la partie concernée (HTML + JS)

A+

**chrosnir** · 21/11/2007, 11h08

Non le 3.5 marche très bien, dans mon code du moins...

Sinon j'ai trouvé la solution pour griser le champs libelle_devis lorsque je selectionne quelque chose dans le menu déroulant, je vais maintenant essayer de faire en sorte que l'inverse se fasse aussi (que le menu déroulant se grise lorsque je rentre quelque chose dans le champs libelle_devis).

Je vous tiens au courant.

**E.Bzz** · 21/11/2007, 11h12

Envoyé par chrosnir

Sinon j'ai trouvé la solution pour griser le champs libelle_devis lorsque je selectionne quelque chose dans le menu déroulant

Elle est différente de celle proposée ?

A+

**chrosnir** · 21/11/2007, 11h34

Oui, en fait ce n'étais pas une erreur de synthaxe.

Voici le code de ma page HTML:

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
 
<head>
<title> 'Intranet' </title>
<meta http-equiv="Content-Language" content="fr"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"></meta>
<meta name='author' content='L'/>
<meta name='version' content='1.1'/>
 
<script type='text/javascript'>
function menuderoulant(selection){
var Data = selection.options[selection.selectedIndex].value;
  if( Data !='NULL'){
    document.getElementById('libelle_devis').disabled = true;
	}
  else{
   document.getElementById('libelle_devis').disabled = false;
  }
}
</script>
 
 <link rel='stylesheet' type='text/css' media='all' href='stylesheets/devstyle.css'>
</head>
 
<body>
 
<form action='' name='Filtrer' method='post' onSubmit='return valider();'>
<form name='form2'>
<div class='position3'>
<select name='menu' onChange='menuderoulant(this)'>
<option value='#'>Select. entreprise</option>
<option value='Messier'>Messier</option>
<option value='Thompson'>Thompson</option>
</select>
</div>
</form>
 
<table class='position4'>
<tr>
<th><label for'lebelle_devis'></label></th>
<td><input type='text' name='numdev' id='libelle_devis' size='3.5'></td>
</tr>
</table>
 
<p class='position5'>
<input type='submit' value='Filtrer'>
</p>
</form>
</body>
</html>

Avec ce code, dès que je selectionne une des options du menu déroulant, mon champs libelle_devis se grise.
Mais je n'arrive toujours pas à faire en sorte que lorsque mon champs libelle-devis soit différent de NULL, le menu déroulant se grise.

Es-ce que vous pouvez m'aider pour ca?

**E.Bzz** · 21/11/2007, 11h40

Envoyé par chrosnir

Oui, en fait ce n'étais pas une erreur de synthaxe.

Code :

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

document.getElementById('libelle_devis').disabled = true;

donc, non, elle n'était pas différente de celle proposée.

... et oui, tu as toujours une erreur de syntaxe (et d'orthographe) dans ton tag <label>

Et tu avais visiblement d'autres critères à prendre en compte, ce qui par contre est visiblement fait

A+

**E.Bzz** · 21/11/2007, 11h44

Envoyé par chrosnir

Avec ce code, dès que je selectionne une des options du menu déroulant, mon champs libelle_devis se grise.
Mais je n'arrive toujours pas à faire en sorte que lorsque mon champs libelle-devis soit différent de NULL, le menu déroulant se grise.

Es-ce que vous pouvez m'aider pour ca?

Si c'est bien ton <select> que tu appelles "menu déroulant" :

Code :

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

<input type='text' name='numdev' id='libelle_devis' size='3.5' onchange="document.getElementById('menu').disabled = (this.length>0);">

En ajoutant bien sûr un id="menu" dans ton tag <select>.

A+

**chrosnir** · 21/11/2007, 11h49

J'ai toujours laissé libelle_devis dans:

Code :

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

document.getElementById('libelle_devis').disabled = true;

Car il correspond à l'Id de l'élément:

Code :

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

1
2
<th><label for'lebelle_devis'></label></th>
<td><input type='text' name='numdev' id='libelle_devis' size='3.5'></td>

Et non à son label.

Donc l'erreur ne venait pas de là. D'ailleurs j'ai volontairement choisi un label différent de l'Id pour ne pas me mélanger. Le programme fonctionne très bien.

Par contre mon second problème n'est toujours pas résolu, es-ce que tu aurai une solution à me proposer?

**jeje13009** · 21/11/2007, 11h50

slt,

tu peux utiliser la même fonction... il te faut pour cela ajouter un paramètre à celle-ci : l'id du select à griser ou non.

donc en définitive tu appeles :

Code :

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

menuderoulant(this,'libelle_devis');

et :

Code :

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

menuderoulant(this,'menu');

**E.Bzz** · 21/11/2007, 11h54

Envoyé par chrosnir

Par contre mon second problème n'est toujours pas résolu, es-ce que tu aurai une solution à me proposer?

C'était déjà fait, juste au dessus ...

**E.Bzz** · 21/11/2007, 11h54

Envoyé par jeje13009

tu peux utiliser la même fonction...

Non, car le test qu'elle inclut ne semble pas pertinent ...

A+

**chrosnir** · 21/11/2007, 12h00

Désolé mais avec ce code ca ne marche toujours pas:

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
<head>
<title> 'Intranet' </title>
<meta http-equiv="Content-Language" content="fr"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"></meta>
<meta name='author' content='L'/>
<meta name='version' content='1.1'/>
 
<script type='text/javascript'>
function menuderoulant(selection){
var Data = selection.options[selection.selectedIndex].value;
  if( Data !='NULL'){
    document.getElementById('libelle_devis').disabled = true;
	}
  else{
   document.getElementById('libelle_devis').disabled = false;
  }
}
</script>
 
 <link rel='stylesheet' type='text/css' media='all' href='stylesheets/devstyle.css'>
</head>
 
<body>
 
<form action='' name='Filtrer' method='post' onSubmit='return valider();'>
<form name='form2'>
<div class='position3'>
<select name='menu' onChange='menuderoulant(this)' id='menu'>
<option value='#'>Select. entreprise</option>
<option value='Messier'>Messier</option>
<option value='Thompson'>Thompson</option>
</select>
</div>
</form>
 
<table class='position4'>
<tr>
<th><label for'lebelle_devis'></label></th>
<td><input type='text' name='numdev' id='libelle_devis' size='3.5' onchange="document.getElementById('menu').disabled = (this.length>0);"></td>
</tr>
</table>
 
<p class='position5'>
<input type='submit' value='Filtrer'>
</p>
</form>
</body>
</html>

Je pense qu'il y a encore quelque chose à rajouter mais je ne sais pas quoi...

**E.Bzz** · 21/11/2007, 12h04

Hum ... c'est ma faute

Code :

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

this.value.length>0

A+

**chrosnir** · 21/11/2007, 12h10

Je n'obtiens toujours aucun grisage dans le menu déroulant, que ce soit avec length, value, value.length ou meme length.value

Dsl je sais que je suis chiant mais j'ai essayé tellement de trucs que je m'en remet à vous maintenant ...

**E.Bzz** · 21/11/2007, 12h20

Envoyé par chrosnir

Je n'obtiens toujours aucun grisage dans le menu déroulant, que ce soit avec length, value, value.length ou meme length.value

Ah bon

Code :

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

onchange="document.getElementById('menu').disabled = (this.value.length>0);"

fonctionne très bien chez moi (IE 6 et FF2).

Par contre, le choix dans la liste est "définitif"

A+

**chrosnir** · 21/11/2007, 12h37

Ok j'avais un conflit entre 2 menus déroulant mais c'est résolu.

Je vais maintenant essayer d'appliquer ca à 4 champs (le menu déroulant, 2 calendriers et le champs libelle_devis).

Je devrai pouvoir y arriver avec toutes les informations que tu m'a donné.

Juste un petit détail quand tu dis:

Par contre, le choix dans la liste est "définitif"

Tu veux dire que quand je choisi une option du menu déroulant je ne pourrai plus dégriser le champs libelle_devis à moins d'actualiser la page?

En tout cas merci beaucoup, je ne sais vraiment pas comment j'aurais fait sans toi

Grisage dans un formulaire

JavaScript

Discussions similaires

Partager

Partager