Répondre à la discussion
Affichage des résultats 1 à 2 sur 2

Javascript : Intégrer une variable javascript dans un champ de formulaire html



  1. #1
    squal31

    Javascript : Intégrer une variable javascript dans un champ de formulaire html


    ------

    Bonjour à tous,
    Etant très mauvais en javascript, je n'arrive pas a faire une opération simple :

    Intégrer une valeur du fonction javascript dans un champ input d'un formulaire.

    En image :
    En suivant voici mon code source qui me permet de récupérer la latitude/longitude d'une adresse modifiable en déplaçant le curseur.
    Les coordonnées gps s'affichent dans le tableau, mais je voudrais les récupérer également dans un champ input du formulaire (champ input qui seront par la suite invisibles).
    Impossible, je n'y arrive pas ...

    Si certains d'entres vous ont la solution je suis preneur ...
    Merci d'avance,

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
          	<title>Latitude et longitude avec Google Maps</title>
        
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp" type="text/javascript"></script>
        
    <script type="text/javascript">
    
     function load() {
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            var center = new GLatLng(43.6046, 1.4442);
            map.setCenter(center, 12);
            geocoder = new GClientGeocoder();
            var marker = new GMarker(center, {draggable: true});  
            map.addOverlay(marker);
            document.getElementById("lat").innerHTML = center.lat().toFixed(7);
            document.getElementById("lng").innerHTML = center.lng().toFixed(7);
    
    	  GEvent.addListener(marker, "dragend", function() {
           var point = marker.getPoint();
    	      map.panTo(point);
           document.getElementById("lat").innerHTML = point.lat().toFixed(7);
           document.getElementById("lng").innerHTML = point.lng().toFixed(7);
    	   
            });
    
    
    	 GEvent.addListener(map, "moveend", function() {
    		  map.clearOverlays();
        var center = map.getCenter();
    		  var marker = new GMarker(center, {draggable: true});
    		  map.addOverlay(marker);
    		  document.getElementById("lat").innerHTML = center.lat().toFixed(7);
    	   document.getElementById("lng").innerHTML = center.lng().toFixed(7);
    
    
    	 GEvent.addListener(marker, "dragend", function() {
          var point =marker.getPoint();
    	     map.panTo(point);
          document.getElementById("lat").innerHTML = point.lat().toFixed(7);
    	     document.getElementById("lng").innerHTML = point.lng().toFixed(7);
    
            });
     
            });
    
          }
        }
    
    	   function showAddress(address) {
    	   var map = new GMap2(document.getElementById("map"));
           map.addControl(new GSmallMapControl());
           map.addControl(new GMapTypeControl());
           if (geocoder) {
            geocoder.getLatLng(
              address,
              function(point) {
                if (!point) {
                  alert(address + " not found");
                } else {
    		  document.getElementById("lat").innerHTML = point.lat().toFixed(7);
    	   document.getElementById("lng").innerHTML = point.lng().toFixed(7);
    		 map.clearOverlays()
    			map.setCenter(point, 14);
       var marker = new GMarker(point, {draggable: true});  
    		 map.addOverlay(marker);
    
    		GEvent.addListener(marker, "dragend", function() {
          var pt = marker.getPoint();
    	     map.panTo(pt);
          document.getElementById("lat").innerHTML = pt.lat().toFixed(7);
    	     document.getElementById("lng").innerHTML = pt.lng().toFixed(7);
    		 
    		 
            });
    
    
    	 GEvent.addListener(map, "moveend", function() {
    		  map.clearOverlays();
        var center = map.getCenter();
    		  var marker = new GMarker(center, {draggable: true});
    		  map.addOverlay(marker);
    		  document.getElementById("lat").innerHTML = center.lat().toFixed(7);
    	   document.getElementById("lng").innerHTML = center.lng().toFixed(7);
    
    	 GEvent.addListener(marker, "dragend", function() {
         var pt = marker.getPoint();
    	    map.panTo(pt);
        document.getElementById("lat").innerHTML = pt.lat().toFixed(7);
    	   document.getElementById("lng").innerHTML = pt.lng().toFixed(7);
    	   
            });
     
            });
    
                }
              }
            );
          }
        }
    </script>
    
    
    </head>
      
    <body onload="load()" onunload="GUnload()" >
    
    <p>
       <b>Indiquer le lieu du spot</b>
    </p>
    <p>
    	1. Indiquer une adresse connue (exemple : Toulouse)<br />
        2. Zoomer et se déplacer sur la carte<br /> 
        3. Affiner la position du spot en déplacant le curseur : pour cela cliquer sur le curseur puis le déplacer
    </p>
    
      
    <form name="formulaire" action="#" onsubmit="showAddress(this.address.value); return false">
        <p>        
        <input type="submit" value="Chercher autour de" />
        <input type="text" size="60" name="address" value="Toulouse" />
        </p>
    
     
      <table  bgcolor="#FFFFCC" width="300">
        
        <tr>
          <td><b>Latitude</b></td>
          <td><b>Longitude</b></td>
        </tr>
        
        <tr>
          <td id="lat"></td>
          <td id="lng"></td>
        </tr>
        
      </table>
      
      <br /><br />
      
      Latitude : <input type="text" name="lat" id="lat" size="30" value="" />
      <br />
      Longitude : <input type="text" name="lng" id="lng" size="30" value="" />
      
    </form>
      
      <br /><br />
    
    <div align="center" id="map" style="width: 900px; height: 450px"><br/></div>
      
    
    </body>
    </html>

    -----
    Ce n'est pas parce que les choses sont difficiles que nous n'osons pas, c'est parce ...

  2. #2
    squal31

    Re : Javascript : Intégrer une variable javascript dans un champ de formulaire html

    Re,

    Après plusieurs heures de recherches et de tests voici une solution (certainement pas la meilleure mais elle fonctionne) :
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
          	<title>Latitude et longitude avec Google Maps</title>
        
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp" type="text/javascript"></script>
        
    <script type="text/javascript">
    
    function load() {
    	if (GBrowserIsCompatible()) {
        	
    		var map = new GMap2(document.getElementById("map"));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            var center = new GLatLng(43.6046, 1.4442);
            map.setCenter(center, 12);
            geocoder = new GClientGeocoder();
            var marker = new GMarker(center, {draggable: true});  
            map.addOverlay(marker);
            document.getElementById("lat").innerHTML = center.lat().toFixed(5);
            document.getElementById("lng").innerHTML = center.lng().toFixed(5);
    		document.getElementById("latitude").value = center.lat().toFixed(5);
    		document.getElementById("longitude").value = center.lng().toFixed(5);
    
    	  	GEvent.addListener(marker, "dragend", function() {
           		var point = marker.getPoint();
    	      	map.panTo(point);
           		document.getElementById("lat").innerHTML = point.lat().toFixed(5);
           		document.getElementById("lng").innerHTML = point.lng().toFixed(5);
    			document.getElementById("latitude").value = point.lat().toFixed(5);
    			document.getElementById("longitude").value = point.lng().toFixed(5);
    	   	});
    
    		GEvent.addListener(map, "moveend", function() {
    			map.clearOverlays();
        		var center = map.getCenter();
    		  	var marker = new GMarker(center, {draggable: true});
    		  	map.addOverlay(marker);
    		  	document.getElementById("lat").innerHTML = center.lat().toFixed(5);
    	   		document.getElementById("lng").innerHTML = center.lng().toFixed(5);
    			document.getElementById("latitude").value = center.lat().toFixed(5);
    			document.getElementById("longitude").value = center.lng().toFixed(5);
    
    			GEvent.addListener(marker, "dragend", function() {
          			var point =marker.getPoint();
    	     		map.panTo(point);
          			document.getElementById("lat").innerHTML = point.lat().toFixed(5);
    	     		document.getElementById("lng").innerHTML = point.lng().toFixed(5);
    				document.getElementById("latitude").value = point.lat().toFixed(5);
    				document.getElementById("longitude").value = point.lng().toFixed(5);
    			});
     
            });
    
    	}
    }
    
    function showAddress(address) {
    	var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        if (geocoder) {
        	geocoder.getLatLng(
            address,
            function(point) {
            	if (!point) {
                  	alert(address + " not found");
                } 
    			else {
    		 		document.getElementById("lat").innerHTML = point.lat().toFixed(5);
    	   			document.getElementById("lng").innerHTML = point.lng().toFixed(5);
    				document.getElementById("latitude").value = point.lat().toFixed(5);
    				document.getElementById("longitude").value = point.lng().toFixed(5);
    		 		map.clearOverlays()
    				map.setCenter(point, 14);
       				var marker = new GMarker(point, {draggable: true});  
    		 		map.addOverlay(marker);
    
    				GEvent.addListener(marker, "dragend", function() {
    					var pt = marker.getPoint();
    					map.panTo(pt);
    					document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
    					document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
    					document.getElementById("latitude").value = pt.lat().toFixed(5);
    					document.getElementById("longitude").value = pt.lng().toFixed(5);
    				});
    
    				GEvent.addListener(map, "moveend", function() {
    					map.clearOverlays();
    					var center = map.getCenter();
    					var marker = new GMarker(center, {draggable: true});
    					map.addOverlay(marker);
    					document.getElementById("lat").innerHTML = center.lat().toFixed(5);
    					document.getElementById("lng").innerHTML = center.lng().toFixed(5);
    					document.getElementById("latitude").value = center.lat().toFixed(5);
    					document.getElementById("longitude").value = center.lng().toFixed(5);
    
    					GEvent.addListener(marker, "dragend", function() {
    						var pt = marker.getPoint();
    						map.panTo(pt);
    						document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
    						document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
    						document.getElementById("latitude").value = pt.lat().toFixed(5);
    						document.getElementById("longitude").value = pt.lng().toFixed(5);
    	   				});
     
    				});
    
    			}
    		});
    	}
    }
    </script>
    
    
    </head>
      
    <body onload="load()" onunload="GUnload()" >
    
    <p>
       <b>Indiquer le lieu du spot</b>
    </p>
    <p>
    	1. Indiquer une adresse connue (exemple : Toulouse)<br />
        2. Zoomer et se déplacer sur la carte<br /> 
        3. Affiner la position du spot en déplacant le curseur : pour cela cliquer sur le curseur puis le déplacer
    </p>
    
      
    <form name="formulaire" action="#" onsubmit="showAddress(this.address.value); return false">
        <p>        
        <input type="submit" value="Chercher autour de" />
        <input type="text" size="60" name="address" value="Toulouse" />
        </p>
    
     
      <table  bgcolor="#FFFFCC" width="300">
        
        <tr>
          <td><b>Latitude</b></td>
          <td><b>Longitude</b></td>
        </tr>
        
        <tr>
          <td id="lat"></td>
          <td id="lng"></td>
        </tr>
        
      </table>
      
      <br /><br />
      
      Latitude : <input type="text" name="latitude" id="latitude" size="30" value=''/>
      <br />
      Longitude : <input type="text" name="longitude" id="longitude" size="30" value=''/>
      
    </form>
      
    <br /><br />
    
    <div align="center" id="map" style="width: 900px; height: 450px"></div>
      
    
    </body>
    </html>
    Ce n'est pas parce que les choses sont difficiles que nous n'osons pas, c'est parce ...

Discussions similaires

  1. Site de rencontre HTML + CSS + Javascript
    Par clemjuan dans le forum Programmation et langages, Algorithmique
    Réponses: 6
    Dernier message: 18/04/2013, 14h46
  2. CSS + JavaScript ; Changer la couleur des champs d'un formulaire
    Par zoup1 dans le forum Logiciel - Software - Open Source
    Réponses: 14
    Dernier message: 05/07/2011, 15h17
  3. code HTML/javascript de facebook pour un site
    Par attori90 dans le forum Internet - Réseau - Sécurité générale
    Réponses: 2
    Dernier message: 18/02/2011, 16h17
  4. javascript : inserer du html dans un noeud ?
    Par guigui-x dans le forum Logiciel - Software - Open Source
    Réponses: 0
    Dernier message: 17/05/2007, 12h00
  5. [javascript] rapeller une variable
    Par zetajanus dans le forum Internet - Réseau - Sécurité générale
    Réponses: 0
    Dernier message: 10/03/2005, 14h48