Grisage dans un formulaire

Version imprimable

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:

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.

16/11/2007, 16h53
SpaceFrog

disabled
16/11/2007, 17h12
sachav

Bonjour,

pouvez-vous donner tout le code s'il vous plait?
Merci
16/11/2007, 17h46
jeje13009

slt,

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

Code:

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

sinon, tu peux aussi faire le submit directement dans ta fonction...
21/11/2007, 10h06
chrosnir

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 :D
21/11/2007, 10h33
E.Bzz

Bonjour,

Citation:

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:

<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+
21/11/2007, 11h08
chrosnir

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.
21/11/2007, 11h12
E.Bzz

Citation:

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+

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

Voici le code de ma page HTML:

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
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?

21/11/2007, 11h40
E.Bzz

Citation:

Envoyé par chrosnir

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

Code:

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> :mrgreen:

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

A+
21/11/2007, 11h44
E.Bzz

Citation:

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:

<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+
21/11/2007, 11h49
chrosnir
J'ai toujours laissé libelle_devis dans:

Code:

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

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

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?
21/11/2007, 11h50
jeje13009

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:

menuderoulant(this,'libelle_devis');

et :

Code:

menuderoulant(this,'menu');
21/11/2007, 11h54
E.Bzz

Citation:

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 ...
21/11/2007, 11h54
E.Bzz

Citation:

Envoyé par jeje13009

tu peux utiliser la même fonction...

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

A+

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

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
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...

21/11/2007, 12h04
E.Bzz

Hum ... c'est ma faute :oops:

Code:

this.value.length>0

A+
21/11/2007, 12h10
chrosnir

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

Dsl je sais que je suis chiant mais j'ai essayé tellement de trucs que je m'en remet à vous maintenant ...
21/11/2007, 12h20
E.Bzz

Citation:

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 8O

Code:

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+
21/11/2007, 12h37
chrosnir

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:

Citation:

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 ;)
21/11/2007, 12h42
E.Bzz

Citation:

Envoyé par chrosnir

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?

C'est bien ça :D
Mais c'est peut-être volontaire ....

A+
21/11/2007, 12h48
chrosnir

Non justement je voulais le dégriser lorsque je revenai au choix par défaut id='#' mais puisque tu me dis que c'est définitif tant pis.

Je rencontre un problème lorsque je veux griser plusieurs champs en meme temps, j'ai essayé ca:

Code:

<input type='text' name='numdev' id='libelle_devis' size='3.5' onchange="document.getElementById('menudel','cal-field-1').disabled = (this.value.length>0);">

et ca:

Code:

<input type='text' name='numdev' id='libelle_devis' size='3.5' onchange="document.getElementById('menudel').disabled = (this.value.length>0);" onchange="document.getElementById('cal-field-1').disabled = (this.value.length>0);">

Mais aucun des 2 ne marche. Comment je peux faire autrement?
21/11/2007, 13h53
E.Bzz

Citation:

Envoyé par chrosnir

Non justement je voulais le dégriser lorsque je revenai au choix par défaut id='#' mais puisque tu me dis que c'est définitif tant pis.

Je faisais juste remarquer qu'en l'état actuel le choix était définitif. A toi d'adapter pour que ça ne le soit plus ...
Sinon

Code:

onchange="document.getElementById('menudel').disabled = (this.value.length>0);document.getElementById('cal-field-1').disabled = (this.value.length>0);"

EDIT : mais du coup, autant passer par une fonction qui ferait tous les "disable" (et que tu appellerais sur onchange) ...

A+
21/11/2007, 14h09
chrosnir

J'ai réussi a le dégriser lorsque j'enlève mon choix du menu déroulant.

Ca marche super, encore merci :D
21/11/2007, 14h50
jeje13009

slt,

tu parles de son if(Data != 'NULL') ? pertinent ou pas c'est ce qu'il veut à nouveau vérifier non ? ou j'ai mal compris ?

PS : j'avais pas vu la deuxieme page, dsl.. mon message fait ref à :

Citation:

Envoyé par E.Bzz

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

A+