cp-ville ou ville-cp

Version imprimable

02/09/2015, 22h41
LampeRouge

cp-ville ou ville-cp

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.
03/09/2015, 08h19
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 ...
03/09/2015, 21h42
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.....
04/09/2015, 08h28
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/
04/09/2015, 09h04
ram-0000

Citation:

Envoyé par LampeRouge

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
04/09/2015, 16h49
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.

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

html

Code:

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:

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.

05/09/2015, 09h55
NoSmoking

Bonjour,
concernant ton code javascript, tu es sûr d'utiliser la bonne syntaxe ?
05/09/2015, 18h12
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.

Je reprends mes essais.
Code:

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:

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.

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:

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 ;)

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:

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:

ici

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

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.

07/09/2015, 00h05
Watilin

Citation:

Envoyé par LampeRouge

Code:

<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:

<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.
07/09/2015, 11h33
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.

J'ai fait ceci:

Code:

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 ?

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:

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 :
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 ;
Soit tu vérifies que le champ « sélectionné » avec i existe bien, comme ceci :
Code:

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 ;)

07/09/2015, 18h51
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.

Ça avance. J'y suis presque.

Code:

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)

Code:

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:

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:

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.).

Citation:

Envoyé par LampeRouge

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.

Citation:

Envoyé par LampeRouge

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:

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; }

08/09/2015, 23h10
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.....
09/09/2015, 00h03
LampeRouge

Effectivement, la variable sel est correctement remplie. Le problème pour moi est maintenant d'afficher le tout dans le formulaire.
Mes connaissances se limitent actuellement à afficher des 'alert' ou des 'confirm' Je ne sais rien afficher d'autre.

Quand j'écris

Code:

document.getElementById("ville").innerHTML = sel;

Je le tire de mes recherches sur google, mais je n'en connais pas la portée.

Ce que je voudrais:
J'ai actuellement un

Code:

<td align="left"><input text name="ville" id="ville" value=""></td>

Il faudrait le transformer/supperposer en

Code:

<td align="left"> contenu de "sel"</td>

avec un effet de la souris qui en cliquant sur une ligne, inscrit le contenu dans le champ ville.

Est ce réalisable à chaud sans devoir envoyer le formulaire ?
J'ai déjà chercher une réponse sur le net, mais je ne dois pas comprendre, car les liens trouvés, n'ont pas répondu à mon attente. Si tu as ça en fond de tiroir, je ne demande qu'à m'instruire.
Merci de ton aide précieuse.
09/09/2015, 10h52
Watilin

Oui c'est réalisable à chaud, c'est à ça que sert JavaScript ;)
Les méthodes et propriétés du DOM sont indispensables en JS. Tu en connais déjà une : getElementById. Elle t'a permis de sélectionner l'input ville. Mettons-le dans une variable pour garder une référence dessus :

Code:

var $ville = document.getElementById("ville");

À présent je te propose d'utiliser la propriété parentNode, qu'ont tous les nœuds DOM, pour accéder au parent de ville, c'est-à-dire ce <td align="left">.

Code:

var $td = $ville.parentNode;

Maintenant que tu as une référence sur le td, tu peux utiliser sa propriété innerHTML :

Code:

$td.innerHTML = sel;

Avec ça ton script est un fusil à un coup : il marche la première fois, mais à la seconde l'input ville a disparu donc il ne peut plus trouver le td. Si tu vex que le script soit réutilisable, utilise la méthode insertAdjacentHTML. Elle fonctionne un peu comme innerHTML, mais elle n'écrase pas le contenu :

Code:

$ville.insertAdjacentHTML("afterend", sel);

Pour info, le DOM te permet aussi de créer directement des éléments sans utiliser du code HTML avec createElement, et de les insérer où tu veux dans la page avec appendChild ou insertBefore.
11/09/2015, 00h08
LampeRouge

