évènement onClick avec Firefox

**Bugger24** · 14/01/2010, 09h51

Bonjour à tous,

Voila, j'ai un petit souci. J'ai une page web contenant trois boutons radio et deux zone de saisie. En fonction du bouton radio sélectionné, je doit autoriser ou non la saisie dans tel ou tel zone.

Voici à quoi ressemble 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
 
// Boutons radio 
<input type="radio" name="dispense" value="0"  onClick="masque_date('0');"/>
<input type="radio" name="dispense" value="1"  onClick="masque_date('1');"/>
<input type="radio" name="dispense" value="2" onClick="masque_date('2');"/>
 
// Zones de saisie 
<input type="text" name="datedeb" id="datedeb" maxlenght="10"/>
<input type="text" name="datefin" id="datefin" maxlenght="10"/>
 
// Fonction javascript
function masque_date(typedisp){
switch(typedisp){
  case '0':
    document.getElementById('datedeb').disabled = true;
    document.getElementById('datedeb').value = "";
    document.getElementById('datedeb').backgroundColor = "#CCCC99";
    document.getElementById('datefin').disabled = true;
    document.getElementById('datefin').value = "";
    document.getElementById('datefin').backgroundColor = "#CCCC99";
    break;
  case '1':
    document.getElementById('datedeb').disabled = false;
    document.getElementById('datedeb').value = "__/__/____";
    document.getElementById('datedeb').backgroundColor = "#FFFFFF";
    document.getElementById('datefin').disabled = false;
    document.getElementById('datefin').value = "__/__/____";
    document.getElementById('datefin').backgroundColor = "#FFFFFF";
    break;
  case '2':
    document.getElementById('datedeb').disabled = false;
    document.getElementById('datedeb').value = "__/__/____";
    document.getElementById('datedeb').backgroundColor = "#FFFFFF";
    document.getElementById('datefin').disabled = true;
    document.getElementById('datefin').value = "";
    document.getElementById('datefin').backgroundColor = "#CCCC99";
    break;
  }
}

Le problème est que ce code fonctionne très bien sous IE, mais pas sous FF.

J'ai consulté un grand nombre de forum, tutoriel et autre, et la seul chose que j'ai compris est que FF ne connait pas l'objet window.event et que par conséquent, il faut lui définir. Est ce que quelqu'un peut me dire comment faire cette définition avec l'évènement onClick?

**E.Bzz** · 14/01/2010, 09h55

Bonjour,
un id doit être unique dans la page.
Or ce n'est pas le cas ici (typedisp).
Peut-être cette correction suffira-t-elle ...

A+

**DiDieuh** · 14/01/2010, 10h07

Effectivement l'id doit être unique, utilise l'attribut "class" pour gérer tes input.

**E.Bzz** · 14/01/2010, 10h11

Envoyé par DiDieuh

utilise l'attribut "class" pour gérer tes input.

Effectivement,ça serait mieux, mais ça n'a aucun rapport avec le problème ...

Par contre c'est

Code :

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

....style.backgroundColor

A+

**Bugger24** · 14/01/2010, 10h12

Exact, c'est une petite erreur de re-copiage manuelle, etant donné que j'utilise deux postes différent et que mon code est sur l'autre poste

. Bien vue

Le backgroundColor fonctionne, même sans le 'style'.

Mon problème ne porte pas sur la mise en forme de mes zone de texte, mais sur l'évènement.

**Bovino** · 14/01/2010, 13h29

Envoyé par Bugger24

la seul chose que j'ai compris est que FF ne connait pas l'objet window.event et que par conséquent, il faut lui définir.

C'est pas faux... ceci dit, il te servirait à quoi l'objet event ???

Surtout, ça veut dire quoi

ce code fonctionne très bien sous IE, mais pas sous FF.

parce qu'en copiant collant le code de ton 1er post, ça marche correctement sur FF

EDIT : sauf le backgroundColor, bien entendu, qui ne marche pas vraiment bien en dehors de l'objet style...

**Bugger24** · 14/01/2010, 13h56

Quand je dit que ça ne fonctionne pas, c'est à dire que sous FF, lorsque je sélectionné successivement mes boutons radio, quel qu'il soit, je peut saisir des informations dans mes deux zones de texte, à l'inverse d'IE qui, en fonction du bouton selectionné, m'interdit la saisie

P.S.: Mea-culpa les amis, encore une erreur de re-copiage, effectivement backgroundColor ne fonctionne pas sans l'objet style

**RomainVALERI** · 14/01/2010, 14h27

j'avais trois minutes à perdre, alors j'ai "rangé" un peu

oui je jure je vais aller me soigner

Code javascript :

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
// Fonction javascript
function masque_date(typedisp){
   var deb = document.getElementById('datedeb');
   var fin = document.getElementById('datefin');
   var BLANC = "#FFFFFF", COUL = "#CCCC99", FORMAT_DATE = "__/__/____";
   switch(typedisp) {
      case '0':
         deb.disabled = true;
         deb.value = "";
         deb.style.backgroundColor = COUL;
         fin.disabled = true;
         fin.value = "";
         fin.style.backgroundColor = COUL;
         break;
      case '1':
         deb.disabled = false;
         deb.value = FORMAT_DATE;
         deb.style.backgroundColor = BLANC;
         fin.disabled = false;
         fin.value = FORMAT_DATE;
         fin.style.backgroundColor = BLANC;
         break;
      case '2':
         deb.disabled = false;
         deb.value = FORMAT_DATE;
         deb.style.backgroundColor = BLANC;
         fin.disabled = true;
         fin.value = "";
         fin.style.backgroundColor = COUL;
         break;
   }
}

...et en passant il y a aussi cette petite erreur (peut-être simplement mauvaise recopie...) :

Code :

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

<input type="text" name="datefin" id="datefin" maxlenght="10"/>

**Bugger24** · 15/01/2010, 08h41

Merci pour cette interlude syntaxique RomainVALERI

J'ai modifié mon code avec les changements que tu y a apporté

Par contre mon problème de départ persiste et j'arrive pas à m'en défaire. Je ne comprend pas pourquoi ce code ne fonctionne pas chez moi avec FF, alors que plusieurs personnes de ce forum l'on testé et ça fonctionne

, je sèche ...

**vermine** · 15/01/2010, 08h52

J'ai envie de dire une bêtise mais le Javascript est activé sur votre FF ?

**Bugger24** · 15/01/2010, 09h13

C'est une remarque judicieuse

, mais je viens de vérifié et le javascript est bien activé.

**Bovino** · 15/01/2010, 09h21

Un problème de cache peut-être

Tu as essayé de recharger ta page avec F5 (voire CTRL+F5) ?

**Bugger24** · 15/01/2010, 09h41

Oui, j'ai pris l'habitude de toujours recharger mes pages en développement via F5

**vermine** · 15/01/2010, 09h47

Vous passez par un outil de développement quelconque ?
Sinon je ne vois plus grand chose:

- Vider les fichiers temporaires via Outils de FF même si le F5 et surtout Ctrl+F5 auraient dû faire en sorte de régler ce souci.

- Testez-vous la bonne page ?

C'est bête comme question mais ça m'est déjà arrivé.

**E.Bzz** · 15/01/2010, 09h53

En complément de tous ça : peux-tu refaire un copié/collé de ta version actuelle (il arrive aussi qu'en faisant des corrections on ajoute de nouvelles erreurs

)

A+

**Bugger24** · 15/01/2010, 10h28

J'utilise DreamWeaver 8.0 pour le développement.

Voici le code source actuel, qui pose problème :

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
50
51
52
53
54
55
56
57
58
59
60
61
 
// Bouton radio
<input type="radio" name="dispense" value="0" onClick="masque_date('0');"/>
<input type="radio" name="dispense" value="1" onClick="masque_date('1');"/>
<input type="radio" name="dispense" value="2" onClick="masque_date('2');"/>
 
// Zone de saisie
<input type="text" name="datedeb" id="datedeb" maxlength="10"/>
<input type="text" name="datefin" id="datefin" maxlength="10"/>
 
