Discussion :

[pomgnon]

bonjour,
j'ai sur mon site un formulaire permettant le redimensionnement d'image, avec un aperçu en direct.
Seulement se formulaire ne fonctionne que si les balises <form></form> sont absentes. En effet, lorseque j'ajoute ces balises, les fonctions appellées par un onKeyup ne fonctionnent pas...
voici le code xhtml

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
<form action="adminimage.php" method="post">
<fieldset class="action_image">
<legend>redimensionner une image</legend>
 
indiquez les nouvelles dimensions de l'image, en pixels:<br />
<input type="text" size="4"value="400" id="x" onKeyUp="javascript:x()" />
x<input type="text" size="4" name="pixel_y" value="150" id="y" onKeyUp="javascript:y()" />
pixels<br />
ou en pourcentages:<br />
<input type="button" value="-" onclick="javascript:pourcent_x_bouton(-5)" />
<input type="text" size="3" value="100" name="pourcent_x" id="pourcent_x" onKeyUp="javascript:pourcent_x(1)" />
<input type="button" value="+" onclick="javascript:pourcent_x_bouton(5)" />%x
<input type="button" value="-" onclick="javascript:pourcent_y_bouton(-5)" />
<input type="text" size="3" value="100" name="pourcent_y" id="pourcent_y" onKeyUp="javascript:pourcent_y()" />
<input type="button" value="+" onclick="javascript:pourcent_y_bouton(5)" />%
<br />
<label>conserver les proportions: <input type="checkbox" checked="checked" onclick="javascript:proportion()" />
</label><br />
 
<input type="submit" name="redimension" value="redimensionner" /><br />
<img src="css/image/ban.gif" alt="blind-cana.gif" height="150" width="400" id="image" />
</fieldset>
</form>

et voici une des fonctions appelées par onKeyup

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
function x()
{
   var x = document.getElementById("x").value;
   var x = Math.abs(parseInt(x));
   document.getElementById("x").value = x;
   //calcul du pourcent
   var pourcent = Math.round(x/(largeur_ini/100));
   document.getElementById("pourcent_x").value = pourcent;
   //affectation de x a l'image
   valeur_x = x+"";
   document.getElementById("image").setAttribute("width", valeur_x);
 
   if (conserver_proportions)
   {
        document.getElementById("pourcent_y").value = pourcent;
        var y = Math.round(hauteur_ini/100*pourcent);
        document.getElementById("y").value = y;
        valeur_y = y+"";
        document.getElementById("image").setAttribute("height", valeur_y);
   }
}

Vous pouvez tester ce code:

voici la page sans la balise <form>
et celle avec

[Swoög]

Salut !
Alors deux/trois petites choses pour commencer, en XHTML, les noms des attributs et des balises sont en minuscule ET sensibles à la casse...

Ensuite, pour les attributs évenementiels (on**) la mention "javascript:" n'est pas nécessaire...

Enfin, évite de donner à tes fonctions des noms qui sont aussi utilisés en tant qu'id...
(Sinon ce bug est vraiment très étrange !)

[pomgnon]

merci pour les infos, donc si j'ai bien comprit,
je devrait ecrire onkeyup="pourcent_x()" au lieu de onKeyUp="javascript:pourcent_x()".
enfin cela ne résoud pas mon probleme.

Si ça peu vous aider, voila le message d'erreur que je reçoit lorsque je tente d'appeler une fonction grace à onkeyup:

nom_de_la_fonction is not a function.

[Swoög]

Tu as oublié mon troisième conseil : je pense qu'il y a une collision entre les noms de fonctions et les id

[pomgnon]

j'ai changer le nom de mes fonctions, ça ne fonctionne toujours pas mais l'erreur est passée de

ma_fonction is not a function

à

ma_fonction is not defined

...

[Swoög]

tu peux mettre à jour les deux pages HTML dont tu as donné le lien l'autre fois ?

[pomgnon]

c'est fait.

[Swoög]

Tiens... sur cette page, mon message d'erreur, c'est document.forms[0].getElementByID n'est pas une fonction (normal, puisque c'est document.getElementById)

[pomgnon]

c'est réglé, le probleme était bien le nom de la fonction, mais j'avais betement oublier d'actualiser la page contenant le code js...

merci pour ton aide!