Remplir des champs automatiquement

Version imprimable

Bonjour

J'ai créé un select qui est rempli via une table (ici des villes). Lors de la sélection d'une ville, il que je remplisse 4 champs texte.

Ci-dessous le select, les champs à remplir et le JS. Pour le 1er (code_insee) ça fonctionne car je récupère la valeur du select mais comment faire pour les 3 autres ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<select id="localisation" class="custom-select" placeholder="Ville" onchange="remplir(this.value);">
	<option value="">Ville</option>
	<?php
        global $wpdb;
        $sql = $wpdb->get_results("SELECT ville_nom_reel, ville_code_postal, ville_code_commune, ville_longitude_deg, ville_latitude_deg FROM villes_france");
        foreach($sql as $req){
                echo '<option value="'.$req->ville_code_commune.'">'.$req->ville_nom_reel.' ('.$req->ville_code_postal.')</option>';
        }
        ?>
</select>
<input type="text" id="code_insee" name="code_insee" value="" readonly /><!-- doit être rempli avec ville_code_commune -->
<input type="text" id="longitude" name="longitude" value="" readonly /><!-- doit être rempli avec ville_longitude_deg -->
<input type="text" id="latitude" name="latitude" value="" readonly /><!-- doit être rempli avec ville_latitude_deg -->
<input type="text" id="ville_reelle" name="ville_reelle" value="" readonly /><!-- doit être rempli avec ville_nom_reel -->

Code:

1
2
3
4
5
var code_insee = "";
function remplir(valeur){ // La fonction
	code_insee = valeur; // on l'enregistre dans code_insee
	document.getElementById("code_insee").value = code_insee; // On insère code_insee dans le champ
}

Merci d'avance

22/07/2014, 17h17
Bovino

Il existe de nombreuses solutions pour récupérer les informations dont tu as besoin.
• Un appel AJAX qui te renvoie les données depuis le serveur.
• Concaténer les données dans l'attribut value de l'option (avec éventuellement un séparateur) puis les scinder (split()).
• Utiliser les attributs data-*.
• ...

Sinon, ton code est assez maladroit : pourquoi créer une variable globale (code_insee) dont tu n'as pas besoin ? Le paramètre valeur est directement accessible et suffit amplement.
22/07/2014, 17h31
the_tiger85

Citation:

Envoyé par Bovino

Il existe de nombreuses solutions pour récupérer les informations dont tu as besoin.
• Un appel AJAX qui te renvoie les données depuis le serveur.
• Concaténer les données dans l'attribut value de l'option (avec éventuellement un séparateur) puis les scinder (split()).
• Utiliser les attributs data-*.
• ...

Ok, la méthode avec split() à l'air plus simple à réalisée. Aurais-tu un exemple stp ?

Citation:

Envoyé par Bovino

Sinon, ton code est assez maladroit : pourquoi créer une variable globale (code_insee) dont tu n'as pas besoin ? Le paramètre valeur est directement accessible et suffit amplement.

J'ai récupéré le code sur un autre site et ils avaient plusieurs valeurs et je n'ai pas modifié, c'est corrigé ^^

J'ai fait comme ça du coup :
HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<select id="localisation" class="custom-select" placeholder="Ville" onchange="remplir(this.value);">
	<option value="">Ville</option>
	<?php
        global $wpdb;
        $sql = $wpdb->get_results("SELECT ville_nom_reel, ville_code_postal, ville_code_commune, ville_longitude_deg, ville_latitude_deg FROM villes_france");// LIMIT 10
        foreach($sql as $req){
                $code_insee = $req->ville_code_commune;
                $longitude = $req->ville_longitude_deg;
                $latitude = $req->ville_latitude_deg;
                $ville = $req->ville_nom_reel;
                echo '<option value="'.$code_insee.'/'.$longitude.'/'.$latitude.'/'.$ville.'">'.$req->ville_nom_reel.' ('.$req->ville_code_postal.')</option>';
        }
        ?>
</select>
<input type="text" id="code_insee" name="code_insee" value="" readonly />
<input type="text" id="longitude" name="longitude" value="" readonly />
<input type="text" id="latitude" name="latitude" value="" readonly />
<input type="text" id="ville_reelle" name="ville_reelle" value="" readonly />

JS :

Code:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
	function remplir(valeur){
		var myString = valeur;
		var myArray = myString.split('/');
		document.getElementById("code_insee").value = myArray[0];
		document.getElementById("longitude").value = myArray[1];
		document.getElementById("latitude").value = myArray[2];
		document.getElementById("ville_reelle").value = myArray[3];
	}
</script>

Est-ce correct sémantiquement ?

22/07/2014, 17h59
Bovino

Code:

var myString = valeur;

Encore une fois, ça te sert à quoi de déclarer une variable alors que tu as déjà une variable (passée en paramètre) qui contient cette valeur ??? :no:

Citation:

Envoyé par Bovino

Encore une fois, ça te sert à quoi de déclarer une variable alors que tu as déjà une variable (passée en paramètre) qui contient cette valeur ???

J'ai encore voulu courir avant de savoir marcher ^^

Et voilà (j'espère que c'est correct cette fois !) Et j'ai changé le nom de la variable pour la reconnaître
Code:

1 2 3 4 5 6 7 8 9 10 <script type="text/javascript"> function remplir(maville){ var myArray = maville.split('/'); document.getElementById("code_insee").value = myArray[0]; document.getElementById("cp_ville").value = myArray[1]; document.getElementById("longitude").value = myArray[2]; document.getElementById("latitude").value = myArray[3]; document.getElementById("ville_reelle").value = myArray[4]; } </script>
Merci pour ton aide !