Hou là là, en voila des choses intéressantes. Je sens que je vais faire des progrès...... Permet moi de prendre un temps de réflexion. Je vais parcourir le net pour en savoir un max. De plus j'ai un énorme bouquin, un peu rebutant: "Javascript, la référence" de O'reilly. Je vais aller le dépoussiérer.
Je suis quelque peu surbooké avec mon boulot, mais ce sujet me passionne. Je reviens bientôt te dire comment ça marche.
Un grand merci....

Que c'est intéressant.... Je découvre des possibilités immenses. On recrée des éléments à chaud dans le formulaire......
Mais je ne maitrise pas tout. En fait si je recommence l'opération (bis), j'ai bien une 2e liste qui s'installe à coté de la 1ere. J'aurais voulu plutôt la remplacer.

J'ai examiné le code après avoir obtenu la liste par JS. Je ne trouve aucune modification. Le server ne sera pas perturbé par cette liste. C'est bien, mais en attendant comment fait-on pour récupérer notre choix ?
J'ai essayé:
Code:

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 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; //securité var sel="<select name= 'choix_ville' id= 'choix_ville'onchange=codevalid(this.value)>"; var i, C, V ; var ville = document.getElementById("ville"); for(i=0;i<imax;i++){ C = document.form_client['code' + i].value; if(C.startsWith(jscodePoste)) { // 510==510 début de 51000 V= document.form_client['ville' + i].value; sel+= "<option value="+V+"> "+V+"</option>"; } } sel += "</select>"; console.log('sel= ',sel); console.log('V= ',V); ville.insertAdjacentHTML("afterend", sel); } function codevalid(nom_ville) { console.log('codevalid(nom_ville) ',nom_ville); if(nom_ville.length <2) { return } var ville = document.getElementById("ville"); ville.value=nom_ville; }
Sur un nom composé de 2 mots je n'ai que le 1er.
Ce doit surement être une petite erreur de syntaxe. Mais où ?

J'ai essayé

Code:

sel+= "<option value="+rawurlencode(V)+"> "+V+"</option>";

mais j'ai une erreur JS !!

EDIT: Ça y est, j'ai trouvé. En fait j'encode directement en PHP

Code:

<input type="hidden" name="ville<?php print $i?>" value= "<?php print rawurlencode($row[1])?>">

Puis en JS j'utilise

Code:

sel+= "<option value="+V+"> "+unescape(V)+"</option>";

Code:

var sel="<select name= 'choix_ville' id= 'choix_ville'onclick=codevalid(this.value)>";

est correcte

Peut être y a -t-il plus simple, mais en attendant ça marche.....
I'm happy :ptdr:

13/09/2015, 22h52
Watilin
C'est cool si ça marche ;)

Je vais essayer d'éclaircir quelques points.

Citation:

Envoyé par LampeRouge

En fait si je recommence l'opération (bis), j'ai bien une 2e liste qui s'installe à coté de la 1ere. J'aurais voulu plutôt la remplacer.

Si tu veux la remplacer, il suffit de retirer l'existante avant d'en insérer une nouvelle. Ça se fait en général avec removeChild en passant par le parentNode.
Code:

1 2 var $liste = document.getElementById("choix_ville"); $liste.parentNode.removeChild($liste);
Il y a aussi la récente méthode remove, mais elle n'est pas supportée sous IE. Je te la mets quand même pour info et parce qu'elle est facile à émuler avec un polyfill.

Code:

$liste.remove();

Citation:

J'ai examiné le code après avoir obtenu la liste par JS. Je ne trouve aucune modification.

Les modifications faites par JS n'apparaissent pas dans le code source HTML. On peut voir le code HTML comme la « matière première » à partir de laquelle le navigateur construit une représentation de la page, qu'il peut afficher et qu'on peut manipuler en JS : c'est ce qu'on appelle le DOM (pour Document Object Model).

