Afficher liste communes ayant un code postal donné

**laurentSc** · 13/04/2024, 21h46

Bonsoir ASCIIDEFOND,
quand j'avais posé au post 11 une question sur la récupération des valeurs, tu as répondu au post 13 avec un code javascript (qui manipule le DOM). OK, par contre, je ne vois pas comment je peux l'utiliser. Si ça me mettait la valeur dans une variable PHP, là je crois que je saurais faire, mais là...Pourrais-tu m'aider ?

**CosmoKnacki** · 14/04/2024, 00h12

Envoyé par NoSmoking

Pourquoi pas simplement ^\d{5}$ ?

C'est ce que j'avais proposé au départ (et qui d'ailleurs revient à ce que tu avais proposé ç-a-d Number(value) && value.length === 5), mais l'autre pattern élimine un peu plus d'impossibilités avant de soumettre le code postal à l'API qui fera le filtrage final.

Je me demande aussi si plutôt que de passer par l'API, il ne serait pas mieux de stocker tout ça dans une base de données (qu'il faudra veiller à tenir à jour, c'est le point faible comparé à l'API).

Envoyé par LaurentSc

Quand j'étais petit (y a un certain temps), le jeu en voiture était de donner le nom du département des voitures croisées.

Oui, moi aussi je jouais à ça, mais j'étais nul.

**ASCIIDEFOND** · 14/04/2024, 09h14

Envoyé par laurentSc

Bonsoir ASCIIDEFOND,
quand j'avais posé au post 11 une question sur la récupération des valeurs, tu as répondu au post 13 avec un code javascript (qui manipule le DOM). OK, par contre, je ne vois pas comment je peux l'utiliser. Si ça me mettait la valeur dans une variable PHP, là je crois que je saurais faire, mais là...Pourrais-tu m'aider ?

Salut LaurentSc,
Désolé de ne pas te répondre plus tôt car je suis encore sur le coup pour une solution de récupération de la commune sélectionnée via le Php.

**laurentSc** · 14/04/2024, 17h58

Envoyé par ASCIIDEFOND

Salut LaurentSc,
Désolé de ne pas te répondre plus tôt car je suis encore sur le coup pour une solution de récupération de la commune sélectionnée via le Php.

Pas de souci. Bien sûr, je reste intéressé.

**ASCIIDEFOND** · 15/04/2024, 11h08

Salut laurentSc,

Pour info, ici on sort un peu du domaine JavaScript pour du Php.
Voici une solution pour récupérer en Php la valeur de l'option d'une balise <select>. Il il y surement une autre alternative, mais là je ne suis pas assez compétent.

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
60
61
62
63
64
<!-- index.php -->
<?php
$codepostal = '';
$communeselect = '';
 
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['CP'])) {
        $codepostal = $_POST['CP'];
    }
 
    if (isset($_POST['communeselect'])) {
        $communeselect = $_POST['communeselect'];
    }
}
?>
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" />
</head>
 
<body>
    <div class="tabulation">
        <form name="formCP" method="POST" action="">
            <label id="labelselect">Entrer votre Code Postal: </label>
            <input type="number" name="CP" class="inputsearch" id="codepostalcommune" placeholder="Code Postal" maxlength="50" size="50" value="<?php echo $codepostal ?>" />
            <button id="recherche" name="recherche">Rechercher</button>
            <label id="labelselect">Sélectionner votre commune: </label>
            <select name="listecommunes">
 
                <?php
                if (preg_match('/^(?:0[1-9]|[1-8]\d|9[0-8])\d{3}+$/', $codepostal)) {
                    $rest_api_url = 'https://geo.api.gouv.fr/communes?codePostal=' . $codepostal;
                    $json_data = file_get_contents($rest_api_url);
                    $response_data = json_decode($json_data);
                    echo ('<option selected="true" disabled="disabled">- Choisir une commune -</option>');
                    $i = 0;
 
                    foreach ($response_data as $user) {
                        $valeur = $user->nom;
                        echo ("<option value=" . $i . ">" . $valeur . "</option>");
                        $i += 1;
                    }
                } else {
                    echo ('<option selected="true" disabled="disabled">- Pas de commune -</option>');
                }
                ?>
            </select>
            <input type="hidden" name="communeselect" />
        </form>
 
        <div class="footer">
            <p style="color:aliceblue; margin-left: 20px; font-size: 3em; display: inline;"><?php echo $communeselect ?></p>
        </div>
    </div>
 
    <script src="script2.js"></script>
