[A moitié Résolu] getElementById.value problème d'encoding et decoding sous UTF-8

Version imprimable

Bonjour à tous.

Bon voilà j'ai un truc bizarre qui se passe quand je récupère la valeur d'un input pour la mettre dans un autre input avant de soumettre un formulaire.

Tous les formulaires ont accept-charset="UTF-8"

Toutes les pages ont le meta tag

Code:

<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"/>

J'utilise simplement deux forumaires

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
<form accept-charset="UTF-8" id="participants-1" name="participants-1" method="post" onsubmit="return checkBeforeUpdate('1')" action="updatePartInfoServlet">
                      <input type="hidden" id="nonProfOrg1" value="0"/>
                      <input type="hidden" id="publicBody1" value="1"/>
                      <input type="hidden" id="researchOrg1" value="1"/>
                      <input type="hidden" id="highEducation1" value="0"/>
                      <input type="hidden" id="costModel1" value="SIMPLE"/>
 
                      <input type="hidden" id="partName1" value="&é&quot;'(§è!çà)"/>
                      <input type="hidden" id="Pemails1" value="stessy@gmail.com"/>
                      <input type="hidden" id="partID" name="partID" value="1"/>
                      <input type="hidden" id="partnerId" name="partnerId" value="167674"/>
                      <input type="hidden" id="clearPIC1" name="clearPIC1" value="0"/>
                      <input type="hidden" id="ori_pic_main1" name="ori_pic_main1" value="999999967"/>
                      <!--input type="hidden" id="ori_checkdigits" name="ori_checkdigits" value=""/-->
                      <input type="hidden" id="getPicOK1" name="getPicOK1" value="no"/>
                      <input type="hidden" id="samePic1" name="samePic1" value="yes"/>
 
                    <table border="0" summary="content" width="100%">
                      <tr>
						<td colspan="2" align="center">         
                          <div id="cost-model-part-status-1" style="background-color:rgb(255,255,224);position:relative; top:15px; padding:0 0 0 0; margin:0;border:1px solid #F87217;" align="center">
                            <div class="title" style="text-align:center; line-height:2.5em; position:relative; top:-10px; left:-55px; background-color:rgb(255,255,224); height:25px; width:190px; font-weight:bold; padding:0 10px 0 10px; border:1px solid #F87217;"><span class="h4p">Participant Identification Code</span></div>
                              <div class="button" style="text-align:center; line-height:2.5em; position:absolute; top:-10px; right:10px; background-color:rgb(255,255,224); height:25px; width:auto; font-weight:bold; padding:0 10px 0 10px; border:1px solid #F87217;"><a href="#" onClick="openHelp('')"><span class="h3p">need info?</span></a></div>
                                    <table width="95%" border="0">
                                      <tr>
 
                                        <td align="left"><span class="h3p">PIC</span></td>
                        	        <td width="35%" align="left"><input type="text" id="pic_main1" name="pic_main1" value="999999967" size="9" maxlength="9"><!--input type="text" class="smallbox" id="checkdigits" name="checkdigits" value="" size="2" maxlength="2"--></td>
                                      </tr>
				     <tr>
				<td align="left"><input type="button" value="Clear PIC Info" onclick="clearPic('1')"></td>   
				<td width="%30" align="left"><input type="button" ID="getPic1" value="Get PIC Info" onclick="newPageAjaxReq('picProposal?action=picAJAX','1')"></td>
                                      </tr>
                                    </table>
                                  </div>
 
                              </td>
                          <td align="center" rowspan="3">
                          <div id="add-part-status-info-1" style="background-color:rgb(255,255,224);position:relative; top:25px; padding:0 0 0 0; margin:0;border:1px solid #F87217;">
 
                              <div class="title" style="text-align:center; line-height:2.5em; position:relative; top:-10px; left:-50px; background-color:rgb(255,255,224); height:25px; width:180px; font-weight:bold; padding:0 10px 0 10px; border:1px solid #F87217;"><span class="h4p">Status of your organisation</span>
                              </div>
                              <div class="button" style="text-align:center; line-height:2.5em; position:absolute; top:-10px; right:10px; background-color:rgb(255,255,224); height:25px; width:auto; font-weight:bold; padding:0 10px 0 10px; border:1px solid #F87217;"><a href="#" onClick="openHelp('statusOfOrg.html')"><span class="h3p">need info?</span></a>
                              </div>
 
                                    <table width="100%">
                                      <tr>
                                        <td width="70%" align="right" style="font-weight:lighter">Non Profit Organisation</td>
                                        <td width="30%" align="left">
                                          <input type="radio" name="npo" id="npo1yes" value="1"/>yes
                                          <input type="radio" name="npo" id="npo1no" value="0"/> no
                                        </td>
                                      </tr>
                                      <tr>
 
                                        <td width="70%"align="right">Public Body</td>
                                        <td width="30%"align="left">
                                          <input type="radio" name="pb" id="pb1yes" value="1"/>yes
                                          <input type="radio" name="pb" id="pb1no" value="0"/> no
                                        </td>
                                      </tr>
                                      <tr>
                                        <td width="70%"align="right">Research Organisation</td>
 
                                        <td width="30%" align="left">
                                          <input type="radio" name="ro" id="ro1yes" value="1"/>yes
                                          <input type="radio" name="ro"id="ro1no" value="0"/> no
                                        </td>
                                      </tr>
                                      <tr>
                                        <td width="70%" align="right">Higher, secondary education establishment</td>
                                        <td width="30%" align="left">
                                          <input type="radio" name="he" id="he1yes" value="1"/>yes
                                          <input type="radio" name="he" id="he1no" value="0"/> no
                                        </td>
 
                                      </tr>
                                    </table> 
                                  </div>
 
                        </td>
 
                      </tr>
			<tr><td>&nbsp;</td></tr><tr>
			<td align="center"><span class="h3p">Organisation Short Name</span>
                        </td>
 
                        <td align="center"><input type="text" style="border-bottom:1px solid;"
                                name="shortOrgName" id="shortOrgName1"
                                value="&é&quot;'(§è!çà)" maxLength="18"/></td>
			</tr>
                      <tr>
                        <td align="center"><span class="h3p">Participant E-mail(s)</span>
                        </td>
                        <td align="center"><input type="text" name="partEmail" id="partEmail1" value="stessy@gmail.com"/></td>
                      </tr>
                      <tr>
 
                        <td colspan="2" align="center">
                          <div id="cost-model-part-status-1" style="background-color:rgb(255,255,224);position:relative; top:5px; padding:0 0 0 0; margin:0;border:1px solid #F87217;" align="center">
                            <div class="title" style="text-align:center; line-height:2.5em; position:relative; top:-5px; left:-55px; background-color:rgb(255,255,224); height:25px; width:190px; font-weight:bold; padding:0 10px 0 10px; border:1px solid #F87217;"><span class="h4p">Method of determining Indirect Costs</span></div>
                              <div class="button" style="text-align:center; line-height:2.5em; position:absolute; top:-5px; right:10px; background-color:rgb(255,255,224); height:25px; width:auto; font-weight:bold; padding:0 10px 0 10px; border:1px solid #F87217;"><a href="#" onClick="openHelp('indirectCostsInfo.html')"><span class="h3p">need info?</span></a></div>
                                    <table width="95%" border="0">
                                      <tr>
                                        <td width="50%" align="right"></td>
                                        <td width="50%" align="left">
 
                                          <select name="costModel" id="cm1">
                                            <option value=""></option>
                                            <option value="REAL">Real Indirect Cost</option>
                                            <option value="SIMPLE">Simplified Method</option>
                                            <option value="FLAT_TRANS">Special Transition Flat Rate</option>
                                            <option value="FLAT_STD">Standard Flat Rate</option>
                                            <option value="LUMP">Lump sum (for ICPC)</option>
 
                                          </select>
                                        </td>
                                      </tr>
                                    </table>
                                  </div>
                        </td>
                      </tr>
                      <tr>
                        <td height="30" align="left"></td>
 
                        <td height="30" align="left"></td>
                        <td height="30" align="center"><input name="add" type="submit" value="Update Participant Information"/></td>
                      </tr>
                    </table>
                    </form>

Code:

1
2
3
4
5
6
<form name="pf" accept-charset="UTF-8" action="picConfirmation.jsp" method="post" >
	<input type="hidden" name="partId" value=""/>
	<input type="hidden" name="pic" value=""/>
   <input type="hidden" name="orgNamePf" value=""/>
  <input type="hidden" name="orgEmailPf" value=""/>
</form>

Ensuite le javascript suivant (le code n'est pas complet, c'est juste la partie qui récupère la valeur pour la mettre dans un autre field)

Code:

1
2
document.pf.orgNamePf.value = document.getElementById('shortOrgName1').value;
            document.pf.orgEmailPf.value = document.getElementById('partEmail1').value;

Voici comme exemple ce que j'ai quand je rentre les caractères suivant:

&é"'(§è!çà)

Et voilà ce que j'ai dans le deuxième field après la copie:

&Ã©"\'(Â§Ã¨!Ã§Ã )

Si vous souhaitez tenter l'expérience vous même vous pouvez aller ici:

https://www.epss-fp7.org/epsspic/login.jsp

username: RTG67H3LSJ
password: azerty123

Aller dans "Proposal Setup"
Cliquer sur "edit details" pour le premier participant
Où vous verrez la valeur: 999999967 , remplacer là par 000000195
Cliquez sur le bouton "get PIC info"
Cliquez sur "accept"
Et voyez le beau résultat que cela me sort.

Alors que tout est en UTF-8, cela ne fonctionne pas.
On dirait que le javascript encode les caractères spéciaux sans les décoder.

A moins que cela ne soit autre chose, mais alors je ne sais pas quoi.

Si quelqu'un a une idée lumineuse, ou pourrait m'orienter pour effectuer des tests plus approfondis, cela me serait d'un grand secours.

D'avance merci pour vos réponses.

27/03/2008, 09h54
SpaceFrog

essaye de mettre un charset aussi dsn la balise script ?
27/03/2008, 10h03
Stessy

Citation:

Envoyé par SpaceFrog

essaye de mettre un charset aussi dsn la balise script ?

Salut spafy,

le problème n'est pas résolu même en indiquant un charset dans la balise script

Merci
27/03/2008, 10h06
SpaceFrog

ton js qui bascule les valeurs il est ou ? àprès soumission du form ?

le souci se situe entre le client et le seveur ?

si oui il faut mettre le utf 8 dans le header transmis par le serveur ...
27/03/2008, 10h16
le_chomeur
Bizare , car effectivement il fait une simple copie de champs a champs ...
sinon essaye d'encoder tes caractère en unicode ou , lors de la récupération , récupère le code ascii de ton premier champs via la méthode :

Code:

String.charCodeAt();

Puis au moment de la copie utilise :
Code:

1 2 String.fromCharCode();
à tester :oops:
27/03/2008, 10h18
Stessy

Juste avant que je soumette le form, les valeurs sont copiées d'un field vers l'autre.

Je ne sais pas si le problème vient entre le client et le serveur.

Mais j'en doute car partout j'utilise la même méthode.

C'est à dire charset utf-8, caractères spéciaux et envoi des données entre le client et le serveur (servlets).

La seule différence entre les autres pages et celle-ci est que je ne copie pas des données d'un field à l'autre avant soumission du formulaire.

D'où je suppose que le problème vient du fait que je copie les données avant de soumettre.

Pour en revenir à la fameuse page qui me pose problème.
Si tu te connectes, que tu vas sur "proposal setup", tu cliques sur "edit details" pour le premier participant, et ensuite tu cliques sur "update participant information" les informations sont bien transmises et bien encodées. Le bouton "get PIC info" et "update participant information" ne soumettent pas le même formulaire.
"update participant information" ne copie pas avant de soumettre alors que "get PIC info" lui copie avant la soumission.

Voilà.

Merci pour ton aide.
27/03/2008, 10h24
SpaceFrog

essaye de virer

Code:

accept-charset="UTF-8"

tu bascules les valeurs,
puis dasn le onsubmit après avoir basculé tes valeurs tu remets

Code:

document.forms[0].acceptCharset="UTF-8"
27/03/2008, 10h34
Stessy

Citation:

Envoyé par SpaceFrog

essaye de virer

Code:

accept-charset="UTF-8"

tu bascules les valeurs,
puis dasn le onsubmit après avoir basculé tes valeurs tu remets

Code:

document.forms[0].acceptCharset="UTF-8"

Ca marche pas spafy :cry:

Bon je vais tester la solution de le_chomeur.

Je vous tiens au courant

Je suis désesperé :cry:

Rien ne marche :piou:

Pas possible ce problème.
Incompréhensible, j'ai jamais rencontré ce genre de problème avant.

Je suis sur que j'ai mon nez dessus.

Vous n'auriez pas d'autres exemples que je pourrais tester.

Ah oui j'avais oublié de vous dire, j'ai effectué un test hier. J'avais trouve un petit script qui marchait à moitié, et certains caractères étaient bien encodé et décodé mais d'autres non.

Voici le script:

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
var Utf8 = {
 
    // public method for url encoding
    encode : function (string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";
 
        for (var n = 0; n < string.length; n++) {
 
            var c = string.charCodeAt(n);
 
            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
 
        }
 
        return utftext;
    },
 
    // public method for url decoding
    decode : function (utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;
 
        while ( i < utftext.length ) {
 
            c = utftext.charCodeAt(i);
 
            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            }
            else if((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i+1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            }
            else {
                c2 = utftext.charCodeAt(i+1);
                c3 = utftext.charCodeAt(i+2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }
 
        }
 
        return string;
    }
 
}

le caractère 'ç' était bien passé entre les différentes page. mais pour d'autres cela ne fonctionnait pas.

Je ne sais pas si cela peut vous être d'une grande utilité.
Mais on ne sais jamais.

En tout cas merci pour votre aide.

27/03/2008, 11h02
SpaceFrog

Et si tu vires complètement les charset ?

Ce que je propose est complètement idiot, mais quand on a ce genre de bug bizarre, parfois des solutions idiotes marchent :)