Tu peux voir l'état réel du DOM dans l'onglet inspecteur de ta console. Dans ce même onglet, si tu sélectionnes un élément, tu as automatiquement une référence dessus via la variable $0, que tu peux utiliser en ligne de commande dans la console. Pratique pour faire une vérification rapidement.

Citation:

Le server ne sera pas perturbé par cette liste. C'est bien, mais en attendant comment fait-on pour récupérer notre choix ?

En fait, si tu essayes une instruction PHP comme print_r($_POST); tu verras une entrée choix_ville. Mais pour être plus cohérent, le champ qui doit porter la valeur, c'est le champ code, celui qui appelle jscode. Tu dois donc modifier la valeur (value) de ce champ dans la fonction codevalid, comme tu le fais déjà avec le champ ville.

Citation:

Sur un nom composé de 2 mots je n'ai que le 1er.
Ce doit surement être une petite erreur de syntaxe. Mais où ?

Ici :

Code:

sel+= "<option value="+V+"> "+V+"</option>";

Il manque des guillemets autour du V qui sert de value. Par exemple si V = "Les Oies", le résultat est "<option value=Les Oies>Les Oies</option>". On voit mieux du coup que seule la partie « Les » est gardée, et que « Oies » est considéré comme un autre attribut, sans valeur, de la balise option.

Citation:

J'ai essayé

Code:

sel+= "<option value="+rawurlencode(V)+"> "+V+"</option>";

mais j'ai une erreur JS !!

EDIT: Ça y est, j'ai trouvé. En fait j'encode directement en PHP

Code:

<input type="hidden" name="ville<?php print $i?>" value= "<?php print rawurlencode($row[1])?>">

Puis en JS j'utilise

Code:

sel+= "<option value="+V+"> "+unescape(V)+"</option>";

Code:

var sel="<select name= 'choix_ville' id= 'choix_ville'onclick=codevalid(this.value)>";

est correcte

Peut être y a -t-il plus simple, mais en attendant ça marche.....

Si tu répares ton souci de guillemet, normalement tu n'auras plus ce problème.

Si tu veux toujours utiliser un encodage en plus des guillemets, je ne suis pas sûr que rawurlencode de PHP et unescape de JS soient parfaitement réciproques. escape et unescape ont été dépréciés en JS car ils ne gèrent pas correctement les symboles unicode au-delà des 128 caractères de la plage ASCII basique. Utilise le couple rawurlencode/rawurldecode en PHP, ou bien encodeURIComponent/decodeURIComponent en JS. Comme je te déconseille d'insérer des bouts de PHP dans du code JS, préfère la seconde option.
13/09/2015, 23h41
LampeRouge

Peut être que vu l'heure, j'ai l'esprit embrumé.

Il me semblait bien que les guillemets étaient bien mis.... ( avant que j'installe mon codage), Je ne saisi pas bien ce que tu veux dire.

Quand j'insère:

Code:

liste.parentNode.removeChild(ville);

Je n'ai plus de liste apparaissant.
C'est bien d'enlever la liste précédente, mais si on ne peut pas y remettre la 2e c'est un peu handicapant.
Je ne comprends pas pourquoi ça fait ça.....

J'ai enlevé unescape() pour le remplacer par decodeURIComponent(). J'espère bien faire. Je n'ai pas constaté de changement sur le résultat. Donc si unescape est déprécié, je garde cette solution.

Je me retape en ce moment 4 ans de travail à cause de la dépréciation de mysql en PHP, donc je sais ce que ce mot veut dire. (Au passage j'essaie d'améliorer le développement).

Comme tu le vois, je n'ai plus l'esprit bien clair. Je reviens dés que possible. Merci pour ton aide. C'est fabuleux.

Avec ta pédagogie, tu devrais dispenser des cours, car ta méthode d'en dire un peu, mais pas trop, oblige à se creuser la cervelle. Je pense aux enseignants, mais aussi à ceux qui bossent à travers internet. (Cours particulier)
14/09/2015, 00h01
Watilin

Donner des cours oui, il y a des gens qui me suggèrent de faire ça ;)

J'ai édité mon précédent message car j'avais fait une coquille : j'avais oublié le $ dans $liste.parentNode.removeChild($liste);. J'ai l'habitude de préfixer d'un $ les variables représentant des objets du DOM, mais ce n'est pas une obligation.

D'ailleurs je me rends compte que j'ai sorti une variable choix_liste de nulle part, je vais corriger ça aussi. Il s'agit en fait de choix_ville.

Quant à ville, si tu la retires, c'est l'histoire du fusil à un coup : ton script ne peut plus insérer de nouvelle liste car il n'y a plus de point de repère dans le DOM autour duquel insérer de nouveaux éléments.
14/09/2015, 19h51
NoSmoking

On ne louera jamais assez les qualités de Watilin ;)

Citation:

...car ta méthode d'en dire un peu, mais pas trop, oblige à se creuser la cervelle.

ce n'est malheureusement pas l'avis de tous les poseurs de question :aie:
17/09/2015, 19h05
LampeRouge
La société est assez injuste quand elle ne permet pas à des gens de valeurs, de s'exprimer.... En attendant, il ne faut pas se décourager et chercher des solutions.

Pour en revenir au sujet, j'ai tenté ça:
Code:

1 2 3 4 if(exist(document.choix_ville)){ liste.parentNode.removeChild(choix_ville); }
Je me demande comment identifié cette liste qui semble-t-il n'appartient pas à mon formulaire.
C'est bizarre.
17/09/2015, 22h54
Watilin
exist… N'existe pas :P Tu n'as pas eu de message dans ta console ?

Quant à $liste, il n'y a pas de magie : tu y accèdes grâce au code que je t'ai donné dans mon post #25. Je te le remets :
Code:

1 2 var $liste = document.getElementById("choix_ville"); $liste.parentNode.removeChild($liste);
Peut-être es-tu embrouillé par cette apparente redondance entre les attributs name et id. En gros, les name dans un formulaire déterminent quelles données doivent être envoyées au serveur, tandis que les id marquent des éléments de la page qui ont une importance pour la navigation (liens contenant un #) ou pour les scripts. Pour résumer :
- name est plus important pour le serveur ;
- id est plus important côté client.

En pratique, les choses sont un peu plus confuses que ça car on peut aussi utiliser les name dans les scripts. C'est ce que tu fais quand tu écris document.form_client. Les choses marchent d'une façon pas si évidente qu'il n'y paraît :
- Si un formulaire a un attribut name et que la valeur de ce name n'est pas une propriété de document, alors le DOM ajoute une référence vers le formulaire sur document. Exemple : <form name="form_client"> est référencé par document.form_client.
- Si la valeur du name est déjà une propriété de document (par exemple location), il y a conflit, et la référence n'est pas créée. Exemple : <form name="location"> ne sera pas référencé par document.location car document.location existe déjà.
- Dans tous les cas, une référence est également créée pour chaque formulaire dans la collection document.forms. Cette collection marche comme les tableaux associatifs de PHP : on peut accéder aux items par index (0, 1, 2…) ou par nom. Exemple : si la page contient ces deux formulaires :
  Code:
  
  1 2 <form name="location"></form> <form name="bidule"></form>
  document.forms[0] et document.forms.location référenceront le premier formulaire, tandis que document.forms[1] et document.forms.bidule référenceront le second.
Comme tu le vois, le référencement direct sur document a une chance de ne pas marcher, car, les navigateurs évoluant, on ne sait pas si une propriété ne sera pas rajoutée demain sur document qui va rentrer en conflit avec le nom de notre formulaire. Dans le doute, passe toujours par document.forms, ou bien utilise les méthodes du DOM pour sélectionner tes éléments.

Note que l'utilisation de name sur les formulaires n'est pas du tout obligatoire, cela n'a pas d'influence sur les données envoyées au serveur.

Cet ajout de références sur document ne concerne que les formulaires. Tu le sais déjà, pour accéder à un champ de formulaire, il faut obligatoirement passer par le formulaire contenant, comme dans document.form_client.total. Cela ne marche qu'avec certains éléments, parmi lesquels les champs de formulaire (heureusement), mais aussi les images, et par contre pas les liens. J'ai fait quelques tests et je ne comprends pas la logique qui se cache derrière (s'il y en a une).

Au final, j'ai pris l'habitude de ne jamais utiliser les name dans mes scripts, et de les cantonner à leur seul rôle de transmettre les données au serveur. Je mets des id aux éléments qui me semblent importants, et j'y accède avec la méthode getElementById, quel que soit leur emplacement dans le code HTML. C'est quand même vachement plus souple.

C'est très intéressant tout ce que tu me dis. Je m'aperçois qu'en tant qu'autodidacte, je prenais de mauvaises habitudes.
N'étant pas borné, je vais essayer d'adopter ce que tu dis. Ça semble très cohérent.

Je te remets le code que j'ai corrigé.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var sel="<select name= 'choix_ville' id= 'choix_ville' onclick=codevalid(this.value)>"; var i, C, V ; var ville = document.getElementById("ville"); ville.parentNode.removeChild("ville"); for(i=0;i<imax;i++){ C = document.getElementById('code' + i).value; if(C.startsWith(jscodePoste)) { // 510==510 début de 51000 V= document.getElementById('ville' + i).value; sel+= "<option value="+V+"> "+decodeURIComponent(V)+"</option>"; } } sel += "</select>"; console.log('sel= ',sel); console.log('V= ',V); ville.insertAdjacentHTML("afterend", sel); // ajoute la liste après le champ ville
Si je mets la ligne

Code:

ville.parentNode.removeChild("ville");

plus rien ne s'affiche.
TypeError: Argument 1 of Node.removeChild is not an object.

Je me suis dis, s'il faut un objet, le seul ayant été créé est "choix_ville" !

Si je mets la ligne

Code:

ville.parentNode.removeChild("choix_ville");

plus rien ne s'affiche encore.
TypeError: Argument 1 of Node.removeChild is not an object.

De plus 1 nouvelle erreur apparait sur la ligne:

Code:

sel+= "<option value="+V+"> "+decodeURIComponent(V)+"</option>";

si mon code_postal fait moins de 5 caractères ???
URIError: malformed URI sequence

Il y a donc un truc que je ne comprends pas. Cependant il me semblait bien faire....

Je me pose une question, dans ton explication: La recherche d'éléments dans le DOM est préférable par les ID. getElementById
Donc si j'ai 2 formulaires de créé et c'est le cas, il convient d'y mettre tous des id différends. Si 2 id sont identiques, je pense que sera celui du 1er formulaire qui sera sélectionné.
A moins qu'il soit possible de différencier chacun des formulaires.
Mon raisonnement est il juste ?

Citation:

Envoyé par LampeRouge

Si je mets la ligne

Code:

ville.parentNode.removeChild("ville");

plus rien ne s'affiche.
TypeError: Argument 1 of Node.removeChild is not an object.

Oui, la console n'est pas très informative sur ce coup. En fait, ton script râle parce que tu lui passes une chaîne, alors qu'il attend un objet du DOM à cet endroit. En l'occurence il attend ville sans guillemets, la référence que tu as obtenue avec getElementById à la ligne d'avant.

Les objets DOM implémentent toute une hiérarchie d'interfaces allant de la plus commune (Node) à la plus spécifique (HTMLInputElement dans notre exemple). Ces noms d'interfaces apparaissent dans certaines documentations, notamment le MDN, et on est un peu embrouillé quand on ne sait pas de quoi il s'agit.

Ces interfaces donnent une sorte de « type » aux objets DOM, bien qu'il ne s'agissent pas d'un type au sens JavaScript. Tu peux vérifier qu'un objet implémente telle interface avec l'opérateur instanceof. Par exemple ville instanceof Node renverra true. Examiner le constructeur est parfois utile également : ville.constructor.name.

Citation:

De plus 1 nouvelle erreur apparait sur la ligne:

Code:

sel+= "<option value="+V+"> "+decodeURIComponent(V)+"</option>";

si mon code_postal fait moins de 5 caractères ???
URIError: malformed URI sequence

Il y a quelques jours je t'avais conseillé d'utiliser les couples de fonctions qui marchent ensemble : soit rawurlencode avec rawurldecode, soit encodeURIComponent avec decodeURIComponent. Je ne suis pas sûr que tu l'aies fait, et le problème pourrait venir de là. Mais plus important encore, puisqu'à la base le souci vient des espaces dans les noms de certaines villes, je t'avais dit que mettre des guillemets corrigerait la situation en un clin d'œil. Quand on y réfléchit, c'est un peu bête de recourir à une fonction d'encodage alors qu'il n'y a qu'un seul caractère qui pose problème.

Le message d'erreur maformed URI sequence a deux causes possibles :
- soit il y a un % qui traîne tout seul ;
- soit il y a une séquence d'octets qui ne correspond pas à un codage UTF-8.

Car il faut savoir que le couple encodeURIComponent/decodeURIComponent repose sur l'encodage UTF-8. Prenons par exemple le caractère « é » : son numéro est 233, soit E9 en hexadécimal. rawurlencode le transforme en %E9, alors que encodeURIComponent renvoie %C3%A9. La mécanique d'UTF-8 fait que les séquences commençant par E doivent faire 3 octets (cf. Wikipédia), du coup decodeURIComponent ne sait pas décoder %E9.

Citation:

Je me pose une question, dans ton explication: La recherche d'éléments dans le DOM est préférable par les ID. getElementById
Donc si j'ai 2 formulaires de créé et c'est le cas, il convient d'y mettre tous des id différends. Si 2 id sont identiques, je pense que sera celui du 1er formulaire qui sera sélectionné.
A moins qu'il soit possible de différencier chacun des formulaires.
Mon raisonnement est il juste ?

Oui :) Même si en fait, on n'est pas censés avoir plusieurs fois le même id dans la page. Dans le cas de plusieurs id identiques, le comportement de getElementById n'est pas défini en théorie, même si en pratique on récupère toujours le premier. Tu peux construire un id unique en concaténant différents mots, comme tu l'as fait par exemple avec document.getElementById('code' + i).

Tu peux aussi combiner différentes méthodes de sélection, qui font que tu n'es pas toujours obligé de donner un id à tous les éléments que tu souhaites manipuler. Par exemple, si tu n'as qu'un seul <select> :
Code:

1 2 3 4 5 <form id="form_client"> <select name="..."> ... </select> </form>
Tu peux y accéder de différentes manières :
Code:

1 2 3 4 5 6 7 document.getElementById("form_client").getElementsByTagName("select")[0] // ou bien document.getElementById("form_client").querySelector("select") // ou bien document.querySelector("#form_client select") // ou bien ...
Il y a tout un tas de façons. querySelector permet d'utiliser une expression de sélection CSS, c'est bien pratique. Cette méthode ne renvoie que le premier élément correspondant, mais querySelectorAll renvoie une collection. Ces deux méthodes sont généralement les plus lisibles.
Pour être exhaustif je te mets également les autres méthodes DOM getElementsBy… qui renvoient des collections, et dont le nom est assez explicite :
- getElementsByTagName : sélection par le nom de balise ;
- getElementsByClassName : sélection par l'attribut class ;
- getElementsByName : sélection par l'attribut name.

19/09/2015, 10h22
LampeRouge
Citation:

Envoyé par Watilin

Oui, la console n'est pas très informative sur ce coup. En fait, ton script râle parce que tu lui passes une chaîne, alors qu'il attend un objet du DOM à cet endroit. En l'occurence il attend ville sans guillemets, la référence que tu as obtenue avec getElementById à la ligne d'avant.

J'avais oublié (déjà) que toutes les variables en JS sont des objets....
Bah, sans les guillemets il me retire bien ville qui est égale à document.getElementById("ville");
Logiquement il me retire mon <input text..... et pas ma liste créer par le JS. (ou peut être aussi en tant qu'enfant)
Le résultat escompté n'est pas le bon ou il est exagéré.

Il faudrait donc reconstitué le <input text.... sans son enfant.

J'ai essayé:

Code:

ville.parentNode.removeChild(ville.firstElementChild.nodeName);

Marche pas.

Code:

ville.parentNode.removeChild(ville.firstElementChild);

Marche toujours pas.
Code:

1 2 3 4 5 var liste = ville.children; if(liste){ ville.parentNode.removeChild(liste); // on retire la précedente liste avant de la recréer. }
TypeError: Argument 1 of Node.removeChild does not implement interface Node.
Arg... encore pas...
Doué comme je suis, ce fil va servir de cas d'école. Je continue mes essais.

Pour le 2e problème, tu me parles de mettre des guillemets au lieu d'encoder... Je veux bien, mais je ne vois pas où.
En fait la 1ere fonction affiche bien: jscode()
C'est la 2e codevalid(nom_ville) qui gère mal les noms composés.
si dans la 1ere function je mets:

Code:

var sel="<select name= 'choix_ville' id= 'choix_ville' onclick=codevalid(\"this.value\")>";

j'obtiens this.value
Si tu me dis que je suis bouché borné etc.... Je te crois sur parole, mais ça ne fait pas avancer le schmilblick.
19/09/2015, 14h38
Watilin
Ok, j'admets que ça peut être difficile de trouver à quel endroit il faut mettre les guillemets. Tu te souviens de mon histoire avec cette ville qui s'appelle Les Oies ? Avec V = "Les Oies", quand ton script remplace toutes les occurences de V dans la ligne suivante :

Code:

sel += "<option value="+V+">" + V + "</option>";

Ça donne ça :

Code:

<option value=Les Oies>Les Oies</option>

On se retrouve donc avec une balise <option> qui a un attribut value=Les, et un attribut Oies qui est « vide ».

Pour éviter ce coupage en deux des attributs, on voudrait avoir des guillemets autour du nom de ville pour que tout reste dans l'attribut value, comme ceci :

Code:

<option value="Les Oies">Les Oies</option>

Comme tu vois la différence est subtile, mais elle est importante. Alors comment ajouter ces guillemets ? Il y a au moins 3 façons.
A. Soit tu utilises la séquence d'échappement \" que tu sembles déjà connaître ;) :
Code:

1 2 sel += "<option value=\""+V+"\">" + V + "</option>"; //--------------------^^-----^^
B. Soit tu utilises des guillemets simples (') pour délimiter tes chaînes JS :

Code:

sel += '<option value="'+V+'">' + V + '</option>';

En JS ça ne fait aucune différence (attention ce n'est pas le cas en PHP, il y a une différence importante).

C. Soit tu utilises des guillemets simples pour délimiter tes attributs HTML :

Code:

sel += "<option value='"+V+"'>" + V + "</option>";

C'est valide en HTML, mais ça t'oblige à échapper les guillemets simples utilisés en tant qu'apostrophes dans les noms de ville (par exemple dans 'L\'Île'), sinon ça pose le même genre de problème qu'avec l'espace. Si tu choisis cette méthode, tu devras appeler replace sur V, ça demande donc un peu de travail supplémentaire au processeur.
Tu peux trouver tout un tas d'autres variantes de ces solutions en échappant le guillemet simple (\') ou encore en utilisant les codes ASCII des guillemets, "\x22" et "\x27" (écris-les dans ta console pour voir).

À toi de choisir la solution qui te convient le mieux ;)

Citation:

Envoyé par LampeRouge

Bah, sans les guillemets il me retire bien ville qui est égale à document.getElementById("ville");
Logiquement il me retire mon <input text..... et pas ma liste créer par le JS. (ou peut être aussi en tant qu'enfant)
Le résultat escompté n'est pas le bon ou il est exagéré.

Il faudrait donc reconstitué le <input text.... sans son enfant.

Alors en fait, <input> est une balise vide, elle n'a pas d'enfant. La liste est sa voisine. Enfin, normalement… Ce qui se passe en réalité, c'est que ton script retire l'input ville, qui du coup se retrouve « en l'air », détaché du DOM. Après ça, il tente d'insérer la liste avec insertAdjacentHTML en utilisant ville comme point d'appui. Le problème, c'est que ville n'est plus dans le DOM. Je viens de vérifier avec ma console, et quand j'essaye ce genre de choses, je reçois une erreur NoModificationAllowedError: Modifications are not allowed for this document. Est-ce que tu vois quelque chose qui ressemble à ça dans ta console ?

Citation:

J'ai essayé:

Code:

ville.parentNode.removeChild(ville.firstElementChild.nodeName);

Marche pas.

Code:

ville.parentNode.removeChild(ville.firstElementChild);

Marche toujours pas.

Le fait que ville n'ait pas d'enfant explique pourquoi ces deux tentatives ont échoué.
Citation:
Code:

1 2 3 4 5 var liste = ville.children; if(liste){ ville.parentNode.removeChild(liste); // on retire la précedente liste avant de la recréer. }

TypeError: Argument 1 of Node.removeChild does not implement interface Node.
Belle tentative :D Mais tu en demandes trop à cette pauvre removeChild, elle n'est pas capable de retirer plusieurs éléments d'un coup. Quand tu demandes children ou childNodes, tu obtiens une collection (comme avec querySelectorAll par exemple), tu dois ensuite la parcourir avec une boucle. Mais de toutes façons, comme on a vu, ville n'a pas d'enfants. Je te dis ça pour que tu comprennes le message d'erreur : une collection de Node n'est pas un Node.

Le problème des guillemets: J'étais persuadé que les " et les ' était différends comme en PHP. J'en apprends encore.
Ce système de "croisement des sigles " m'était inconnu, mais il est génial. On ne se torture plus à encoder....

Pour le 2e problème, j'ai bien retenu que tu me dis que "choix_ville" n'est pas enfant de "ville". Et comme tu m'as appris à rechercher des éléments plutôt par leur ID, je ne suis pas gêné.
Code:

1 2 3 4 5 6 var liste = document.getElementById('choix_ville'); if(liste){ ville.parentNode.removeChild(liste); // on retire la précedente liste avant de la recréer. ville.value= null; }
Maintenant, ça fonctionne correctement. Je vais passer à la suite, c'est à dire définir le code postal depuis la ville.
Le but est que si il n'y a qu'un code, il est inséré directement.
S'il y en a plusieurs ( ce qui peut arriver sur des cedex) on affichera une liste.
Je pense que pour plus de clarté on peut ouvrir un autre fil de discussion.

Je vais essayer de m'en sortir, mais en attendant je te remercie de ce cours magistral, où j'en ai appris pas mal.
Avec mon amitié.

20/09/2015, 10h15
NoSmoking

Tu peux également supprimer tous les enfants d'un élément sans trop te soucier si il en existe !
:faq: Comment supprimer tous les enfants d'un noeud en utilisant les méthodes DOM ?

Fuseau horaire GMT +2. Il est actuellement 21h19.