// Fonction Javascript
function masque_date(typedisp){
  alert("Début de la fonction 'masque_date().'");
 
  var deb = document.getElementById('datedeb');
  var fin = document.getElementById('datefin');
  var BLANC = "#FFFFFF", COUL = "#CCCC99", FORMAT_DATE = "__/__/____";
  alert("Fin de déclaration des variables.");
 
  alert("deb = "+deb);
  alert("fin = "+fin);
  alert("BLANC = "+BLANC);
  alert("COUL = "+COUL);
  alert("FORMAT_DATE = "+FORMAT_DATE);
  alert("Fin du controle des variables.");
 
  switch(typedisp){
    case '0':
      alert("Cas de non dispense.");
      deb.disabled = true;
      deb.value = "";
      deb.style.backgroundColor = COUL;
      fin.disabled = true;
      fin.value = "";
      fin.style.backgroundColor = COUL;
      alert("Fin de traitement.");
      break;
 
    case '1':
      alert("Cas de dispense temporaire.");
      deb.disabled = false;
      deb.value = FORMAT_DATE;
      deb.style.backgroundColor = BLANC;
      fin.disabled = false;
      fin.value = FORMAT_DATE;
      fin.style.backgroundColor = BLANC;
      alert("Fin de traitement.");
      break;
 
    case '2':
      alert("Cas de dispense définitive.");
      deb.disabled = false;
      deb.value = FORMAT_DATE;
      deb.style.backgroundColor = BLANC;
      fin.disabled = true;
      fin.value = "";
      fin.style.backgroundColor = COUL;
      alert("Fin de traitement.");
      break;
    }
}

En prime, je vous ai même laissé les alerte pour le controle du déroulement de la fonction. D'ailleur, je viens de me rendre compte que sous FF ma variable 'deb' a pour valeur null, alors que sous IE elle a pour valeur [objet]. Pensez vous que c'est normal ?

**vermine** · 15/01/2010, 10h39

Je me sens bête.

Code :

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

1
2
3
4
5
6
7
8
 
// Zone de saisie
<input type="text" name="datedeb" id="datedeb" maxlength="10"/>
<input type="text" name="datefin" id="datefin" maxlength="10"/>
 
// Fonction Javascript
function masque_date(typedisp){
  alert("Début de la fonction 'masque_date().'");

Le code HTML et le code Javascript sont bien dans leur "canevas" respectif ?

Code :

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

1
2
3
4
 
maPage.html //Pour le html
 
monScript.js /* ou  */ <script></script> //Pour le JS

**Bugger24** · 15/01/2010, 10h52

Les pages web sont construites d'une manière assé bizard.
Pour chaque page j'ai un fichier .tpl (template) qui contient le code HTML, et un fichier .php qui contient tous les traitements php. Je sait qu'au niveau de l'écriture ce n'est pas tres jolie, mais dans mon cas je n'ai pas d'autre choix que de mettre le code js à la fin de ma page php, avec évidement mes balises <script type="text/javascript"></script>.
La construction de la page s'effectue dans la page php, grâce à l'appel des différents template:

Code :

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

1
2
3
4
 
require_once('template/haut.tpl');
require_once('template/maPage.tpl');
require_once('template/bas.tpl');

**E.Bzz** · 15/01/2010, 10h55

Du coup, ce qu'il faudrait que tu nous montres, c'est l'intégralité de la page générée ...

A+

**Bugger24** · 15/01/2010, 11h10

Pour des raisons de sécu, je ne peut pas vous montré l'intégralité de ma page.
Par contre ne vous prenez plus la tête, j'ai trouvé mon erreur et mon code fonctionne.

Dans le code réel, au niveau de mes balises input, j'ai oublié de spécifié l'attribut id, chose que je n'oublie jamais en règle générale, pour preuve que dans le code que je vous ai fourni qui était recopié à la main l'id est spécifié

. IE étant moin rigoureux que FF, celui-ci fait l'amalgame entre les attribut name et id.
Comme quoi y vaut mieux utilisé FF.

Maintenant, je vais pouvoir me fabriqué une corde avec mes lassé pour me pendre, et vous pouvez venir me lincher en place publique à l'aide de branche d'orties.

Merci à tous pour votre patience.

évènement onClick avec Firefox

JavaScript

Discussions similaires

Partager

Partager