Discussion :

[LampeRouge]

Bonjour. Ne me tapez pas, je débute. Je ne sais pas si je poste au bon endroit.....
Je cherche un moyen de compléter un formulaire PHP à l'aide de JS.
- utiliser dynamiquement le fichier client et retrouver ainsi les paires (CP,VILLE) appropriées et précédemment créées.
En fait la 1ere fois on rentre le CP et la VILLE, puis la 2e fois le formulaire est complété automatiquement.

Dans ce système il y a un inconvénient. On a pas de 1-1 car un même CP peut désigner plusieurs villes
Est-il intelligent de faire un tableau associatif quitte à répéter plusieurs fois le même code, mais avec une ville différente.

Comment faire pour faire bien et rapide. Je ne sais pas comment on affiche une liste en JS et en plus pouvoir en sélectionner une ligne......

Comprenez, que je m'interroge sur un problème super connu, car toute base client doit avoir un tel système.
Il y a tellement de chose sur le net, que je ne trouve pas de solutions à toutes mes questions.

Excusez moi encore de mon amateurisme, mais il faut bien commencer....
Merci à ceux qui m'aideront.

[SpaceFrog]

il existe des bases de données de codes postaux
un select sur le cp peut retourner plusieurs villes
tu peux ainsi faire une autocomplétion sur l'input du cp
tu commences a taper le CP et dès le 3eme chiffre il te propose la liste des villes possibles

Sinon à chaque cp correspond un array des villes possibles ...

[LampeRouge]

Merci de te pencher sur mon interrogation.
Donc pour toi, la base de données toutes prêtes est la meilleure solution.
Cependant je voudrais que si on ne tape que la ville, le code poste se génère aussi automatiquement.

Je vais chercher dans ce sens et essayer de trouver un bout de code à insérer, car je ne suis pas familier du JS.
Merci.

Je ne clôture pas le sujet car pour l'instant rien n'est en place. Je risque encore de poser quelques questions.....

[SpaceFrog]

Oui l'autocomplétion est possible dans les deux sens
CP => Ville
Ville => CP

Pour ce qui est de la base de données, je pense en effet que bein que plus lourde, ce soit la solution à retenir, avec des choses tout a fait officielles et gratuites fournie en csv et directement importables dans une table mysql par exemple
https://www.data.gouv.fr/fr/datasets...codes-postaux/

[ram-0000]

Cependant je voudrais que si on ne tape que la ville, le code poste se génère aussi automatiquement.

Attention que certaines (grandes) villes ont plusieurs code postaux

[LampeRouge]

Oui. Pour faire moins lourd et bien ciblé, je voulais me servir de ce qui est déjà enregistré. L'inconvénient est qu'il faut saisir une 1er fois le couple CP et ville.
Mais ensuite viens le codage en JS.
Remonter les données dans un array JS je sais faire, mais comment peut-on faire pour avoir un début d'affichage à partir du 3e caractère ? Puis un affinage en fonction des caractères saisi suivant ?
Est-il préférable de faire un tableau associatif ?

Je suis désolé de vous embêter, mais quand on débute, on cherche à apprendre.....
Merci de votre patience.

[LampeRouge]

Pour essayer de faire voici ce que j'ai fait:

html

Code php :

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

1
2
3
4
5
6
7
8
9
10
<form   name="form_client" > 
<?php    
  $DBsql = sqli_DB("	SELECT DISTINCT `code_posta` , `ville` FROM client ORDER BY `ville`");
  $T_row = sqli_list($DBsql);
 
  foreach($T_row as $row){
      ?> <input type=hidden name=ligne[] value= '<?php print $row ?>'>
      <?php
  }
?> </form>

Le js est appelé avec un ONCHANGE sur le champ code
jscode(this.value)


et en js:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function jscode(jscodePoste){
    T = new Array();
    sel="<select name= 'test' >"
    // on construit un tableau par ligne reçue
    for(i=0;i<sizeof(T);i++) {
        T[i]= document.form_client.ligne[i].value'
        sel= sel+ "<option value="+T[1]+">"+T[0]+"</option>";
 
    }
    sel= sel+ "</select>"   
 
    document.getElementById('ville').innerHTML=sel;
 
}

Cette méthode ne fonctionne pas . Le champ "ville" est un champ "text" . Il n'est pas remplacé par la liste.

[NoSmoking]

Bonjour,
concernant ton code javascript, tu es sûr d'utiliser la bonne syntaxe ?

[LampeRouge]

Je patine...... J'ai honte d'être aussi nul, mais il faut bien commencer. Je vois sur google qu'en fait pour transmettre un tableau on utilise Json qui transforme le dit tableau en ligne.
Est ce logique ou peut on effectivement transmettre un tableau php vers JS ?
Merci.

