IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Transformer un span en input


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2016
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2016
    Messages : 10
    Points : 9
    Points
    9
    Par défaut Transformer un span en input
    Bonjour à tous,
    je tente d’insérer un span dans un input. (depuis bien 1 semaine ^^)
    je m'explique :
    à partir d'un Script, je récupère les valeurs des coordonnées d'une adresse.
    j'arrive à récupérer, lorsque je clique sur le bouton "localiser", ces coordonnées (latitude et longitude) dans mon HTML via des "span"
    Cependant, je voudrais récupérer ces valeurs dans un "input"
    J'ai tenté de jouer avec la "valeur" de l' "input" mais sans succès...
    Avez vous des idées ?
    Voici une partie de mon formulaire

    Code html : 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
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
        <tr>
                           <td>Adresse</td>
                           <td>   <input type="text" name="adresse_principale" id="searchTextField" <?php echo 'value ="'.$adresse_principale.'"'; ?> placeholder="adresse principale" /> </td>
     
                         </tr>
     
                          <tr>
                           <td>latitude</td>
                           <td>
                           <td> <input type="text" name="lat" id="lat"  value="<?php echo $lng ?>" /></td>
                           </td>
                          </tr>
     
                          <tr>
                           <td>longitude</td>
                           <td> <input type="text" name="lng" id="lng"  value="<?php echo $lng ?>" /></td>
                          </tr>
     
     
     
                       </tbody>
     
                     </table>
    </div>
     
     
     
     <ul class="actions">
                           <li><input type="submit" value="Mettre à jour" class="special" /></li>
                            <input type="button"  value="Localiser sur Google Map" onclick="TrouverAdresse();"/>
                                               </ul>
     
               </form>

    Voilà le script où je récupère les coordonnées
    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
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <script type="text/javascript">
    var geocoder;
    var map;
    // initialisation de la carte Google Map de départ
    function initialiserCarte() {
      geocoder = new google.maps.Geocoder();
      // Ici j'ai mis la latitude et longitude du vieux Port de Marseille pour centrer la carte de départ
      var latlng = new google.maps.LatLng(43.295309,5.374457);
      var mapOptions = {
        zoom      : 14,
        center    : latlng,
        mapTypeId : google.maps.MapTypeId.ROADMAP
      }
      // map-canvas est le conteneur HTML de la carte Google Map
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }
     
    function TrouverAdresse() {
      // Récupération de l'adresse tapée dans le formulaire
      var adresse = document.getElementById('searchTextField').value;
      geocoder.geocode( { 'address': adresse}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          // Récupération des coordonnées GPS du lieu tapé dans le formulaire
     
        latitude = results[0].geometry.location.lat();
        longitude = results[0].geometry.location.lng();
     
     
     
     
          // Affichage des coordonnées dans le <span>
          document.getElementById('lat').innerHTML=latitude;
          document.getElementById('lng').innerHTML=longitude;
     
     
     
          // Création du marqueur du lieu (épingle)
          var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
          });
        } else {
          alert('Adresse introuvable: ' + status);
        }
      });
    }
    // Lancement de la construction de la carte google map
    google.maps.event.addDomListener(window, 'load', initialiserCarte);
    </script>

    voilà ce que ça donne :



    Nom : Capture.PNG
Affichages : 173
Taille : 71,0 Ko

    Merci pour votre aide !

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Quel rapport avec PHP ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
          // Affichage des coordonnées dans les <input>
          document.getElementById('lat').value=latitude;
          document.getElementById('lng').value=longitude;


    N.B. discussion déplacée.

Discussions similaires

  1. Alignement span sur input button
    Par predalpha dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 05/06/2014, 16h42
  2. Transformer un Label en Input
    Par CaRTmaN68 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 11/07/2010, 01h42
  3. [C# 2.0] Empecher de transformer le label en span
    Par Khrysby dans le forum ASP.NET
    Réponses: 2
    Dernier message: 15/09/2006, 15h40
  4. Comment transformer un input en select?
    Par franculo_caoulene dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 28/12/2005, 10h32
  5. Liste ordonnée et transformation en INPUT
    Par pmithrandir dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 08/07/2005, 11h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo