Retourner variable js dans champs texte d'un formulaire

Eléphanteau du PHP | 49 Messages

08 juin 2007, 11:37

Bonjour,

Je bosse sur une page qui permet de positionner des éléments sur une page.
J'arrive à récupérer la position de l'élément (x ou y), mais j'aimerai qu'elle s'affiche sur la page dans un champ texte de formulaire, en temps "réel", que ce champ texte s'actualise automatique dès qu'il la variable change.

En mettant ceci, je retourne la variable, mais elle ne s'actualise pas :

Code : Tout sélectionner

<script type="text/javascript"> document.write('<input type="text" name="x" size="20" value="' +x+ '"></input>') </script>
Pourriez-vous m'aider à faire cela ?

Merci d'avance

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

08 juin 2007, 16:47

En fait, dans le code ci dessus, tu définies ton champ et sa valeur en dur. Pour la modifier dynamiquement, il faut la modifier en javascript :
<input type="text" name="x" size="20" value="">

<script type="text/javascript"> 
function updateX (valeur) {
  document.nom_du_formulaire.x.value = valeur;
}
</script> 
Ainsi il suffit d'appeller la fonction updateX() en lui passant la nouvelle valeur de X pour que le champ soit mis à jour. A toi de voir ensuite à quel moment cette fonction doit être appellée. Cela peut être lors d'un événement (un clic, une touche, déplacement de la souris ...) ou même à interval régulier.. bref à toi de voir :)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

Eléphanteau du PHP | 49 Messages

11 juin 2007, 11:39

Bonjour,

Merci pour ta réponse, mais je n'arrive (pour l'instant) pas à la mettre en oeuvre.
Voici, donc le résultat de la modification :
<form id="form1" name="form1" method="post" action="">

	<div id="boxDrag" class="box">
		<p>Ma box pour test</p>
	</div>	
<script language="JavaScript">
var x =document.getElementById("boxDrag").offsetTop;
 var y =document.getElementById("boxDrag").offsetLeft;

function updateX (valeur) {
  document.form1.testX.value = valeur;
}
</script>
         <input type="text" name="testX" value="" style="width: 40px;" onKeyPress="return updateX(x);">
 </form>
Hélàs le champ reste toujours vide !

Une idée ?

Merci

Eléphanteau du PHP | 10 Messages

12 juin 2007, 15:09

Salut, c’est un peut difficile de t’aider, car ton code ne colle pas. Si je te suis tu veux récupérer la position d’un élément au déclenchement de l’événement onkeypress et ainsi les assigners comme valeur à un champ text c’est ça ?

Eléphanteau du PHP | 49 Messages

12 juin 2007, 16:39

J'ai fini par y arriver, il suffisait de mettre la fonction afficherCoordonnees() dans un monmousemove() dans un div.

Par exemple :

Code : Tout sélectionner

<script language="JavaScript"> function afficherCoordonnees() { document.getElementById('y').value = document.getElementById("lot1").offsetTop; document.getElementById('x').value = document.getElementById("lot1").offsetLeft; } //--> </script><input type="hidden" id="y" name="y" "/> <input type="hidden" id="x" name="x" /> <div class="plan" onmousemove="afficherCoordonnees();"> Le contenu... </div>
J'ai contourner le problème en fait...