[LampeRouge]

Je reprends mes essais.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 <form   name="form_client" > 
<?php    
  $DBsql = sqli_DB("    SELECT DISTINCT `code_posta` , `ville` FROM client ORDER BY `ville`");
  $T_row = sqli_list($DBsql);
  $i=0;
 
  foreach($T_row as $row){
      ?> <input type="hidden" name="code"<?php print $i?> value= "<?php print $row[0]?>">
         <input type="hidden" name="ville"<?php print $i?> value= "<?php print $row[1] ?>">
     <?php
     $i++;
  }
?> </form>

Pas de problème sur ce code. Si je remplace hidden par text, mes champs sont corrects.
Le js est appelé avec un ONCHANGE sur le champ code
jscode(this.value)


et en js:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function jscode(jscodePoste){
    alert('ici')
    sel="<select name= 'test' >"
    i=0
    T = { code:'',
          ville:''
        }
    L = eval('document.form_client.code'+i+'.value')
    alert('L= ')
 
 
}

Le 1er alert fonctionne, mais pas le 2e. Le blocage se fait au niveau de L= eval(.......
J'ai appris que les tableaux sont des objets en JS, donc T devrait être sous cette forme, mais ne remontant pas encore mes infos, je ne vais pas plus loin.
Je cherche toujours....
Merci.

[Watilin]

Appuie sur F12 et tous tes soucis vont s'envoler. Promis, c'est pas un troll du genre « fais Alt+F4 » : F12 ouvre la console de ton navigateur. Dans la console, tu vois les erreurs de ton script, et tu vois aussi les messages que tu lui demandes d'afficher si tu utilises console.log. C'est plus pratique que alert, tu vas voir.

Puisque tu débutes en JS, je te conseille de prendre tout de suite de bonnes habitudes et coder en mode strict. C'est simple, il suffit de mettre la chaîne "use strict" au début de chaque script.

Reprenons ton script :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
"use strict";
 
function jscode(jscodePoste) {
    console.log('ici');
    var sel = "<select name='test'>";
    var i = 0;
    var T = {
        code: '',
        ville: ''
    };
    var L = document.form_client['code' + i].value;
    console.log('L= ', L);
}

J'ai fait deux choses avec ton code : j'ai corrigé la syntaxe (et rien d'autre), et j'ai retiré le eval. eval, c'est le mal, et dans 99.9% des cas il y a moyen de faire sans. Là tu vois j'ai utilisé les crochets pour accéder à une propriété dont on ne connaît le nom qu'au moment de l'exécution.

Je ne sais pas si ce code marche car il repose implicitement sur l'existence d'éléments dans la page :
– un élément dont le nom (attribut name) est "form_client" ;
– un élément enfant du précédent, dont le nom est "codeX" où X est un nombre.

Je ne doute pas que tu as ces éléments dans ta page, mais comme on n'a pas vu ton code HTML, on ne peut pas savoir.

Il manque encore beaucoup de choses pour que le script marche mais j'espère que les choses te paraissent déjà un peu plus claires au niveau de la syntaxe

[LampeRouge]

Un grand merci Watilin pour tes conseils. Je trouve le code plus propre avec l'utilisation de console.log(). On a une trace de notre JS sans message intempestif à l'écran. J'adopte le procédé.

Pour en revenir au script, il y a toujours blocage au niveau de la remontée de data.
La console F12 Parle. Dans le HTML mon petit formulaire que je n'envoie pas mais dont se sert le JS donne:

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
 <form   name="form_client" > 
 <input type="hidden" name="code"0 value= "51150">
         <input type="hidden" name="ville"0 value= "aigny">
      <input type="hidden" name="code"1 value= "51150">
         <input type="hidden" name="ville"1 value= "AMBONNAY">
      <input type="hidden" name="code"2 value= "80000">
         <input type="hidden" name="ville"2 value= "AMIENS">
      <input type="hidden" name="code"3 value= "06600">
         <input type="hidden" name="ville"3 value= "ANTIBES">
      <input type="hidden" name="code"4 value= "51290">
         <input type="hidden" name="ville"4 value= "ARZILLIÈRES NEUVILLE">
      <input type="hidden" name="code"5 value= "51150">
         <input type="hidden" name="ville"5 value= "ATHIS">
      <input type="hidden" name="code"6 value= "32000">
         <input type="hidden" name="ville"6 value= "AUCH">
      <input type="hidden" name="code"7 value= "51240">
         <input type="hidden" name="ville"7 value= "AULNAY L'AITRE"> ......

La construction est bonne au vu de cet échantillon.
Le code HTML est celui qui est indiqué sur le message de 23H00


Le remontée dans le JS bloc net car en console je n'ai que

Code :

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

ici

J'ai appliqué ta méthode que voici.

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
<script language='javascript'language='javascript'>
"use strict";
   window.onload = function() {
   document.getElementById('civilite').focus();
   }
 
function jscode(jscodePoste){
    console.log('ici')
    sel="<select name= 'test' >"
    i=0
    T = { code:'',
          ville:''
        }
    var L = document.form_client['code' + i].value;
    console.log('L= ', L);
 
}

Je précise que ce bout de code est dans la même page que le HTML . Il fonctionne car le 1er message s'affiche. Donc le mécanisme d'appel fonctionne , mais c'est la fonction en elle même qui plante sans dire pourquoi.

Si tu as une idée, je suis preneur, car je sèche depuis un bon moment....
Merci encore de ton aide.

[Watilin]

Code :

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

<input type="hidden" name="code"0 value= "51150">

La construction est bonne au vu de cet échantillon.

Je ne dirais pas ça : les chiffres sont en dehors des guillemets.

Il faut corriger le code PHP à cette ligne en déplaçant le guillemet fautif :

Code PHP :

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

<input type="hidden" name="code<?php print $i?>" value= "<?php print $row[0]?>">

Avec ça ton script devrait trouver les éléments.

Au fait, attention aux lignes sans points-virgules en JS, il y a des pièges.

[LampeRouge]

Merci encore de ton aide.
Tu réponds très directement à des questions que je ne pose pas. Je me demandais la nécessité des ";" en fin de ligne.

[LampeRouge]

J'ai fait ceci:

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
function jscode(jscodePoste){
    console.log('jscode '+jscodePoste);
    var sel="<select name= 'test' >";
    var i=0;    
    var C = document.form_client['code' + i].value;
    var V = document.form_client['ville' + i].value;
    var subC= '';
    console.log('subC '+document.form_client['code' + i].value.substring(0,jscodePoste.length));
 
    while( jscodePoste === document.form_client['code' + i].value.substring(0,jscodePoste.length)){
        console.log('C= '+C); 
 
        subC= C.substring(0,jscodePoste.length);
        if(subC==jscodePoste) {
            sel+= "<option value="+V+"> "+C+' '+V+"</option>";
        }
 
        i++;
        console.log('i= '+i); 
    }
    sel += "</select>";
    console.log('sel= '+sel);
 
    // insertion de la liste dans le HTML à champ "ville".
    document.getElementById("ville").innerHTML = sel;
 
 
}

Bien sur, ça ne fonctionne pas. La condition while ne semble pas permise, mais je ne vois pas pourquoi. Je dis ça car quand je commente cette boucle les messages en console apparaissent. Si je décommente, je n'ai plus aucun message. Pourtant la même chose est bien évaluée juste au dessus du while. Y aurait-il un fonctionnement particulier des whiles ?

[Watilin]

Non, le while de JS est sans surprises.

Regarde attentivement la valeur de ta variable i quand on arrive sur ce while pour la première fois. C'est la valeur qu'elle a reçu au moment de sa déclaration var i=0, donc 0. Du coup, voilà à quoi ça ressemble si on simplifie :

Code :

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

1
2
3
4
while( jscodePoste === document.form_client['code' + i].value)
while( jscodePoste === document.form_client['code' + 0].value)
while( jscodePoste === document.form_client.code0.value)
while( jscodePoste === "51150")

jscodePoste est toujours comparée à la valeur "51150".

Peu importe la valeur de jscodePoste, ta boucle doit parcourir tous les champs code pour pouvoir proposer toutes les villes correspondant au code donné. Comme condition de boucle, tu dois simplement vérifier que i n'est pas « arrivé au bout », et tu as deux façons de faire :

1. Soit tu calcules à l'avance la valeur maximale de i en comptant les <input type="hidden"> (tu peux faire ça avec querySelectorAll par exemple), et dans ce cas tu peux remplacer ta while par une boucle for classique ;
2. Soit tu vérifies que le champ « sélectionné » avec i existe bien, comme ceci :
   

   Code :

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

   1
   2
   3
   4
   var champ = document.form_client['code' + i];
   if (champ) {
     // ... le reste du code de la boucle ici
   }

   Tu peux aussi utiliser un break mais personnellement je trouve ça moins élégant.

Il te reste deux-trois trucs à trouver pour faire marcher ton code. Garde espoir, tu vas y arriver

[LampeRouge]

Merci de ton soutien. C'est bien de me laisser chercher aussi. C'est comme ça qu'on apprend.
Compte tenu de tes indications, je vais procéder autrement.

[LampeRouge]

Ça avance. J'y suis presque.

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
function jscode(jscodePoste){
    console.log('jscode '+jscodePoste);
    var imax= document.form_client.total.value;
    var sel="<select name= 'test' >";
    var i=0;    
    var C = document.form_client['code' + i].value;
    var V = document.form_client['ville' + i].value;
    var subC= C.substring(0,jscodePoste.length);
    console.log('imax '.imax);
 
    if(jscodePoste.length <3) { exit; }
    if(imax <1) { exit; }   //securité
 
    for(i=0;i<imax;i++){
        C = document.form_client['code' + i].value;
        subC= C.substring(0,jscodePoste.length);
 
        if(subC==jscodePoste) {
            V= document.form_client['ville' + i].value;
            sel+= "<option value="+V+"> "+V+"</option>";
        }
 
        i++;
    }
    sel += "</select>";
    console.log('sel= '+sel);
    console.log('V= '+V);
 
    // insertion de la liste dans le HTML à champ "ville".
    document.getElementById("ville").innerHTML = sel;

La console m'indique que ça fonctionne sauf si j'ai 5 chiffres ? ????
J'ai essayé un document.write et j'ai bien eu mon résultat.

Par contre l'intégration dans le formulaire, c'est zéro. C'est là ma grande lacune.
Bizarrement je suis plus à l'aise en PHP. C'est surement mon EDI qui y est pour quelque chose. (netbeans-php)

[Watilin]

Code :

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

1
2
    if(jscodePoste.length <3) { exit; }
    if(imax <1) { exit; }   //securité

exit n'est pas un mot-clé en JavaScript, tu dois confondre avec return. Note que si imax < 1, la condition i < imax de la boucle for n'est jamais vraie et donc la boucle n'est jamais exécutée.

exit est considéré comme un simple nom de variable, et comme il n'y a pas var devant, l'interpréteur JS considère que tu essayes d'utiliser une variable globale. Si tu es en mode strict, tu verras une erreur ; sinon elle passera entre les mailles du filet.

Autre problème vicieux :

Code :

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

console.log('imax '.imax);

Tu as voulu faire une concaténation comme en PHP
Ici l'interpréteur comprend que tu veux accéder à la propriété imax de la chaîne 'imax '. Comme, a priori, cette propriété n'est pas définie, la console affiche undefined et tu n'as pas d'erreur. Même le mode strict ne peut rien contre ça.

Je te conseille de passer plusieurs arguments à console.log au lieu de concaténer :

Code :

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

console.log('imax', imax);

De cette façon la console connaît le type de la variable que tu veux examiner, et peut ajouter des informations dessus (la colorer différemment, la rendre cliquable si c'est un objet, etc.).

La console m'indique que ça fonctionne sauf si j'ai 5 chiffres ? ????
J'ai essayé un document.write et j'ai bien eu mon résultat.

Je te déconseille document.write, cette fonction a la fâcheuse manie de vider ta page.

Attention tu as deux instructions i++ dans ta boucle for : une au début et une à la fin. Du coup tu rates la moitié des valeurs.

Bizarrement je suis plus à l'aise en PHP. C'est surement mon EDI qui y est pour quelque chose. (netbeans-php)

Normalement NetBeans fait aussi le support de JavaScript.


Je te propose une petite variation de ton code pour le simplifier un peu. Tu connais la méthode startsWith ? On va supposer que ton navigateur de test la supporte (sinon, tu peux toujours ajouter le polyfill au début de ton script). Idem avec trim pour supprimer les espaces indésirables.

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
function jscode(jscodePoste) {
    jscodePoste = jscodePoste.trim();
    console.log('jscode =', jscodePoste);
    if (jscodePoste.length < 3) return;
 
    var imax = Number(document.form_client.total.value);
    console.log('imax =', imax);
    if (imax < 1) return;
 
    var sel = '<select name="test">';
    var i, C, V;
 
    for (i = 0; i < imax; i++) {
        C = document.form_client['code' + i].value;
        if (C.startsWith(jscodePoste)) {
            V = document.form_client['ville' + i].value;
            sel += '<option value="' + V + '">' + V + '</option>';
        }
    }
    sel += '</select>';
    console.log('sel =', sel);
    console.log('V =', V);
 
    // insertion de la liste dans le HTML à champ "ville".
    document.getElementById('ville').innerHTML = sel;
}

[LampeRouge]

Je te remercie de ces conseils. Je connais Trim en php. Je ne pensais pas qu'il existait aussi en JS. Quant à startsWith , c'est une grande découverte, mais qui effectivement simplement le code.
Étant sous linux, on utilise firefox ou chrome. Donc je ne devrais pas avoir de souci.
Je fais des essais.....