</body>
 
</html>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
const listecommunes = document.getElementsByName("listecommunes")[0],
  form = document.getElementsByName("formCP")[0],
  communeselect = document.getElementsByName("communeselect")[0]
 
listecommunes.addEventListener("change", function () {
  if (listecommunes.options[listecommunes.selectedIndex].value !="") {
    communeselect.value = listecommunes.options[listecommunes.selectedIndex].text
    form.submit()
  }
})

**laurentSc** · 15/04/2024, 18h28

Envoyé par ASCIIDEFOND

Pour info, ici on sort un peu du domaine JavaScript pour du Php.

On est d'accord, mais comme la solution fait appel aux 2 compétences, je savais pas où mettre ma question.
Je reviendrais vers toi quand j'y verrais plus clair (ta solution fonctionne mais j'ai du mal à l'intégrer au reste de mon code)

**NoSmoking** · 16/04/2024, 16h37

Là il me semble que l'on est « out-off » toute logique, l'« autocomplétion » est à faire côté client et lorsque les données sont validées par l’utilisateur on les envoie au serveur, qui en fait bon usage, par soumission classique ou via Ajax, et il est donc inutile de trouver une interrogation à l'API côté seveur !

Quelque chose m'aurait-il échappé dans le besoin ?

**laurentSc** · 16/04/2024, 21h36

Bonsoir,

à mon avis, NoSmoking, tu te trompes de discussion vu que ton intervention n'a rien à voir avec le sujet...

Je disais au post 26 que j'avais du mal à intégrer la solution de ASCIIDEFOND. Au début, je partais de mon code et j'essayais d'y intégrer celui de ASCIIDEFOND. Comme rien à faire, je suis parti du sien et y ai rajouté le mien. Succès

Je l'ai mis sur un hébergement gratuit : https://dasch.go.yj.fr/indexsimple3.php

indexsimple3.php :

Code php :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<?php
$codepostal = '';
$communeselect = '';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['CP'])) {
        $codepostal = $_POST['CP'];
    }
 
    if (isset($_POST['communeselect'])) {
        $communeselect = $_POST['communeselect'];
    }
}
?>
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style2.css" />
</head>
 
<body>
<div>
    <form name="formCP" method="POST" action="">
        <legend><span style="color: red;">*</span>type du logement :</legend>
        <div>
            <input type="radio" id="maison" name="m_a" value="maison" <?= ($_POST['m_a'] ?? '') === 'maison' ? ' checked' : 'checked' ?>  />
            <label for="maison">maison</label>
        </div>
 
        <div>
            <input type="radio" id="appartement" name="m_a" value="appartement" <?= ($_POST['m_a'] ?? '') === 'appartement' ? ' checked' : '' ?> />
            <label for="appartement">appartement</label>
        </div><br/>
 
        <legend><span style="color: red;">*</span>Nature de la transaction :</legend>
        <div>
            <input type="radio" id="vente" name="transaction" value="vente" <?= ($_POST['transaction'] ?? '') === 'vente' ? ' checked' : '' ?> />
            <label for="vente">vente</label>
        </div>
 
        <div>
            <input type="radio" id="location" name="transaction" value="location" <?= ($_POST['transaction'] ?? '') === 'location' ? ' checked' : '' ?> />
            <label for="location">location</label>
        </div><br/>
 
        <label for="annee_construction"> <span style="color: red;">*</span><span>Année de construction</span> :<br/></label>
        <select id="annee_construction" name="annee_construction">
            <?php $i = ["avant_49","49_97","apres_97"];
            for ($j=0;$j<3;$j++) {
                echo '<option value="'.$i[$j].'" '.(($_POST['annee_construction'] ?? '') === $i[$j] ? ' selected' : '').">".str_replace('_',' ',$i[$j])." </option>";
            }?>
 
        </select><br/><br/>
 
        <legend><span style="color: red;">*</span>Utilisation du gaz :</legend>
 
        <div>
            <input type="radio" id="oui" name="gaz" value="oui" <?= ($_POST['gaz'] ?? '') === 'oui' ? ' checked' : '' ?> />
            <label for="oui">oui</label>
        </div>
 
        <div>
            <input type="radio" id="non" name="gaz" value="non" <?= ($_POST['gaz'] ?? '') === 'non' ? ' checked' : '' ?> />
            <label for="non">non</label>
        </div><br/>
 
        <label for="nb_pieces"> <span style="color: red;">*</span><span> Nombre de pièces</span> :<br/></label>
        <input type="number" id="nb_pieces" name="nb_pieces"  value="<?= $_POST['nb_pieces'] ?? "0" ?>" /><br/><br/>
 
        <label id="labelselect">Entrer votre Code Postal: </label>
        <input type="number" name="CP" class="inputsearch" id="codepostalcommune" placeholder="Code Postal" maxlength="50" size="50" value="<?= $_POST['CP'] ?? '00000'?>"/>
        <button id="recherche" name="recherche">Rechercher</button>
        <label id="labelselect">Sélectionner votre commune: </label>
        <select name="listecommunes">
            <?php
            if (preg_match('/^(?:0[1-9]|[1-8]\d|9[0-8])\d{3}+$/', $codepostal)) {
                $rest_api_url = 'https://geo.api.gouv.fr/communes?codePostal=' . $codepostal;
                $json_data = file_get_contents($rest_api_url);
                $response_data = json_decode($json_data);
                echo ('<option selected="true" disabled="disabled">- Choisir une commune -</option>');
                $i = 0;
 
                foreach ($response_data as $user) {
                    $valeur = $user->nom;
                    echo '<option value="'.$i.'" '.(($_POST['listecommunes'] ?? '') === $i ? ' selected' : '').">".$valeur." </option>";
                    $i += 1;
                }
            } else {
                echo ('<option selected="true" disabled="disabled">- Pas de commune -</option>');
            }
            ?>
        </select>
        <input type="hidden" name="communeselect" /><br/><br/>
        <input type="submit" name="calc_prix" value="Envoyer">
    </form>
 
    <div class="footer">
        <p style="color:aliceblue; margin-left: 20px; font-size: 3em; display: inline;"><?php //echo $communeselect ?></p>
    </div>
</div>
<div>
    <?php
    if (isset($_POST['calc_prix'])) {
        $nb_diags = 3;
        if
        ((isset($_POST['transaction'])) && ($_POST['transaction'] == "vente"))
            $nb_diags += 2;
        else
            $nb_diags += 1;
 
        switch ($_POST['annee_construction']) {
            case "avant_49" :
                $nb_diags += 2;
                break;
            case "49_97" :
                $nb_diags += 1;
                break;
            default:break;
        }
 
        if ((isset($_POST['gaz'])) && ($_POST['gaz']=="oui"))
            $nb_diags += 1;
        /*
         * Biviers, Correnc, Domène, Gières, Grenoble, La Tronche, Le Versoud (idem Domène), Meylan, Montbonnot St Martin (idem Biviers), Murianette (idem Domène), Poisat, Revel (idem Domène), saint Ismier (idem Biviers), saint jean le vieux (idem Domène), saint Martin d'Hères, saint Martin d'Uriage, saint Martin le Vinoux, saint Nazaire les Eymes (idem Biviers), Seyssinet Pariset, Venon (idem Gières), Villard Bonnot (21 communes)
         */
        $arr_cp_termites=[38330, 38700, 38420, 38610, 38000, 38700, 38240, 38320, 38400, 38410, 38950, 38170, 38190];
 
        $price_base = ((isset($_POST['m_a'])) && ($_POST['m_a'] == "maison")) ? 110 : 95;
        $coef_diag = ((isset($_POST['m_a'])) && ($_POST['m_a'] == "maison")) ? 30 : 25;
 
        switch ($_POST['nb_pieces']) {
            case 1:
                $price = $price_base + $nb_diags * $coef_diag;
                break;
 
            case 2:
                $price = $price_base + 5 + $nb_diags * ($coef_diag + 5);
                break;
 
            case 3:
                $price = $price_base + 10 + $nb_diags * ($coef_diag + 10);
                break;
 
            case 4:
                $price = $price_base + 15 + $nb_diags * ($coef_diag + 15);
                break;
 
            case 5:
                $price = $price_base + 20 + $nb_diags * ($coef_diag + 20);
                break;
 
            default:
                $price = $price_base + 25 + $nb_diags * ($coef_diag + 25);
                break;
        }
 
        $err="Le nombre de pièces doit être strictement positif";
        if (($nb_diags<=0) || ($_POST['nb_pieces']<=0))
            echo $err;
        else echo "Le prix est ".$price."<br/>";
    }
    ?>
</div>
 
 
 
<script src="script5.js"></script>
</body>
 
</html>

style2.css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
:root {
    --primary: #3b8bed;
    --text: #333;
}
 
body {
    padding: 0;
    margin: 0;
    background:var(--primary);
}

script5.js : exactement le script donné par ASCIIDEFOND

Etant parfaitement satisfait, je mets en résolu.

**NoSmoking** · 17/04/2024, 18h57

à mon avis, NoSmoking, tu te trompes de discussion vu que ton intervention n'a rien à voir avec le sujet...

absolument pas, je note simplement que tu fais sans arrêt des appels au serveur, avec rechargement de la page, pour quelque chose qui doit se passer côté client je parle de l'appel à l'API qui dans le cas présent n'a rien à faire dans ton code PHP.

Ton plan de marche :

Saisie du code postal
Validation par appui sur rechercher : rechargement de la page
La liste des communes si existent apparaît
Choix d'une commune : rechargement de la page, à chaque choix il s'opère un rechargement

Ce n'est plus comme cela que cela fonctionne depuis ... au mon dieu cela ne nous rajeuni pas !... Ajax.
Mais bon c'est mon point de vue que je partage

Etant parfaitement satisfait, je mets en résolu.

C'est bien le principal mais je me sentais obligé de dénoncer une telle façon de faire, ta première approche étant bien meilleur !

Exemple d'une façon de voir/faire les choses :

↪ Récupération communes

...ceci restant perfectible

**laurentSc** · 17/04/2024, 21h19

