getElementById () ne cible pas l'objet

Version imprimable

Bonjour,

J'ai un petit problème avec cette fonction, elle ne récupère pas mon élément.

voila le code de ma fonction
Code:

1 2 3 4 5 6 7 8 9 10 function Count(text, lon, textBox) { var maxlength = new Number(lon); if(document.getElementById(textBox).value.length > maxlength) { text.value = text.value.substring(0,maxlength); alert(" Only " + lon + " chars"); } }
J'appelle cette fonction lorsque l'utilisateur ajoute ou enlève un caractère dans un textbox. Je pense que le problème vient du fait que j'utilise la fonction dans un user control .ascx affiché sur une page .aspx. (je développe donc en C#)
Il faut peut etre changer le parametre "document" ?

Merci

05/06/2008, 10h54
tusssss

Je ne suis pas certain du value.length sur ton document.getElementById

Un document.getElementById(textBox).length devrait suffir non ?
05/06/2008, 10h58
Titi41

J'ai testé, et non. Ca ne change rien.
Mon erreur est "Object Required"

Ce code marche bien dans une page aspx simple. Je pense que c'est vraiment un problème avec le getelement
05/06/2008, 11h01
SpaceFrog

tu peux nous montrer le html de l'objet visé ???
il a bien un id ... la casse est respectée lors du passage de paramètre ?
il n'y a qu'un objet avec cet id sur la page ?

Bonjour,

Citation:

Envoyé par tusssss

Je ne suis pas certain du value.length sur ton document.getElementById

Un document.getElementById(textBox).length devrait suffir non ?

Non non : c'était bien ça (c'est la value qui est une string, pas l'objet lui-même).

Par contre :
Code:

1 2 3 4 5 6 7 8 9 10 function Count(text, lon, textBox) { var maxlength = new Number(lon); if(document.getElementById(textBox).value.length > maxlength) { text = text.substring(0,maxlength); alert(" Only " + lon + " chars"); } }
Une variable n'a pas de propriété value : elle représente elle-même la value ...

... et il est possible de trouver des noms de variables plus clairs et moins ambigües que "text" ;)

A+

Voila comment le l'appelle

Code:

1
2
3
4
5
6
7
8
9
10
11
            <tr>
                <td>
                    Comment Employee
                </td>
                <td>
                    <asp:TextBox ID="tbCommentEmployee" 
                        textmode="MultiLine" Rows="5" runat="server" 
                        onKeyUp="javascript:Count(this, 100,'tbCommentEmployee');" 
                    onChange="javascript:Count(this, 100,'tbCommentEmployee');"></asp:TextBox>
                </td>
            </tr>

Il n'y a biensur qu'un control avec cet ID. Je ne met pas tout ma page, elle fait plus de 250 lignes.

05/06/2008, 11h07
SpaceFrog

oui comme le souligne Ebzz .. il faudait que nous en sachions un peu plus sur les paramètres ???
05/06/2008, 11h08
Titi41

Les paramètres :
Text : Texte de la textbox
lon : nombre de caractère maximum
Textbox : id de ma textbox
05/06/2008, 11h11
E.Bzz

Citation:

Envoyé par SpaceFrog

oui comme le souligne Ebzz .. il faudait que nous en sachions un peu plus sur les paramètres ???

Je corrigeais juste l'utilisation de la variable qui était fausse (variable.value).

Ce n'était peut être que ça le problème ;)

A+
05/06/2008, 11h11
E.Bzz

@Titi41 > Tu as corrigé ça ?

A+

ben déja il y a un paramètre en trop ...

Code:

1
2
3
4
5
6
7
8
9
10
function Count( lon, textBox) 
    {
        var maxlength = new Number(lon);
        var text=document.getElementById(textBox).value;
        if(text.length > maxlength)
        {
                    document.getElementById(textBox).value = text.substring(0,maxlength);
                    alert(" Only " + lon + " chars");
        }
    }

pas besoin de passer l'id et le texte ...

Ensuite au niveau ergonomie imagine que le gars fasse une insertion en mileu de chaîne ???

05/06/2008, 11h23
Titi41

ca ne marche toujours pas.. Sinon, est-ce qu'il y a une meilleure fonction déjà existante ? Si ce n'est pas ergonomique.
05/06/2008, 11h25
E.Bzz

Citation:

Envoyé par Titi41

ca ne marche toujours pas..

Si les autres ont compris où tu en étais dans tes modif, ils sont forts :aie:

=> ton code actuel ??

A+

Oui, désolé :oops:

En fait, j'ai repris le code de SpaceFrog

Code:

1
2
3
4
5
6
7
8
9
10
function Count( lon, textBox) 
    {
        var maxlength = new Number(lon);
        var text=document.getElementById(textBox).value;
        if(text.length > maxlength)
        {
                    document.getElementById(textBox).value = text.substring(0,maxlength);
                    alert(" Only " + lon + " chars");
        }
    }

05/06/2008, 11h32
E.Bzz

OK !

Alors : résultat (à part que "ça marche pas") ?
Erreur ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript'>
function Verif(Obj,MaxL){
		var Texte=Obj.value;
       if(Texte.length > MaxL){
                    Obj.value = Texte.substring(0,MaxL);
                    alert(" Only " + MaxL + " chars");
        				}
        }
</script>
 
<title>Nouvelle page 1</title>
</head>
<body>
<input type='text' onkeyup="Verif(this,5)" value='test' />

Sinon sans javascript mais sans message d'alerte:

Code:

1
2
 
<input type='text' maxLength="5"  value='test' />

ou avec une alerte :

Code:

1
2
 
<input type='text' maxLength="5" onkeydown="if(this.value.length==this.maxLength){alert('Only '+this.maxLength+' chars')}" value='test' />

05/06/2008, 11h43
Titi41

Toujours le meme problème, objet non trouve sur la ligne du GetElementbyID.
Ensuite, Lenght is null
05/06/2008, 11h46
Titi41

Je prefererai rester avec des controls asp. Et avec les controls asp, si on ajoute le mode "MultiLine", il ne gère plus la proriété maxlength
05/06/2008, 11h47
SpaceFrog

titi tu as testé mon code ...
???

il tourne parfaitement chez moi ...
05/06/2008, 11h54
Titi41

Ca ne marche pas chez moi. Je pense vraiment que le problème vient du user control. Et il ne trouve pas ma text box.
la variable "document" fait référence à la page ?
Il n'est pas possible de faire référence au user control ?
05/06/2008, 12h02
SpaceFrog

tu peux nous mettre le html généré ??

afficher source .. copier / coller

Tu as pensé à modifier comme ceci ?

Code:

1
2
3
4
5
6
7
8
9
<script type='text/javascript'>
function MaxCount(Obj,MaxL){
		var Texte=Obj.value;
       if(Texte.length > MaxL){
                    Obj.value = Texte.substring(0,MaxL);
                    alert(" Only " + MaxL + " chars");
        				}
        }
</script>

Code:

1
2
3
4
5
<asp:TextBox ID="tbCommentEmployee" 
                        textmode="MultiLine" Rows="5" runat="server" 
                        onKeyUp="javascript:MaxCount(this,100);" 
                    onChange="javascript:MaxCount(this,100);"></asp:TextBox>
                </td>

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<%@ Control Language="C#" ClassName="Employee" AutoEventWireup="true" Src="~/Employee.ascx.cs"
    CodeBehind="Employee.ascx.cs" Inherits="CodeBehindEmployee" %>
 
<script runat="server">
 
    protected void tbCommentEmployee_TextChanged(object sender, EventArgs e)
    {
        if (tbCommentEmployee.Text.Length >= 100)
            Response.Write("Probleme");
 
    }
</script>
 
<script type='text/javascript'>
function MaxCount(Obj,MaxL){
		var Texte=Obj.value;
       if(Texte.length > MaxL){
                    Obj.value = Texte.substring(0,MaxL);
                    alert(" Only " + MaxL + " chars");
        				}
        }
</script>
 
        <table>
            <tr>
                <td>
                    Birthdate
                </td>
                <td>
                    <asp:TextBox ID="tbBirthdate" runat="server" tooltip="dd/mm/yyyy"></asp:TextBox>
                    <asp:ImageButton ID="ImageBirthdate" runat="server" 
                    onclick="ImageBirthdate_Click" src="Images/calendar.jpg" AlternateText="Show Calendar" Width="21px" Height="23px"
                    CausesValidation="False" />
                    <asp:CompareValidator id="checktbBirthdate" runat="server" ErrorMessage="Date format is 'dd/mm/yyyy'" ControlToValidate="tbBirthdate" Type="Date" Operator="DataTypeCheck" display="Dynamic"></asp:CompareValidator>
                    <asp:Calendar ID="CalendarBirthdate" runat="server"  Visible="false"
                        Style="position:absolute; left: 84px; top: 221px; height: 150px; width: 225px;" BackColor="White" 
                        BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" 
                        ForeColor="Black" NextPrevFormat="FullMonth" 
                        onselectionchanged="CalendarBirthdate_SelectionChanged">
                        <SelectedDayStyle BackColor="#333399" ForeColor="White" />
                        <TodayDayStyle BackColor="#CCCCCC" />
                        <OtherMonthDayStyle ForeColor="#999999" />
                        <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" 
                            VerticalAlign="Bottom" />
                        <DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
                        <TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" 
                            Font-Bold="True" Font-Size="12pt" ForeColor="#333399" />
                    </asp:Calendar>   
                </td>
            </tr>
            <tr>
                <td>
                    Nationality
                </td>
                <td>
                    <asp:DropDownList ID="ddlNationality" runat="server" DataTextField="Designation_Nationality" DataValueField="IDNationality"></asp:DropDownList>                                  
                    <asp:RequiredFieldValidator ID="checkNationality" runat="server" ErrorMessage="Please select a nationality" 
                        ControlToValidate="ddlNationality" InitialValue="Select the nationality" Display="Dynamic"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Address
                </td>
                <td>
                    <asp:TextBox ID="tbAddress" runat="server" MaxLength="50"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    ZipCode
                </td>
                <td>
                    <asp:TextBox ID="tbZipCode" runat="server"></asp:TextBox>
                    <asp:CompareValidator id="checkZipCode" runat="server" ErrorMessage="Required type is integer" ControlToValidate="tbZipCode" Type="Integer" Operator="DataTypeCheck" display="Dynamic"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td>
                    City
                </td>
                <td>
                    <asp:TextBox ID="tbCity" runat="server" MaxLength="30"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Country
                </td>
                <td>
                    <asp:DropDownList ID="ddlCountry" runat="server" MaxLength="30"></asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    Personal Phone
                </td>
                <td>
                    <asp:TextBox ID="tbPersonalPhone" runat="server"></asp:TextBox>
                    <asp:CompareValidator id="checkPersonalPhone" runat="server" ErrorMessage="Required type is integer" ControlToValidate="tbPersonalPhone" Type="Integer" Operator="DataTypeCheck" display="Dynamic"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Professional Phone
                </td>
                <td>
                    <asp:TextBox ID="tbProfessionalPhone" runat="server"></asp:TextBox>
                    <asp:CompareValidator id="checkProfessionalPhone" runat="server" ErrorMessage="Required type is integer" ControlToValidate="tbProfessionalPhone" Type="Integer" Operator="DataTypeCheck" display="Dynamic"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Personal Mobile
                </td>
                <td>
                    <asp:TextBox ID="tbPersonalMobile" runat="server"></asp:TextBox>
                    <asp:CompareValidator id="checkPersonalMobile" runat="server" ErrorMessage="Required type is integer" ControlToValidate="tbPersonalMobile" Type="Integer" Operator="DataTypeCheck" display="Dynamic"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Professional Mobile
                </td>
                <td>
                    <asp:TextBox ID="tbProfessionalMobile" runat="server"></asp:TextBox>
                    <asp:CompareValidator id="checkProfessionalMobile" runat="server" ErrorMessage="Required type is integer" ControlToValidate="tbProfessionalMobile" Type="Integer" Operator="DataTypeCheck" display="Dynamic"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Personal Mail
                </td>
                <td>
                    <asp:TextBox ID="tbPersonalMail" runat="server" MaxLength="50"></asp:TextBox>
                    <asp:RegularExpressionValidator id="checkPersonnalEmail" ControlToValidate="tbPersonalMail"
                        Text="Invalid email" 
                ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
                Runat="server" style = "position : relative" > </asp:RegularExpressionValidator>
             </td>
            </tr>
            <tr>
                <td>
                    Professional Mail
                </td>
                <td>
                    <asp:TextBox ID="tbProfessionalMail" runat="server" MaxLength="50"></asp:TextBox>
                    <asp:RegularExpressionValidator id="checkProfessionalEmail" ControlToValidate="tbProfessionalMail"
                        Text="Invalid email" 
                ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
                Runat="server" style = "position : relative" > </asp:RegularExpressionValidator>
             </td>
 
            </tr>
            <tr>
                <td>
                    Phone Extension
                </td>
                <td>
                    <asp:TextBox ID="tbPhoneExtension" runat="server"></asp:TextBox>
                    <asp:CompareValidator id="checkPhoneExtension" runat="server" ErrorMessage="Required type is integer" ControlToValidate="tbPhoneExtension" Type="Integer" Operator="DataTypeCheck" display="Dynamic"></asp:CompareValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Transportation Mode
                </td>
                <td>
                    <asp:ListBox ID="lbxTransportation" runat="server"></asp:ListBox>
                </td>
            </tr>
            <tr>
                <td>
                    Business Unit
                </td>
                <td>
                    <asp:DropDownList ID="ddlBusinessUnit" runat="server" DataTextField="DesignationBU" DataValueField="idBusinessUnit">
                    </asp:DropDownList>
                    <asp:RequiredFieldValidator ID="checkBusinessUnit" runat="server" ErrorMessage="Please select a business unit" 
                        ControlToValidate="ddlBusinessUnit" InitialValue="Select the business unit" Display="Dynamic"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Manager
                </td>
                <td>
                    <asp:DropDownList ID="ddlManager" runat="server">
                    </asp:DropDownList>
 
                </td>
            </tr>
            <tr>
                <td>
                    Manager RI
                </td>
                <td>
                    <asp:DropDownList ID="ddlManagerRI" runat="server">
                    </asp:DropDownList>
 
                </td>
            </tr>
            <tr>
                <td>
                    Manager RC
                </td>
                <td>
                    <asp:DropDownList ID="ddlManagerRC" runat="server">
                    </asp:DropDownList>
 
                </td>
            </tr>
            <tr>
                <td>
                    Contract Type
                </td>
                <td>
                    <asp:DropDownList ID="ddlContractType" runat="server" DataTextField="Type_contract" DataValueField="IDtype_contract">
                    </asp:DropDownList>
                    <asp:RequiredFieldValidator ID="checkContractType" runat="server" ErrorMessage="Please select a type of contract" 
                            ControlToValidate="ddlContractType" InitialValue="Select the type of contract" Display="Dynamic"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Code Gestoria
                </td>
                <td>
                    <asp:TextBox ID="tbCodeGestoria" runat="server"></asp:TextBox>
                    <asp:CompareValidator id="checkCodeGestoria" runat="server" ErrorMessage="Required type is integer" ControlToValidate="tbCodeGestoria" Type="Integer" Operator="DataTypeCheck" display="Dynamic"></asp:CompareValidator>
                    <asp:RequiredFieldValidator ID="requiredCodeGestoria" runat="server" ErrorMessage="Field Required" 
                        ControlToValidate="tbCodeGestoria" Display="Dynamic"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Start Date
                </td>
                <td>
                    <asp:TextBox ID="tbStartDate" runat="server" MaxLength="11" tooltip="dd/mm/yyyy"></asp:TextBox>
                    <asp:ImageButton ID="ImageCalendarStartDate" runat="server" 
                        onclick="ImageCalendarStartDate_Click" src="Images/calendar.jpg" AlternateText="Show Calendar" Width="21px" Height="23px"
                        CausesValidation="False" />
                    <asp:CompareValidator id="checkStartDate" runat="server" ErrorMessage="Date format is 'dd/mm/yyyy'" ControlToValidate="tbStartDate" Type="Date" Operator="DataTypeCheck" display="Dynamic"></asp:CompareValidator>
                    <asp:Calendar ID="CalendarStartDate" runat="server"  Visible="false"
 
 
                        Style="position:absolute; left: 172px; top: 563px; height: 150px; width: 225px;" BackColor="White" 
                        BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" 
                        ForeColor="Black" NextPrevFormat="FullMonth" 
                        onselectionchanged="CalendarStartDate_SelectionChanged">
                        <SelectedDayStyle BackColor="#333399" ForeColor="White" />
                        <TodayDayStyle BackColor="#CCCCCC" />
                        <OtherMonthDayStyle ForeColor="#999999" />
                        <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" 
                            VerticalAlign="Bottom" />
                        <DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
                        <TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" 
                            Font-Bold="True" Font-Size="12pt" ForeColor="#333399" />
                    </asp:Calendar>            
                </td>
            </tr>
            <tr>
                <td>
                    Comment Employee
                </td>
                <td>
                    <asp:TextBox ID="tbCommentEmployee" 
                        textmode="MultiLine" Rows="5" runat="server" 
                        onKeyUp="javascript:MaxCount('tbCommentEmployee',100);" 
                    onChange="javascript:MaxCount('tbCommentEmployee',100);"></asp:TextBox>
                </td>
            </tr>
        </table>