Fonctions de ma réserve :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function HTMLEncode(str) {
    var d = HTMLEncode.decoder; d.innerHTML = "";
    try { str=str.replace(/\n/g,"[BR]"); } catch (ex) {}
    d.appendChild(document.createTextNode(str));
    return d.innerHTML.replace(/\[BR\]/g,"<br/>");
}
HTMLEncode.decoder = document.createElement("DIV");
HTMLEncode.regexp  = /\<[^\s\>]*(\s*[^\s\>\=]*(\=('|")([^\'"]*)('|")|=[^\s\>=]*)?)*\>/g;

function HTMLDecode(str) {
    var d = HTMLEncode.decoder;
    if (typeof(d.innerText)!="undefined") {
        d.innerHTML = str.replace(/<br\s*>/g,"[BR]");
        return d.innerText.replace(/\[BR\]/g,"\n");
    } else {
        d.innerHTML = str.replace(/<br\s*>/g,"[BR]").replace(HTMLEncode.regexp, "");
        return d.firstChild.data.replace(/[BR]/g,"\n");
    }
}

Essaie :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function copyValue1(fromInp, toInp) {
  toInp.value=unescape(escape(fromInp.value));
}
 
function copyValue2(fromInp, toInp) {
  toInp.setAttribute('value', fromInp.value));
}
 
function copyValue3(fromInp, toInp) {
  toInp.getAttributeNode('value').value=fromInp.value;
}
 
function copyValue4(fromInp, toInp) {
  toInp.value=HTMLDecode(HTMLEncode(fromInp.value));
}

Si aucune ne marche, tu peux essayer des variantes des précédentes en utilisant ta fonction UTF8.encode

27/03/2008, 11h06
Stessy

Citation:

Envoyé par SpaceFrog

Et si tu vires complètement les charset ?

Même problème.

Tous les charset sont enlevés.

Courage on va y arriver :mrgreen:
27/03/2008, 11h13
FremyCompany

Dans copyValue3, tu peux essyer les propriétés suivantes :
- data
- nodeValue
- value
27/03/2008, 11h18
le_chomeur

la solution qui fonctionnait a moitié correspondait a celle que j'avais proposé ^^
Essaye de voir les valeurs que fremy a proposé :)
27/03/2008, 11h23
Stessy

Citation:

Envoyé par FremyCompany

Dans copyValue3, tu peux essyer les propriétés suivantes :
- data
- nodeValue
- value

Ben je vois pas trop ce que vient faire val3 ici . :koi:

Sinon sa valeur est bonne.
C'est la valeur du PIC.
27/03/2008, 11h25
le_chomeur

c'est pour vérifier que les données copiées en mémoire sont toujours bonnes ;)

j'ai transformé les champs hidden en text et les caractères sont conservé sous ie7!

Code:

1
2
3
4
request.setCharacterEncoding("UTF-8"); dans les servlets
 
 
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %> ou <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> dans les JSP

27/03/2008, 11h27
FremyCompany

en gros, ce sont toutes des idées qui me sont venues à l'esprit pour corriger le problème.

Toutes les fonctions copyValueXXX (postée plus haut) font théoriquement la même chose, mais leurs résultats peuvent varier du fait de la méthode utilisée.

La troisième que je propose utilse getAttributeNode. Ensuite, je change la valeur de l'attribut avec .value=xxx, mais il existe d'autres propriétés similaires pour les noeuds HTML, qui sont nodeValue et data (même si data n'est valide que pour les commentaires et doctype, je crois)
27/03/2008, 11h30
FremyCompany
D'ailleurs j'ai une autre idée, c'est de combiner lecture et écriture par attribut :
Code:

1 2 3 function copyValue4(fromInp, toInp) { toInp.getAttributeNode('value').value=fromInp.getAttributeNode('value').value; }
Là tu a plein de possibilités de combinaisons

Citation:
Envoyé par Matthieu2000
j'ai transformé les champs hidden en text et les caractères sont conservé sous ie7!
Code:

1 2 3 4 request.setCharacterEncoding("UTF-8"); dans les servlets <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %> ou <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> dans les JSP
C'est normal.
je viens juste de modifier le code et j'ai hardcodé la valeur du hidden avant de soumettre le formulaire.

Et c'est là que je commence à me poser de sérieuses questions.
Car en retour les caractères sont différents. :koi:

Bon faut que je revoie le code en entier de la deuxième jsp car c'est vraiment bizarre cette affaire.

Ceci marche chez moi :

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
<html>
    <head>
        <title>xxx</title>
        <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"/>
        <script>
            function $(id) { return document.getElementById(id); }
 
            function copyValue(fromInp, toInp) {
                alert('FORM:'+fromInp.value);
                toInp.getAttributeNode('value').value=fromInp.getAttributeNode('value').value;
                alert('TO:'+toInp.value);
            }
 
            function steps() {
                copyValue($('i1'),$('i2'));
                copyValue($('i2'),$('i3'));
                copyValue($('i3'),$('i4'));
            }
 
        </script>
    </head>
    <body>
        <form accept-charset="UTF-8" method="POST" action="UTF8-Encoding in text files.html">
            <input type="text" id="i1" />
            <input type="hidden" id="i2" />
        </form>
        <form accept-charset="UTF-8" method="POST" action="UTF8-Encoding in text files.html">
            <input type="hidden" id="i3" />
            <input type="text" id="i4" />
        </form>
        <input type="button" value="Copier" onclick="steps()" />
    </body>
</html>

EDIT: Chez moi, même toInp.value=fromInp.value marche
Cela veut dire que tes données sont mal encodées depuis le début...

27/03/2008, 13h28
Stessy

Bon c'est pas joli joli mais j'ai trouvé un workaround.

Via Ajax je passe la valeur du champ dans l'URL je met ce paramètre en session.
Ensuite comme je reviens à cette page je vérifie la session et si il trouve ce paramètre, il prend la valeur de ce paramètre pour la mettre dans le deuxième champ. Ensuite je fais un remove de l'attribut au niveau de la session. Ainsi le problème est résolu.

C'est le seul moyen que j'ai trouvé pour l'instant. :?

Faudrait quand même que j'investigue au niveau de l'encodage.
c'est pas normal que cela fonctionne partout sauf à cet endroit.

Si vous avez une idée lumineuse à laquelle vous n'auriez pas pensé elle est la bienvenue.

Merci beaucoup à tout le monde pour votre aide.