Bonsoir,
je suis très intéressé par ta solution NoSmoking. Comme en plus, j'avais d'autres questions par rapport à la solution initiale (j'y reviendrai), je remets en non résolu.

Première question sur ton code, NoSmoking. Je l'ai récupéré, sachant qu'il n'y a que du code client. Dans la partie html, il y a

Code html :

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

1
2
3
4
        <section>
            <h2>Serveur</h2>
            <output></output>
        </section>

et on y retrouve l'affichage de l'action (j'y ai collé un var_dump($_POST); et on le voit après le titre serveur). Comment ça se fait ? Il y a sûrement un lien avec la balise (inconnue par moi) <output>
Je reviendrai à mes questions quand j'aurai compris ce point.

Au passage, je n'ai pas compris où étaient mes allers-retours avec le serveur et tu mentionnes ajax mais je ne m'en sers jamais car je ne le maîtrise pas.

**melka one** · 18/04/2024, 10h17

jour

le code pour l'appel l'api et la modification du selecte sans rechargement

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
	<html lang="fr">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<head>
	<style type="text/css">
 
        body{
                font-family:Verdana, Geneva, sans-serif;
                background-color:#b2bdc6;
        }
 
        </style>
	<script>
function rest(){
 
        var cp=document.getElementById('commune').value
        
        var adresse='https://geo.api.gouv.fr/communes?codePostal='+cp
 
        httpRequest = new XMLHttpRequest();
 
    httpRequest.onreadystatechange = gestion_requete;
        httpRequest.responseType = 'json'
    httpRequest.open('GET', adresse);
    httpRequest.send();
}
 
  function gestion_requete() {
  
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        
      if (httpRequest.status === 200) {
          
                        var donne=httpRequest.response;
                        
                        document.getElementById("ville").options.length = 0
                        
                        for ( var i = 0 ; i < donne.length ; i++) {
                                
                                var elem=document.createElement('option')
                                
                                var commune=donne[i].nom
                                
                                elem.setAttribute('value',commune)
 
                                var text = document.createTextNode(commune)
                                elem.appendChild(text)
                
                                elem.value=ville
 
                                document.getElementById('ville').add(elem);
                        }
        }
          else {
        alert('problème de requête.');
      }
    }
  }
 
</script>
	</head>
<body>
	<br><br><br>
	<label for="departement">code departement :</label>
	<input type ="text" id="commune" placeholder="Entrer votre Code Postal"/>
 
	<button onclick="rest()">valider</button>
 
	<br><br><br>
 
    <select  id="ville"><option value="vide">vide</option>
	</select>
</body>
</html>

**laurentSc** · 18/04/2024, 10h22

Je regarderai plus tard (sur mon téléphone et je vois très mal)

**NoSmoking** · 18/04/2024, 11h50

Envoyé par laurentSc;

et on y retrouve l'affichage de l'action (j'y ai collé un var_dump($_POST); et on le voit après le titre serveur). Comment ça se fait ? Il y a sûrement un lien avec la balise (inconnue par moi) <output>

Tout ce passe dans la function sendDatas() où la réponse du serveur, en l’occurrence pour la démo un simple var_dump($_POST) avec la date, est injectée dans l'élément <output>.

<output> est un élément HTML comme un autre et ce depuis HTML5 et qui sémantiquement parlant est plus judicieux qu'un simple élément <div> qui aurait très bien pu faire l'affaire. Donc la réponse prend sa place en dessous du titre <h2>comme indiqué par la structure HTML.

La fonction avec plus de commentaires si cela peut t'aider :

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
  sendDatas: function(e) {
    // évite soumission par défaut
    e.preventDefault();
    const f = this.formElement;
    // récup. conteneur destination de la réponse
    const output = document.querySelector("output");
    // info requête
    const reqURL = f.getAttribute("action");
    // on vide le conteneur réponse
    output.textContent = "";
    // envoi de la requête
    fetch(reqURL, {
        method: f.method,                 // récup. méthode d'envoi
        body: new FormData(f)             // contient les données du formulaire
      })
      .then((reponse) => reponse.text())  // on traite la réponse sous forme de texte brut
      .then(data => {
        // on écrit dans le conteneur <output>
        output.innerHTML = data;
      })
    // on fait un peu de nettoyage
    f.reset();
    this.resetSelect();
  },

Au passage, l’utilisation de l'API fetch est la « méthode moderne », et plus concise, de faire de l'Ajax, donc sans rechargement de la page, et devrait être utilisée à mon sens pour tous nouveaux projets mais inutile de reprendre les anciens pour les mettre à jour ils continueront de fonctionner comme ils l'ont fait jusqu'à maintenant.

Envoyé par laurentSc

Au passage, je n'ai pas compris où étaient mes allers-retours avec le serveur et tu mentionnes ajax mais je ne m'en sers jamais car je ne le maîtrise pas.

Ouvre la console, F12, et dans l'onglet réseau regarde ce qui ce passe, tu devrais voir les différentes requêtes qui sont effectuées.

@melka one

comme dit précédemment il serait temps de passer par l'API Fetch .
La création d'un élément <option> peut se faire avec une seule instruction new Option(text, value).

**laurentSc** · 18/04/2024, 16h53

Bonjour,
je suis de nouveau sur mon PC donc je peux regarder le code...
Je pars directement sur ton code NoSmoking.
Vu mes récentes difficultés, j'ai opté pour ajouter mon code au tien (déjà dit au post 28). Et dès le début, je constate un problème de mise en page pour les boutons radio du formulaire.

Voici le code actuel ; Le code CSS et le code JS sont strictement les tiens.

htmlsimplenosmokingpluscedquehtml.html:

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
60
61
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <link href="stylenosmoking.css" rel="stylesheet">
 
</head>
<body>
<main>
    <header>
        <time datetime="2024-04-17">Avril 2024</time>
        <h1>Récupération communes</h1>
        <p>Afficher les communes disponibles pour un code postal donné en utilisant l'API <a href="https://geo.api.gouv.fr/decoupage-administratif/communes" target="geo">geo.api.gouv.fr</a>.</p>
    </header>
    <section>
        <h2>Formulaire</h2>
        <div class="group-saisie">
            <form method="POST" action="traitcp.php">
                <fieldset>
                    <legend><span style="color: red;">*</span>type du logement :</legend>
                    <div>
                        <label for="maison">maison</label>
                        <input type="radio" id="maison" name="m_a" value=""  />
                    </div>
                    <div>
                        <input type="radio" id="appartement" name="m_a" value="" />
                        <label for="appartement">appartement</label>
                    </div><br/>
 
                    <legend>Info commune</legend>
                    <p>
                        <label for="input-code">Code postal</label>
                        <input name="cp-commune" id="input-code" value="" pattern="^\d{5}$" required>
                    </p>
                    <p>
                        <label for="select-villes">Commune</label>
                        <select name="nom-commune" id="select-villes" required>
                            <option value="">Choix commune</option>
                        </select>
                        <span class="warning">Aucune info disponible</span>
                    </p>
                    <p>
                        <button type="reset">Annuler</button>
                        <input type="submit" name="submitcp" value="Valider">
                    </p>
                </fieldset>
            </form>
        </div>
    </section>
    <section>
        <h2>Serveur</h2>
        <output></output>
    </section>
</main>
 
<script src="scriptnosmoking.js"></script>
 
</body>
 
</html>

stylenosmoking.css :

Code css :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
.group-saisie {
    display: inline-flex;
    flex-direction: column;
}
.group-saisie legend {
    padding: 0 .5em;
    font-weight: 700;
}
.group-saisie p {
    display: flex;
    position: relative;
    margin: .5em;
    line-height: 2;
}
.group-saisie label {
    display: inline-block;
    min-width: 10em;
}
.group-saisie input,
.group-saisie select {
    flex: 1;
    box-sizing: content-box;
    padding: 0 .25em;
    min-height: 2em;
    min-width: 20em;
    border: 1px solid #888;
    overflow: auto;
    font: inherit;
    background-color: #FFF;
}
.group-saisie button {
    margin: 1em auto 0;
    font: inherit;
}
select :first-child {
    font-style: italic;
    color: #888;
}
button:focus,
input:focus,
select:focus {
    outline: #BCD;
    outline-style: solid;
    outline-offset: 2px;
}
select:disabled {
    border: 1px dotted #F00;
}
select + .warning {
    display: none;
    z-index: 1;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 20em;
    padding: 0 .25em;
    text-align: center;
    color: #B00;
    background-color: #FFF;
    pointer-events: none;
}
select:disabled + .warning {
    display: block;
}
output {
    display: block;
    font-family: "Courier New";
    font-size: 1.2em;
    white-space: pre;
    color: #069;
    background: #F5F2F0;
}
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
time {float: right;margin: .5em;font-size: 0.9em;color: #666;}
main {display: block;margin: auto;max-width: 60em; padding: .25em;}
section {position: relative;margin: 0 1em 1em;}
section > :not(h2) {margin-left: 1em !important;}
p.discussion:before {content: "";display: block;height: 1px;margin: 1em 0;background-color: #CCC;box-shadow: 0 0 .5em #000;}
button {display: inline-block;margin: .25em;padding: 0 1em;border: 1px solid #CCC;border-bottom-color: #BBB;border-radius: 0;border-radius: .25em;text-decoration: none;text-shadow: 0 1px 1px rgba(255,255,255,0.75);font: inherit;line-height: 2.5;color: #333;background-color: #E6E6E6;background-image: linear-gradient(#FFF,#FFF 25%,#E6E6E6);background-repeat: no-repeat;box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) ,0 1px 2px rgba(0,0,0,0.05);transition: background-position 0.1s linear;cursor: pointer;}
button:not(:disabled):hover {color: #333;background-position: 0 -1em;}
button:focus {outline: auto;outline-color:#06E}
button:disabled {color: #CCC;cursor: inherit;}

scriptnosmoking.js :

Code js :

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
60
61
62
63
    "use strict";
    const App = {
    selectVilles: document.getElementById("select-villes"),
    inputCode: document.getElementById("input-code"),
    formElement: document.querySelector("form"),
 
    resetSelect: function() {
    this.selectVilles.options.length = 1;
    this.selectVilles.setAttribute("disabled", "disabled");
},
 
    sendDatas: function(e) {
    e.preventDefault();
    const f = this.formElement;
    const output = document.querySelector("output");
    // info requête
    const reqURL = f.getAttribute("action");
    output.textContent = "";
    fetch(reqURL, {
    method: f.method,
    body: new FormData(f)
})
    .then((reponse) => reponse.text())
    .then(data => {
    output.innerHTML = data;
})
    f.reset();
    this.resetSelect();
},
 
    updateListeVilles: function(datas) {
    // purge sauf 1st
    this.selectVilles.options.length = 1;
    // on met dans l'ordre
    datas.sort((a, b) => a.nom.localeCompare(b.nom));
    const list = datas.map((data) => new Option(data.nom, data.nom));
    // on ajoute
    this.selectVilles.append(...list);
    if (datas.length) {
    this.selectVilles.removeAttribute("disabled");
    this.selectVilles.value = datas[0].nom;
    if (datas.length > 1) this.selectVilles.focus();
}
},
 
    start: function() {
    this.resetSelect();
    this.formElement.addEventListener("submit",this.sendDatas.bind(this));
    this.formElement.addEventListener("reset", this.resetSelect.bind(this));
 
    this.inputCode.addEventListener("input", (e) => {
    this.resetSelect();
    const value = e.target.value;
    if (Number(value) && value.length == 5) {
    const url = "https://geo.api.gouv.fr/communes?codePostal=" + value;
    fetch(url)
    .then((reponse) => reponse.json())
    .then(data => this.updateListeVilles(data))
}
});
}
}
    App.start();

Plutôt que décrire le problème de mise en page, j'ai mis le code dans un codepen et le problème est évident : https://codepen.io/laurentsch/pen/LYvgBoN

Quel est le souci STP ?

**NoSmoking** · 18/04/2024, 18h56

Sur le forum Général JavaScript on traite du JavaScript
Sur le forum Mise en page CSS on traite du CSS

Quel est le souci STP ?

Ayant ouvert la discussion je te conseille simplement de repartir sur du HTML structuré et valide soit, sans rien changer au CSS

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
<form method="POST" action="traitcp.php">
  <fieldset>
    <legend><span style="color: red;">*</span>Type du logement :</legend>
    <p>
      <label for="maison">Maison</label>
      <input type="radio" id="maison" name="m_a" value="M">
    </p>
    <p>
      <label for="appartement">Appartement</label>
      <input type="radio" id="appartement" name="m_a" value="A">
    </p>
  </fieldset>
  <!-- fermeture et ouverture d'un autre fieldset -->
  <fieldset>
    <legend>Info commune</legend>
    <p>
      <label for="input-code">Code postal</label>
      <input name="cp-commune" id="input-code" value="" pattern="^\d{5}$" required>
    </p>
    <p>
      <label for="select-villes">Commune</label>
      <select name="nom-commune" id="select-villes" required>
        <option value="">Choix commune</option>
      </select>
      <span class="warning">Aucune info disponible</span>
    </p>
    <p>
      <button type="reset">Annuler</button>
      <!-- <input type="submit" name="submitcp" value="Valider"> -->
      <button type="submit">Valider</button>
    </p>
  </fieldset>
</form>

Pour le reste on attend tes questions portant sur le JavaScript !

**melka one** · 18/04/2024, 21h21

jour

comme ça c'est mieux

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
<!doctype html>
	<html lang="fr">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<head>
	<style type="text/css">
 
        body{
                font-family:Verdana, Geneva, sans-serif;
                background-color:#b2bdc6;
        }
        </style>
	<script>
function rest(){
 
        var cp=document.getElementById('commune').value
        
        var adresse='https://geo.api.gouv.fr/communes?codePostal='+cp
 
        fetch(adresse)
                .then(response => response.json())
                .then(function(zozone) {
 
                        document.getElementById("ville").options.length = 1
 
                        for ( var i = 0 ; i < zozone.length ; i++) {
 
                                var commune=zozone[i].nom
 
                                document.getElementById("ville")[i+1]=new Option(commune, commune)
                        }
                }
        )
                .catch(error => alert("Erreur requete"));
 }
 
</script>
	</head>
<body>
	<br><br><br>
	<label for="departement">code departement :</label>
	<input type ="text" id="commune" placeholder="Entrer votre Code Postal"/>
 
	<button onclick="rest()">valider</button>
 
	<br><br><br>
 
    <select  id="ville"><option selected="true" disabled="disabled">- Choisir une commune -</option>
	</select>
</body>
</html>

grosse cure d'amaigrissement

comme quoi les chose peuvent devenir simple

**laurentSc** · 18/04/2024, 21h58

Merci NoSmoking pour ta réponse qui me dépanne.

Certes, ce forum est dédié au JS et y en a un autre pour le CSS et un autre pour le PHP et encore un autre pour le HTML, mais mon problème fait appel aux 4 compétences et par exemple, la solution que tu m'as proposée au post 29 utilise du HTML, du CSS et du JS (de même pour la solution de melka one au post 36), donc faut-il créer autant de discussions ? Et souvent, le contenu de l'une d'elles est utile pour une autre dans une autre compétence...Par exemple, il me vient une question relative à la compétence PHP mais pour la comprendre, il est nécessaire de connaître l'historique de la discussion qui se trouve dans le forum présent...Donc je la pose ici, pensant que c'est plus efficace de s'y prendre comme cela :

Je souhaite si possible regrouper tout le code dans un seul fichier. En effet, l'objectif est d'intégrer ce code dans un site créé avec un CMS donc si la personne qui s'en charge n'est pas moi (c'est possible), ça sera plus simple à faire si tout est dans un seul fichier. L'idée est donc d'incorporer cette interrogation sur le code postal et les communes dans un formulaire dont l'action sera présente dans le même fichier. D'habitude, cela se fait avec un code de ce genre :
Code HTML + PHP

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
    <!doctype html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
        <link href="chemin/vers/le/style.css" rel="stylesheet">
        <title>Titre de la page</title>
    </head>
 
    <body>
   <form method="post" action="">
       <!-- code du form -->
       <input type="submit" name="action_form" value="envoyer" />
   </form>
   <?php
   if (isset($_POST['action_form'])) {
       //code de l'action
   }
   ?>
 
    </body>
    </html>

Ce principe, j'ai essayé de l'appliquer à ton code NoSmoking (avant que n'arrive le post 36), mais l'action n'est pas exécutée...(elle n'apparaît pas dans le rectangle "serveur")
Code HTML + PHP

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
    <!doctype html>
    <html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
        <link href="stylenosmoking.css" rel="stylesheet">
 
    </head>
    <body>
 
 
    <main>
        <header>
            <time datetime="2024-04-17">Avril 2024</time>
            <h1>Récupération communes</h1>
            <p>Afficher les communes disponibles pour un code postal donné en utilisant l'API <a href="https://geo.api.gouv.fr/decoupage-administratif/communes" target="geo">geo.api.gouv.fr</a>.</p>
        </header>
        <section>
            <h2>Formulaire</h2>
            <div class="group-saisie">
                <form method="POST" action="">
                    <fieldset>
                        <legend>Info commune</legend>
                        <p>
                            <label for="input-code">Code postal</label>
                            <input name="cp-commune" id="input-code" value="" pattern="^\d{5}$" required>
                        </p>
                        <p>
                            <label for="select-villes">Commune</label>
                            <select name="nom-commune" id="select-villes" required>
                                <option value="">Choix commune</option>
                            </select>
                            <span class="warning">Aucune info disponible</span>
                        </p>
                        <p>
                            <button type="reset">Annuler</button>
                            <input type="submit" name="calc_prix" value="Valider">
                        </p>
                    </fieldset>
                </form>
            </div>
        </section>
        <section>
            <h2>Serveur</h2>
            <output></output>
        </section>
    </main>
    <?php
    if (isset($_POST['calc_prix'])){
        var_dump($_POST);
    }
    ?>
    <script src="scriptnosmoking.js"></script>
 
    </body>
 
    </html>

donc est-ce possible ?

**laurentSc** · 18/04/2024, 22h45

Bonsoir melka one,

j'ai essayé d'incorporer ton code dans un formulaire mais il ne fonctionne plus (si on saisit un code postal, les communes correspondantes ne sont pas affichées). Pourquoi ?

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
<!doctype html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
 
            body{
                font-family:Verdana, Geneva, sans-serif;
                background-color:#b2bdc6;
            }
        </style>
        <script>
            function rest(){
 
                var cp=document.getElementById('departement').value
 
                var adresse='https://geo.api.gouv.fr/communes?codePostal='+cp
 
                fetch(adresse)
                    .then(response => response.json())
                    .then(function(zozone) {
 
                            document.getElementById("ville").options.length = 1
 
                            for ( var i = 0 ; i < zozone.length ; i++) {
 
                                var commune=zozone[i].nom
 
                                document.getElementById("ville")[i+1]=new Option(commune, commune)
                            }
                        }
                    )
                    .catch(error => alert("Erreur requete"));
            }
 
        </script>
    </head>
<body>
<form>
<label for="departement">code departement :</label>
<input type ="text" id="departement" placeholder="Entrer votre Code Postal"/>
 
<button onclick="rest()">valider</button>
 
<br><br><br>
 
<select  id="ville"><option selected="true" disabled="disabled">- Choisir une commune -</option>
</select><br/>
<input type="submit" name="trait_cp" value="envoyer"/>
</form>
</body>
</html>

**melka one** · 18/04/2024, 23h12

apparemment ça fait un envoi du formulaire il faut rajouter preventDefault() pour inhiber l'envoi

en debut de code

Code :

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

1
2
3
 function rest(evt){
 
	   evt.preventDefault()

et dans le html rajour event
a l'evenement onclick

Code html :

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

<button onclick="rest(event)">valider</button>

**laurentSc** · 19/04/2024, 09h19

excellent ; j'ai essayé ce matin et modifier la soumission du formulaire, et ça marche !

Du coup, j'ai 2 solutions. J'espère parvenir à intégrer mon code à l'une d'elles. Je vous tiens au courant.
J'essaie aussi de tout faire tenir dans un seul fichier (cf post 37).

Afficher liste communes ayant un code postal donné

JavaScript

Discussions similaires

Partager

Partager