Balise hidden dans Formulaire Html

Balise hidden dans Formulaire Html - HTML/CSS - Programmation

Marsh Posté le 29-12-2010 à 02:04:09    

Bonjour,
je me tourne vers vous car j'ai un petit problème avec un site sur lequel je bosse en ce moment.
L'une des pages contient une image de carte sur laquelle l'utilisateur peut cliquer. Lors du clic un petit drapeau s'affiche.
Si l'utilisateur clique de nouveau les coordonnées du drapeau sont modifiés et l'icône (flag) est déplacé.
J'ai écrit ces quelques lignes en utilisant la bibliothèque mootools (http://mootools.net/docs/core)
 

Code :
  1. .....
  2. <img src="carteFrance.gif" id="map" />
  3. <img src="flag.png" id="flag"  style="visibility:hidden"/>
  4. <SCRIPT language="Javascript">
  5. var map = $('map');
  6. var flag = $('flag');
  7. map.addEvent('click', function(event){
  8. flag.setStyle("position", "absolute" );
  9. flag.setStyle("top", event.client.y);
  10. flag.setStyle("left", event.client.x);
  11. flag.setStyle('visibility','visible');
  12. });
  13. </SCRIPT>
  14. .....


ce code fonctionne très bien mais j'aimerai maintenant aller plus loin. je voudrai inclure des champs hidden dans un formulaire pour envoyer les coordonnées du drapeau au serveur quand l'utilisateur clique sur le bouton submit

Code :
  1. <input type="hidden" name="coordX" value="COORDONNEES DE FLAG EN X">
  2. <input type="hidden" name="coordY" value="COORDONNEES DE FLAG EN Y">


 
Est ce que vous voyez comment je peux récupérer les coordonnées de flag. Il faudrait que le value des balise hidden soit modifié à chaque clic de l'utilisateur. Je suis obligé de passer par Ajax pour faire ça sans recharger la page, non?
Merci de votre aide :)

Reply

Marsh Posté le 29-12-2010 à 02:04:09   

Reply

Marsh Posté le 29-12-2010 à 09:25:46    

Déjà un code propre serait pas mal (même si ça ne répond pas à la question, on est d'accord :o ).

 
Code :
  1. .....
  2. <!-- attribut alt obligatoire pour les images -->
  3. <img src="carteFrance.gif" id="map" alt="" />      
  4. <img src="flag.png" id="flag"  style="visibility:hidden" alt="" />
  5.  
  6. <!-- tag en minuscule, et on utilise l'attribut "type", pas "language" -->
  7. <script type="text/javascript">
  8.  
  9. var map = $('map');
  10. var flag = $('flag');
  11.  
  12. map.addEvent('click', function(event) {
  13.    flag.setStyle("position", "absolute" );
  14.    flag.setStyle("top", event.client.y);
  15.    flag.setStyle("left", event.client.x);
  16.    flag.setStyle('visibility','visible');
  17. });
  18.  
  19. </script>
  20.  
  21. .....


Message édité par Dj YeLL le 29-12-2010 à 09:26:38

---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 29-12-2010 à 12:27:19    

Merci Mr le validateur XHTML... Mais ce n'est pas l'objet du post.
Néanmoins je prends note de ces quelques remarques.

Reply

Marsh Posté le 29-12-2010 à 12:30:32    

Je sais que ce n'est pas l'objet du post, je l'ai d'ailleurs moi même précis. Mais ça ne coûte rien de donner des conseils :)


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 29-12-2010 à 14:59:22    

Je pratique pas le framework mootools mais ça doit être un truc du style
 
$('coordX').set('value', "COORDONNEES DE FLAG EN X" );
$('coordY').set('value', "COORDONNEES DE FLAG EN Y" );
 
à mettre dans l'event

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed