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

**Stessy** · 27/03/2008, 09h44

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 :

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

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

J'utilise simplement deux forumaires

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

et

Code :

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

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 :

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

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.

**SpaceFrog** · 27/03/2008, 09h54

essaye de mettre un charset aussi dsn la balise script ?

**Stessy** · 27/03/2008, 10h03

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

**SpaceFrog** · 27/03/2008, 10h06

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

**le_chomeur** · 27/03/2008, 10h16

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 :

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

String.charCodeAt();

Puis au moment de la copie utilise :

Code :

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

1
2
 
String.fromCharCode();

à tester

**Stessy** · 27/03/2008, 10h18

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.

**SpaceFrog** · 27/03/2008, 10h24

essaye de virer

Code :

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

accept-charset="UTF-8"

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

Code :

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

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

**Stessy** · 27/03/2008, 10h34

Envoyé par SpaceFrog

essaye de virer

Code :

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

accept-charset="UTF-8"

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

Code :

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

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

Ca marche pas spafy

Bon je vais tester la solution de le_chomeur.

Je vous tiens au courant

**Stessy** · 27/03/2008, 10h52

Je suis désesperé

Rien ne marche

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 :

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

**SpaceFrog** · 27/03/2008, 11h02

Et si tu vires complètement les charset ?

**FremyCompany** · 27/03/2008, 11h05

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

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

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

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

**Stessy** · 27/03/2008, 11h06

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

**FremyCompany** · 27/03/2008, 11h13

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

**le_chomeur** · 27/03/2008, 11h18

la solution qui fonctionnait a moitié correspondait a celle que j'avais proposé ^^
Essaye de voir les valeurs que fremy a proposé

**Stessy** · 27/03/2008, 11h23

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 .

Sinon sa valeur est bonne.
C'est la valeur du PIC.

**le_chomeur** · 27/03/2008, 11h25

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

**Matthieu2000** · 27/03/2008, 11h26

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

Code :

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

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

**FremyCompany** · 27/03/2008, 11h27

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)

**FremyCompany** · 27/03/2008, 11h30

D'ailleurs j'ai une autre idée, c'est de combiner lecture et écriture par attribut :

Code :

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

1
2
3
function copyValue4(fromInp, toInp) {
   toInp.getAttributeNode('value').value=fromInp.getAttributeNode('value').value;
}

Là tu a plein de possibilités de combinaisons

**Stessy** · 27/03/2008, 11h37

Envoyé par Matthieu2000

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

Code :

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

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.

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

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

JavaScript

Discussions similaires

Partager

Partager