onkeyup dans un formulaire
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:
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:
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:
