Problème de script associé à un formulaire.

Version imprimable

bonjour a tous !

voila j'ai un petit souci !

je suis en train de faire un formulaire ! dans un premier temps j'ai fais se formulaire sans tableau en utilisant les balise <fieldset>... pour des raisons de conception propre au développement en cour j'ai du faire un script afin d'agir sur certain élément de se formulaire, jusque là tous va bien! meme si lors de l'execution la barre d'etat signale une erreur.

Pour des raisons de conception et de présentation j'ai voulu mettre se formulaire dans un tableau ! mais voilà depuis le code javascript n'est plus pris en compte ! je ne vois vraiment pas pkoi car je déclare bien mes éléments : form -> fieldset -> table ...

voici le 1er formulaire :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
<head>
<title></title>
 
 
<style type="text/css">
<!--
 
.marge { margin-left: 10px;}
.input { position: absolute ; left: 110px; font-family : arial, helvetica, sans-serif ; font-size: 8pt; background-color: #FAF0E6 ; }
.select { position: absolute ; left: 110px; font-family : arial, helvetica, sans-serif ; font-size: 8pt; background-color: #FAF0E6 ; }
 
 
-->
</style>
 
<script type="text/javascript">
<!-- Debut
 
// les fonctions 
//--------------
 
// on souhaite changer la proprièté disabled des zones de textes
// fonction et fonction_a
 
function disableInput(idInput_a, idInput_f, valeur)
{
  // champs "autre"
  var input_a = document.getElementById(idInput_a);
  // champ "Fonction"
  var input_f = document.getElementById(idInput_f);
 
  if (valeur) 
  {
    input_f.value = 0;
    input_f.disabled = true;
    input_a.disabled = false;
    input_a.style.background = "#FFF";
    input_f.style.background = "#CCC";
    BSsuppr(idInput_f);
    BSajoute(idInput_a);
  }
  else
  {
    input_f.disabled = false;
    input_a.disabled = true;
    input_a.style.background = "#CCC";
    input_f.style.background = "#FFF";
    BSsuppr(idInput_a);
    BSajoute(idInput_f);
  }
}
 
// fin du script -->
 
</script>
 
</head>
<body> 
 
<form name="form" >
<!-- partie pour l'identité -->
<fieldset><legend>Identité de la personne</legend>
 
<div class="marge">
<P class="libelle">Civilité *
<select id="civ" class="select">
<option selected value=0> - choix - </option>
<option value=1> Md. </option>
<option value=2> Mme. </option>
<option value=3> M. </option>
</select>
</p>
<p class="libelle">Nom *
<input type="text" value="" name="nom" class="input">
</p>
<p class="libelle">Prénom *
<input type="text" value="" name="prenom" class="input">
</p>
</div><br>
</fieldset>
 
<!-- partie pour la fonction du contact -->
<fieldset><legend>Fonction de la personne.</legend>
 
<div class="marge">
 
<P class="libelle">Fonction *
<select id="idf" class="select">
<option selected value=0> - choix - </option>
<option value=1> Maire </option>
<option value=2> Maire-Adjoint </option>
<option value=3> Conseiller Régional </option>
<option value=4> Conseiller Général </option>
</select>
</p>
<P>
<input type="checkbox" id="idactive" name="active" onclick="disableInput('ida','idf',this.checked)">Autre
<input type="text" id="ida" name="a" disabled="true" style ="BACKGROUND-COLOR=#CCC" class="input">
</P>
 
</div><br>
 
</fieldset>
 
<!-- partie pour l'adresse du contact -->
<fieldset><legend>Coordonnées de la personne</legend>
 
<div class="marge">
 
<p class="libelle">Adresse *
<input type="text" value="" name="adresse" class="input" size=50>
</p>
<p class="libelle">Ville *
<input type="text" value="" name="ville" class="input" size=20>
</p>
<p class="libelle">Code postal *
<input type="text" value="" name="cp" class="input" size=5>
</p>
<p class="libelle">Portable
<input type="text" value="" name="portable" class="input" size=14>
</p>
<p class="libelle">Fixe
<input type="text" value="" name="fixe" class="input" size=14>
</p>
 
</div><br>
 
</fieldset>
 
</form>

au niveau de la checkbox : lorsqu'on la coche, la zone de texte a cote apparait et la liste devient disabled.

voici le code du 2eme Formulaire:

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
 
<style type="text/css">
<!--
.marge { margin-left: 12px; margin-top: 2px;}
.titre { margin-left: 10px; margin-top: 2px; font-style:oblique;}
.libelle { margin-left: 20px; margin-top: 2px;}
-->
</style>
 
<script type="text/javascript">
<!-- Debut
 
// les fonctions
//--------------
 
// on souhaite changer la proprièté disabled des zones de textes
// fonction et fonction_a
 
function disableInput(idInput_a, idInput_f, valeur)
{
  // champs "autre"
  var input_a = form.active;
  // champ "Fonction"
  var input_f = document.getElementById(idInput_f);
 
  if (valeur) 
  {
    input_f.value = 0;
    input_f.disabled = true;
    input_a.disabled = false;
    input_a.style.background = "#FFF";
    input_f.style.background = "#CCC";
    BSsuppr(idInput_f);
    BSajoute(idInput_a);
  }
  else
  {
    input_f.disabled = false;
    input_a.disabled = true;
    input_a.style.background = "#CCC";
    input_f.style.background = "#FFF";
    BSsuppr(idInput_a);
    BSajoute(idInput_f);
  }
}
 
// fin du script -->
 
</script>
 
</head>
 
<body>
 
 
<!-- On met en place le formulaire -->
<form name="form">
<fieldset>
<legend></legend>
 
<table border=0 width=100%>
 
<!-- partie pour l'identite du contact -->
<tr>
    <td colspan=2 class="titre">Identification de la personne</td>
<tr>
<tr>
    <td><P class="libelle">Civilité *</p></td>
    <td><select id="civ" class="marge">
        <option selected value=0> - choix - </option>
        <option value=1> Md. </option>
        <option value=2> Mme. </option>
        <option value=3> M. </option>
        </select>
        </td>
<tr>
<tr>
    <td><p class="libelle">Nom *</p></td>
    <td><input type="text" value="" name="nom" class="marge"></td>
<tr>
<tr>
    <td><p class="libelle">Prénom *</p></td>
    <td><input type="text" value="" name="prenom" class="marge"></td>
<tr>
<tr>
    <td colspan=2><Hr></td>
<tr>
<!-- partie pour la fonction du contact -->
<tr>
    <td colspan=2 class="titre">Fonction de la personne</td>
<tr>
<tr>
    <td><P class="libelle">Fonction *</p></td>
    <td><select id="idf" class="marge">
        <option selected value=0> - choix - </option>
        <option value=1> Maire </option>
        <option value=2> Maire-Adjoint </option>
        <option value=3> Conseiller Régional </option>
        <option value=4> Conseiller Général </option>
        </select></td>
<tr>
<tr>
    <td><input type="checkbox" id="idactive" name="active" onclick="disableInput('ida','idf',this.checked')" class="libelle">Autre</td>
    <td><input type="text" id="ida" name="a" disabled="true" style ="BACKGROUND-COLOR=#CCC" class="marge"></td>
<tr>
<tr>
    <td colspan=2><Hr></td>
<tr>
<!-- partie pour les coordonnees du contact -->
<tr>
    <td colspan=2 class="titre">Coordonnées de la personne</td>
<tr>
<tr>
    <td><p class="libelle">Adresse *</p></td>
    <td><input type="text" value="" name="adresse" class="marge" size=50></td>
<tr>
<tr>
    <td><p class="libelle">Ville *</p></td>
    <td><input type="text" value="" name="ville" class="marge" size=30></td>
<tr>
<tr>
    <td><p class="libelle">Code postal *</p></td>
    <td><input type="text" value="" name="cp" class="marge" size=5></td>
<tr>
<tr>
    <td><p class="libelle">Portable </p></td>
    <td><input type="text" value="" name="portable" class="marge" size=14></td>
<tr>
<tr>
    <td><p class="libelle">Fixe </p></td>
    <td><input type="text" value="" name="fixe" class="marge" size=14></td>
<tr>
<tr>
    <td colspan=2><Hr></td>
<tr>
 
</fieldset>
</form>
 
</table>

Ici rien ne se produit lorsque l'on coche la checkbox !

Merci d'avance pour votre aide !

25/07/2006, 15h28
jeca

Bonjour,

Citation:

jusque là tous va bien! meme si lors de l'execution la barre d'etat signale une erreur.

Conception intéressante, bien que très personnelle, voire même révolutionnaire du 'tout va bien'.

Tu devrais déjà commencer par revoir ton code html : les éléments sont imbriquées n'importe comment, les lignes de tableau n'ont pas pas d'élément de fermeture, les attributs 'name' et 'id' ont des valeurs différentes, etc ...

Ensuite, tu fait appel à des fonctions javascript qui n'existent pas : 'BSsuppr()' et 'BSajoute()'.

Quand ceci sera fait, tu charge ton formulaire dans Firefox. Si ça ne fonctionne pas, tu vas dans 'outil', 'console javascript', et tu auras les messages d'erreur.

Essaye çà et dis moi si ca marche...

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<style type="text/css">
<!--
.marge { margin-left: 12px; margin-top: 2px;}
.titre { margin-left: 10px; margin-top: 2px; font-style:oblique;}
.libelle { margin-left: 20px; margin-top: 2px;}
-->
</style>

<script type="text/javascript">
<!-- Debut

// les fonctions
//--------------

// on souhaite changer la proprièté disabled des zones de textes
// fonction et fonction_a

function disableInput(idInput_a, idInput_f)
{
  // champs "autre"
  var input_a = document.getElementById(idInput_a);
  // champ "Fonction"
  var input_f = document.getElementById(idInput_f);

  if (!input_a.enabled) 
  {
    input_f.value = 0;
    input_f.enabled = false;
    input_a.enabled = true;
    input_a.style.background = "#FFF";
    input_f.style.background = "#CCC";
    BSsuppr(idInput_f);
    BSajoute(idInput_a);
  }
  else
  {
    input_f.enabled = true;
    input_a.enabled = false;
    input_a.style.background = "#CCC";
    input_f.style.background = "#FFF";
    BSsuppr(idInput_a);
    BSajoute(idInput_f);
  }
}

// fin du script -->

</script>

</head>

<body>


<!-- On met en place le formulaire -->
<form name="form">
<fieldset>
<legend></legend>

<table border=0 width=100%>

<!-- partie pour l'identite du contact -->
<tr>
    <td colspan=2 class="titre">Identification de la personne</td>
<tr>
<tr>
    <td><P class="libelle">Civilité *</p></td>
    <td><select id="civ" class="marge">
        <option selected value=0> - choix - </option>
        <option value=1> Md. </option>
        <option value=2> Mme. </option>
        <option value=3> M. </option>
        </select>
        </td>
<tr>
<tr>
    <td><p class="libelle">Nom *</p></td>
    <td><input type="text" value="" name="nom" class="marge"></td>
<tr>
<tr>
    <td><p class="libelle">Prénom *</p></td>
    <td><input type="text" value="" name="prenom" class="marge"></td>
<tr>
<tr>
    <td colspan=2><Hr></td>
<tr>
<!-- partie pour la fonction du contact -->
<tr>
    <td colspan=2 class="titre">Fonction de la personne</td>
<tr>
<tr>
    <td><P class="libelle">Fonction *</p></td>
    <td><select id="idf" class="marge">
        <option selected value=0> - choix - </option>
        <option value=1> Maire </option>
        <option value=2> Maire-Adjoint </option>
        <option value=3> Conseiller Régional </option>
        <option value=4> Conseiller Général </option>
        </select></td>
<tr>
<tr>
    <td><input type="checkbox" id="idactive" name="active" onclick="disableInput('ida','idf')" class="libelle">Autre</td>
    <td><input type="text" id="ida" name="a" disabled="true" style ="BACKGROUND-COLOR=#CCC" class="marge"></td>
<tr>
<tr>
    <td colspan=2><Hr></td>
<tr>
<!-- partie pour les coordonnees du contact -->
<tr>
    <td colspan=2 class="titre">Coordonnées de la personne</td>
<tr>
<tr>
    <td><p class="libelle">Adresse *</p></td>
    <td><input type="text" value="" name="adresse" class="marge" size=50></td>
<tr>
<tr>
    <td><p class="libelle">Ville *</p></td>
    <td><input type="text" value="" name="ville" class="marge" size=30></td>
<tr>
<tr>
    <td><p class="libelle">Code postal *</p></td>
    <td><input type="text" value="" name="cp" class="marge" size=5></td>
<tr>
<tr>
    <td><p class="libelle">Portable </p></td>
    <td><input type="text" value="" name="portable" class="marge" size=14></td>
<tr>
<tr>
    <td><p class="libelle">Fixe </p></td>
    <td><input type="text" value="" name="fixe" class="marge" size=14></td>
<tr>
<tr>
    <td colspan=2><Hr></td>
<tr>

</fieldset>
</form>

</table>

J'ai juste viré la variable valeur de la fonction javascript et teste plutot l'etat (enabled ou non) du textfield, et plutot que de mettre disabled à true je met enabled à false. En javascript je suis pas sûr que disabled existe ...

25/07/2006, 15h46
lecail65

Oui effectivement la faute est grosse ! mais bon ds la précipitation ....

Il est vrai que certaine balise n'etait pas bien fermées mais ca n'affecté en rien le fait que le code javascript ne marché po ! donc voilà ...

J'ai essayé la solution du dessus mais ca ne marche qu'en partie ! s'a n'affecte que les couleurs aux zone de texte et sa ne change po le mode disabled de l'objet.

merci quand meme pour la solusss! vais continuer a chercher mais si qqun à une idée sur la question il est le bienvenue !!!
25/07/2006, 15h48
guy777

C'est sur que pour les couleurs ca marche pas vraiment mais je suis pas sûr que tu peux changer les couleurs d'une élement formulaire disabolé (!!!)
sinon les bons champs sont bien disable quand tu cliques sur la case à cocher ??? Non ???

Citation:

J'ai essayé la solution du dessus mais ca ne marche qu'en partie ! s'a n'affecte que les couleurs aux zone de texte et sa ne change po le mode disabled de l'objet.

Ben si (pour les couleurs)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 if (!input_a.enabled) { input_f.value = 0; input_f.enabled = false; input_a.enabled = true; input_a.style.background = "#00FF00"; input_f.style.background = "#FF0000"; BSsuppr(idInput_f); BSajoute(idInput_a); } else { input_f.enabled = true; input_a.enabled = false; input_a.style.background = "#FF0000"; input_f.style.background = "#00FF00"; BSsuppr(idInput_a); BSajoute(idInput_f); } }
Avec des couleurs bien criardes (pour se rendre compte), ca marche nickel. l'objet est effectivement pas disabled

25/07/2006, 15h57
lecail65

Oui pour les couleurs il n'y a pas de problème !

Ce que je ne comprend pas c'est que ds le formulaire sans tableau le "disabled" est pris en compte et que ds l'autre il ne marche pas !

c'est assez intriguant !
25/07/2006, 16h09
lecail65
en partie résolu !

en fait j'avais une erreur ds une ligne , j'avais oubli une côte :
Code:

1 2 <input type="checkbox" id="idactive" name="active" onclick="disableInput('ida','idf','this.checked')" class="libelle">Autre</td>
cela dit il me reste un soucis ! lorsque je coche la zone de texte devient enabled et la liste fonction devient elle disabled mais quand je décoche rien ne se produit !
25/07/2006, 16h11
guy777

j'suis en train d'essayer un truc et je me rend compte qu'en JS, pour un select, on le rend disabled par input_f.disabled = true (donc premiere soluce fausse !!!) et il faut eviter de desactiver le textfield dans le HTML (ca fout la m....), il vaut faire une fonction JS d'initialisation.

Ca y est !

en fait tu vas etre véner Guy777 car ct une erreur assez bete ! c'est vrai que la fonction peut etre refaite mais pour le moment elle convient !

le code javascript est bien celui-ci:
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 function disableInput(idInput_a, idInput_f, valeur) { // champs "autre" var input_a = document.getElementById(idInput_a); // champ "Fonction" var input_f = document.getElementById(idInput_f); if (valeur) { input_f.value = 0; input_f.disabled = true; input_a.disabled = false; input_a.style.background = "#FFF"; input_f.style.background = "#CCC"; } else { input_f.disabled = false; input_a.disabled = true; input_a.style.background = "#CCC"; input_f.style.background = "#FFF"; } }
on est obligé de donner comme parametre la valeur. ou peu etre que non mais c'est plus pratique ici.

et en fait il ne faut pas mettre de côte pour le dernier paramètre de la fonction disableInput.
Code:

1 2 3 onclick="disableInput('ida','idf',this.checked)"
donc pour le moment ca marche bien comme ca.

Merci Guy777 ! si j'ai un nouveau pb je m'adresserai a toi en priorité :D héhé !

oui véner car j'ai trouvé une minute après toi,
mea culpa j'ai raconté une connerie avec mon enabled qui est en fait bien un disabled et le disabled dans le HTML ne dérange absolument pas...
sinon vla ma soluce

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
<style type="text/css">
<!--
.marge { margin-left: 12px; margin-top: 2px;}
.titre { margin-left: 10px; margin-top: 2px; font-style:oblique;}
.libelle { margin-left: 20px; margin-top: 2px;}
-->
</style>
 
<script type="text/javascript">
<!-- Debut
 
// les fonctions
//--------------
 
// on souhaite changer la proprièté disabled des zones de textes
// fonction et fonction_a
 
function disableInput(idInput_a, idInput_f)
{
  // champs "autre"
  var input_a = document.getElementById(idInput_a);
  // champ "Fonction"
  var input_f = document.getElementById(idInput_f);
 
  if (input_a.disabled == true)
  {
    input_f.value = 0;
    input_f.disabled = true;
    input_a.disabled = false;
    input_a.style.background = "#FFF";
    input_f.style.background = "#CCC";
  }
  else
  {
    input_f.disabled = false;
    input_a.disabled = true;
    input_a.style.background = "#CCC";
    input_f.style.background = "#FFF";
  }
}
 
// fin du script -->
 
</script>
 
</head>
 
<body>
 
 
<!-- On met en place le formulaire -->
<form name="form">
<fieldset>
<legend></legend>
 
<table border=0 width=100%>
 
<!-- partie pour l'identite du contact -->
<tr>
    <td colspan=2 class="titre">Identification de la personne</td>
<tr>
<tr>
    <td><P class="libelle">Civilité *</p></td>
    <td><select id="civ" class="marge">
        <option selected value=0> - choix - </option>
        <option value=1> Md. </option>
        <option value=2> Mme. </option>
        <option value=3> M. </option>
        </select>
        </td>
<tr>
<tr>
    <td><p class="libelle">Nom *</p></td>
    <td><input type="text" value="" name="nom" class="marge"></td>
<tr>
<tr>
    <td><p class="libelle">Prénom *</p></td>
    <td><input type="text" value="" name="prenom" class="marge"></td>
<tr>
<tr>
    <td colspan=2><Hr></td>
<tr>
<!-- partie pour la fonction du contact -->
<tr>
    <td colspan=2 class="titre">Fonction de la personne</td>
<tr>
<tr>
    <td><P class="libelle">Fonction *</p></td>
    <td><select id="idf" class="marge">
        <option selected value=0> - choix - </option>
        <option value=1> Maire </option>
        <option value=2> Maire-Adjoint </option>
        <option value=3> Conseiller Régional </option>
        <option value=4> Conseiller Général </option>
        </select></td>
<tr>
<tr>
    <td><input type="checkbox" id="idactive" name="active" onclick="disableInput('ida','idf')" class="libelle">Autre</td>
    <td><input type="text" id="ida" name="a" disabled="true" style="BACKGROUND-COLOR:#CCC" class="marge"></td>
<tr>
<tr>
    <td colspan=2><Hr></td>
<tr>
<!-- partie pour les coordonnees du contact -->
<tr>
    <td colspan=2 class="titre">Coordonnées de la personne</td>
<tr>
<tr>
    <td><p class="libelle">Adresse *</p></td>
    <td><input type="text" value="" name="adresse" class="marge" size=50></td>
<tr>
<tr>
    <td><p class="libelle">Ville *</p></td>
    <td><input type="text" value="" name="ville" class="marge" size=30></td>
<tr>
<tr>
    <td><p class="libelle">Code postal *</p></td>
    <td><input type="text" value="" name="cp" class="marge" size=5></td>
<tr>
<tr>
    <td><p class="libelle">Portable </p></td>
    <td><input type="text" value="" name="portable" class="marge" size=14></td>
<tr>
<tr>
    <td><p class="libelle">Fixe </p></td>
    <td><input type="text" value="" name="fixe" class="marge" size=14></td>
<tr>
<tr>
    <td colspan=2><Hr></td>
<tr>
 
</fieldset>
</form>
 
</table>