évènement onClick avec Firefox

Version imprimable

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:

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?

14/01/2010, 09h55
E.Bzz

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+
14/01/2010, 10h07
DiDieuh

Effectivement l'id doit être unique, utilise l'attribut "class" pour gérer tes input.
14/01/2010, 10h11
E.Bzz

Citation:

Envoyé par DiDieuh

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

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

Par contre c'est

Code:

....style.backgroundColor

A+
14/01/2010, 10h12
Bugger24

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:roll:. Bien vue:ccool:

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.:)
14/01/2010, 13h29
Bovino

Citation:

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

Citation:

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

EDIT : sauf le backgroundColor, bien entendu, qui ne marche pas vraiment bien en dehors de l'objet style...
14/01/2010, 13h56
Bugger24

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

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

ceci n'est pas une solution

j'avais trois minutes à perdre, alors j'ai "rangé" un peu :aie: oui je jure je vais aller me soigner

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

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

15/01/2010, 08h41
Bugger24

Merci pour cette interlude syntaxique RomainVALERI :ccool:
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 ...
15/01/2010, 08h52
vermine

J'ai envie de dire une bêtise mais le Javascript est activé sur votre FF ? :oops:
15/01/2010, 09h13
Bugger24

C'est une remarque judicieuse :zoubi:, mais je viens de vérifié et le javascript est bien activé.
15/01/2010, 09h21
Bovino

Un problème de cache peut-être :?
Tu as essayé de recharger ta page avec F5 (voire CTRL+F5) ?
15/01/2010, 09h41
Bugger24

Oui, j'ai pris l'habitude de toujours recharger mes pages en développement via F5
15/01/2010, 09h47
vermine

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é. :)
15/01/2010, 09h53
E.Bzz

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+

J'utilise DreamWeaver 8.0 pour le développement.

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

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

Je me sens bête. :oops:

Code:

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:

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

15/01/2010, 10h52
Bugger24
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:

1 2 3 4 require_once('template/haut.tpl'); require_once('template/maPage.tpl'); require_once('template/bas.tpl');
15/01/2010, 10h55
E.Bzz

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

A+
15/01/2010, 11h10
Bugger24

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é :roll: . 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.
15/01/2010, 11h20
E.Bzz

Le lynchage attendra : signaler (et reconnaitre) l'erreur et le principal :ccool:

EDIT : ça confirme en tous cas l'intérêt de faire des copié/collé pour poster un code, au lieu de le recopier ;)

A+
15/01/2010, 13h47
RomainVALERI

Citation:

Envoyé par Bugger24

Dans le code réel, [...] j'ai oublié de spécifié l'attribut id

Ouf... ! :mouarf: Je préfère ça, ça commençait à devenir bizarre... ^^

Sinon juste en passant : quand tu en auras marre de placer/commenter/décommenter/supprimer des alert un peu partout pour débugger... essaie un peu les outils de débuggage JS du marché*, tu vas gagner énormément de temps (voire même de qualité) dans tes développements ^^

* Y'en a plein, notamment Firebug qui reste la référence, et même sur IE on en trouve quelques uns (ex : DebugBar) ^^