Autocomplete dans un formulaire

**triistaan** · 03/09/2018, 20h40

Bonsoir,

Je me suis lancé dans la création d'un site web et j'en arrive à la fin. Cependant, je me retrouves bloqué face à un petit détail néanmoins essentiel :

Dans un formulaire de demande de devis, je demande notamment l'adresse du client, je voudrais ainsi obtenir une liste déroulante à la manière de google. Après plusieurs recherches j'ai trouvé ce qu'il me fallait, j'ai réalisé quelques essais sur un fichier html "simple", pas de problème.

Cependant, lorsque je décide de l'intégrer à mon site, il ne réagit plus. En fait, tout se passe bien si je le place en début de mon index.php mais si je le mets dans ma balise <form>, cela ne fonctionne plus...

Voici le code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" name="adresse" id="adresse"/>

et le JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script>
 
  var autocomplete;
 
  function initAutocomplete() {
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('adresse')),
        {types: ['geocode']});
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=123456789&libraries=places&callback=initAutocomplete"async defer></script>

Je vous remercie d'avance pour vos réponses.

**NoSmoking** · 07/09/2018, 18h42

Bonjour,
à priori il n'y a aucune raison que cela ne fonctionne pas.
Pourrais-tu nous mettre un code exemple qui reproduit ton soucis ?

**triistaan** · 07/09/2018, 20h35

Bonsoir, merci pour cette première réponse.

Je viens de simplifier au mieux mon code afin que vous puissiez vous rendre compte du problème. Il faut donc cliquer sur "Demande de devis" pour afficher le formulaire qui est masqué de base. On se retrouve alors avec les deux champs visible, le premier en dehors du formulaire fonctionne et le deuxième qui est dans le formulaire ne fonctionne pas. Je vous laisse regarder :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML>
<html>
 
 
<body>
 
    <!--Mainmenu-area-->
            <nav>
                <ul>
                    <li><a onclick="toggle_div(this,'DemandeDevis');" style=color:black;>Demande de DEVIS</a></li>
                </ul>
            </nav>
 
 
 <!-- Le JS qui ne nous interesse pas ici... -->
 <script type="text/javascript">
 function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
   var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id
   if(div.style.display=="none") { // Si le div est masqué...
     div.style.display = "block"; // ... on l'affiche...
   } else { // S'il est visible...
     div.style.display = "none"; // ... on le masque...
   }
 }
</script>
 
 
 <!-- Le champs de recherche qui fonctionne -->
        <input id="pac-input" type="text" placeholder="Enter a location">
 
    <script>
      function initMap() {
        var input = document.getElementById('pac-input');
        var autocomplete = new google.maps.places.Autocomplete(input);}
    </script>
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsPVRDxbM58DrEUpuPLvCiyGBt6u2G4EA&libraries=places&callback=initMap" async defer></script>
 
 
            <div id="DemandeDevis" style="display:none;">
                <form>
                    <fieldset>
                        <!-- Le champs de recherche qui ne fonctionne pas -->
                        <input id="pac-input" type="text" placeholder="Enter a location">
                            <script>
                                function initMap() {
                                    var input = document.getElementById('pac-input');
                                    var autocomplete = new google.maps.places.Autocomplete(input);}
                            </script>
                            <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsPVRDxbM58DrEUpuPLvCiyGBt6u2G4EA&libraries=places&callback=initMap" async defer></script>
                    </fieldset>
                </form>
            </div>
 
    <!--Mainmenu-area/-->
 
</body>
 
</html>

**ProgElecT** · 07/09/2018, 22h54

Salut
Ligne 29 et 44, un id ce doit d'être unique.

**ProgElecT** · 08/09/2018, 08h51

Salut (Re)

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
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<script>
                        function initMap() {
                                var input = document.getElementById('pac-input');
                                var autocomplete = new google.maps.places.Autocomplete(input);
                                var input2 = document.getElementById('pac-input2');
                                var autocomplete2 = new google.maps.places.Autocomplete(input2);
                        }
                                <!-- Le JS qui ne nous interesse pas ici... -->
                        function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
                                var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id
                                if(div.style.display=="none") { // Si le div est masqué...
                                        div.style.display = "block"; // ... on l'affiche...
                                        } else { // S'il est visible...
                                        div.style.display = "none"; // ... on le masque...
                                }
                        }
                </script>
	</head>
 
	<body>
    <!--Mainmenu-area-->
		<nav>
			<ul>
				<li><a onclick="toggle_div(this,'DemandeDevis');" style=color:black;>Demande de DEVIS</a></li>
			</ul>
		</nav>
		<!-- Le champs de recherche qui fonctionne -->
		<input id="pac-input" type="text" placeholder="Enter a location">
 
		<div id="DemandeDevis" style="display:none;">
			<form>
				<fieldset>
					<!-- Le champs de recherche qui ne fonctionne pas -->
					<input id="pac-input2" type="text" placeholder="Enter a location">
				</fieldset>
			</form>
		</div>
		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsPVRDxbM58DrEUpuPLvCiyGBt6u2G4EA&libraries=places&callback=initMap" async defer></script>
	</body>
 
</html>

Une variante, sans utilisation de des ids

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
			function initMap() {
				var input = document.querySelectorAll('input[placeholder]'); // sélection des inputs ayant pour attribut placeholder
				var autocomplete = new google.maps.places.Autocomplete(input[0]);
				autocomplete.push(new google.maps.places.Autocomplete(input[1]));
			}

**triistaan** · 08/09/2018, 22h49

Merci pour votre réponse, en effet le problème venait de là pour ce code "réduit" même si en rélaité je n'utilise pas les deux champs donc je n'étais pas confronter à ce problème au final.

Malheureusement, j'ai toujours le même problème une fois remis sur mon site. Après de nombreux essais, j'ai découvert qu'en enlevant mon css c'est à dire en enlevant cette ligne dans mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="style.css">

Alors à ce moment le champs recherche fonctionne. Si je remets le CSS, cela ne fonctionne plus. Étrange mais il doit y avoir quelque chose qui bloque, avez vous des idées ?

Autocomplete dans un formulaire [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager