Liste déroulante avec Ajax
Bonjour,
Bonjour à tous ;
J’aurais grandement besoins d’aide pour la création d’un formulaire permettant de calculer la distance entre deux points.
Je souhaiterais créé une requête avec ajax qui me permettrais de créé une liste déroulante.
Ce que je fais
Décrivez ici votre code ou ce que vous cherchez à faire
Ce que je veux
Dans mon formulaire page index.php
J’ai un input pour renseigner le code postal
Dans mon java :
si mon input contient 5 caractères envoi une demande de requête à mon fichier post
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>choix de la ville</title>
</head>
<body>
<form method="POST" action="">
<label for="codepostal">Code postal: </label>
<input type="text" id="codepostal"/><br/>
<label for="ville">Ville: </label>
<select name="ville" id="ville">
<span class="feedback" ></span> <!-- <option value="xxx">xxx</option> -->
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#codepostal').keyup(function(){
var codepostal = document.getElementById("codepostal").value;
if (codepostal.length == 5) { // si taille CP éguale à 5
//var ville = document.getElementById("ville").value;
$.post('post.php', {codepostal:codepostal},function(data){
$('.feedback').text(data); //inscription dans feedback (creation de la liste déroulante)
});
}
});
});
</script>
</body>
</html>Et mon fichier post.php pour ma requête.
<?php
$serveur = 'localhost'; // Serveur
$BDDname = 'test'; // Base de données
$login = 'root'; // Utilisateur
$pass =''; // Mot de passe
try { // teste de connection à la BDD MySQL
$Connexion = new PDO("mysql:host=$serveur;dbname=$BDDname;charset=utf8", $login, $pass); // On se connecte à MySQL
} catch(Exception $e) {
die('Erreur : '.$e->getMessage()); // En cas d'erreur, on affiche un message et on arrête tout
}
$codepostal = $_POST['codepostal'];
$reqette = $Connexion->query("SELECT * FROM ville_france WHERE code_postal = '$codepostal' "); // On récupère tout le contenu de la table
while ($donnees = $reqette->fetch()) { // On affiche chaque entrée une à une
echo '<option value="' . $donnees['ville_nom'] . '">' . $donnees['ville_nom'] . '</option>' ;
}
$reqette->closeCursor(); // Termine le traitement de la requête
?>Ce que j'obtiens
Je n'arrive pas à récuperer mon traitetement
Je pense que l’erreur est dans le retour.
$('.feedback').text(data); //inscription dans feedback (creation de la liste déroulante)Quelqu’un pourais t’il m’aider dans cette réalisation ?
Merci d’avance.
2 réponses
Salut,
Pour ce genre de trucs avec jQuery je fais :
$('.feedback').html(data);Sinon tu peux regarder dans les outils de débug de ton navigateur ce que te renvoie ta requete Ajax. J'utilise Firefox developper edition et dans l'onget "Réseau" de la console il me montre toutes les infos de mon appel Ajax.
Pierre-Louis
Bonjour
Désoler du retard de ma réponse, mais j’avais beaucoup d’idée dans ma tête à tester.
Tout d’abord jais dur revoir mon devoir, tu m’a parfaitement éclairer.
En premier lieux je n’arrivais pas à écrire directement à l’intérieur de ma liste déroulante alors jais contournée en la créant en même temps que ma requête, ainsi je n’écrivais pas dedans mais je l’écrivais tout cours.
Et BINGO sa à marcher
Et pour le reste jais pas mal chercher mais j’avance.
Si cela peut intéresser je partage mon travail.
1 : index.php
Code postal de la ville de départ -> le choix de la ville de départ
Code postal de la ville d’arrivée -> le choix de la ville d’arrivée
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>choix de la ville</title>
</head>
<body>
<form id="rec" method="POST" action="km.php">
<label for="codepdep">Code postal de départ: </label>
<input type="text" id="codepdep"/>
<span class="villedep" ></span>
<br/>
<label style="display:none" id="labcodearv" for="codeparv">Code postal de départ: </label>
<input style="display:none" type="text" id="codeparv"/>
<span class="villedarv" ></span>
<!--<input type="submit" value="Envoyer" />-->
</form>
<span id="calcdist" ></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() { // Quand doccument prêt
$('#codepdep').keyup(function(){ // aprés acction sur une touche dans la zone (input - codepdep)
var codepdep = document.getElementById("codepdep").value; // Mis en mémoir de la valeur
$('input[id=codepdep]').css("background-color", "rgba(255, 125, 0, 0.1)"); // couleur de l'input
if (codepdep.length == 5) { // si taille (string) de la valeur éguale à 5
$.post('postalle.php', {codepdep:codepdep},function(data){ // submit de la valeur
var label = '<label for="villedep">Ville: </label>';
var selecton = '<select name="villedep" id="villedep">';
var primo = '<option value="-1">Choix de la ville</option>';
var selectof = '</select>';
$('.villedep').html(label + selecton + primo + data + selectof); //creation de la liste déroulante
var $localitededep = $('#villedep') ; // pour la zonne cible
$localitededep.on('change', function() { // Si changement de valeur
var valdep = $(this).val(); // on récupère la valeur de la localité un
//alert (val) ;
$('input[id=codepdep]').css("background-color", "rgba(0, 255, 0, 0.1)"); // couleur de l'input
$('label[id=labcodearv]').css("display", "inline"); // Afficher de l'input
$('input[id=codeparv]').css("display", "inline"); // Afficher de l'input
// ************************************** Action 2 ************************************************
$('#codeparv').keyup(function(){ // aprés acction sur une touche dans la zone (input - codeparv)
var codeparv = document.getElementById("codeparv").value; // Mis en mémoir de la valeur
$('input[id=codeparv]').css("background-color", "rgba(255, 125, 0, 0.1)"); // couleur de l'input
if (codeparv.length == 5) { // si taille (string) de la valeur éguale à 5
$.post('postret.php', {codeparv:codeparv},function(datarv){ // submit de la valeur
//alert(datarv);
var labelarv = '<label for="villedarv">Ville: </label>';
var selectarvon = '<select name="villedarv" id="villedarv">';
var primoarv = '<option value="-1">Choix de la ville</option>';
var selectarvof = '</select>';
$('.villedarv').html(labelarv + selectarvon + primoarv + datarv + selectarvof); //creation de la liste déroulante
var $localitedearv = $('#villedarv') ; // pour la zonne cible
$localitedearv.on('change', function() { // Si changement de valeur
var valarv = $(this).val(); // on récupère la valeur de la localité un
$( "#rec" ).submit();
//alert (valdep) ;
//alert (valarv) ;
$('input[id=codeparv]').css("background-color", "rgba(0, 255, 0, 0.1)"); // couleur de l'input
$('#calcdist').html('<br/>De ' + valdep + ' à ' + valarv + ', la distance à vol d\'oiseau est de XXX Km'); //creation de la liste déroulante
$.ajax({ // Création d'une instance de XmlHttpRequest
url : "traitement.php", // on donne l'URL du fichier de traitement
type : "POST", // la requête est de type POST
data : "pseudo=" + valdep + "&message=" + valarv // et on envoie nos données
}); // fin de l'instance de XmlHttpRequest
});
});
}
});
// ****************************************************************************************************************
});
});
}
});
});
</script>
</body>
</html>2 : connect.php
Pour se connecter à la base de données
<?php
$serveur = 'localhost'; // Serveur
$BDDname = 'test'; // Base de données
$login = 'root'; // Utilisateur
$pass =''; // Mot de passe
try { // teste de connection à la BDD MySQL
$Connexion = new PDO("mysql:host=$serveur;dbname=$BDDname;charset=utf8", $login, $pass); // On se connecte à MySQL
} catch(Exception $e) {
die('Erreur : '.$e->getMessage()); // En cas d'erreur, on affiche un message et on arrête tout
}
?>3 :postalle.php
Pour simplement récupérer les infos de la première liste déroulante (Ville de départ)
<?php
include_once("connect.php");
$codepdep = $_POST['codepdep'];
$reqette = $Connexion->query("SELECT * FROM villes_france_free WHERE ville_code_postal = '$codepdep' ORDER BY ville_nom ASC"); // On récupère tout le contenu de la table
while ($donnees = $reqette->fetch()) { // On affiche chaque entrée une à une
echo '<option value="' . $donnees['ville_nom_reel'] . '">' . $donnees['ville_nom'] . '</option>' ;
}
$reqette->closeCursor(); // Termine le traitement de la requête
?>4 : postret.php
Pour simplement récupérer les infos de la deuxième liste déroulante (Ville de retour)
<?php
include_once("connect.php");
$codeparv = $_POST['codeparv'];
$reqette = $Connexion->query("SELECT * FROM villes_france_free WHERE ville_code_postal = '$codeparv' ORDER BY ville_nom ASC"); // On récupère tout le contenu de la table
while ($donnees = $reqette->fetch()) { // On affiche chaque entrée une à une
echo '<option value="' . $donnees['ville_nom_reel'] . '">' . $donnees['ville_nom'] . '</option>' ;
}
$reqette->closeCursor(); // Termine le traitement de la requête
?>5 : km.php
La petite carte avec le calcul de la distance entre les deux villes.
Pour la partie de la carte qui proviens de Google Maps il vous faudra votre clef (c’est gratuit).
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=Fr
Et la doc avec tous pleins d’exemples.
https://developers.google.com/maps/documentation/javascript/tutorial?hl=Fr
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
width: 50%;
height: 400px;
margin: auto;
background-color: grey;
}
</style>
</head>
<body>
<?php
include_once("connect.php");
$villedep = $_POST['villedep'];
$villedarv = $_POST['villedarv'];
$reqette = $Connexion->query("SELECT * FROM villes_france_free WHERE ville_nom_reel = '$villedep' "); // On récupère tout le contenu de la table
while ($donnees = $reqette->fetch()) { // On affiche chaque entrée une à une
$latitude1 = $donnees['ville_latitude_deg'];
$longitude1 = $donnees['ville_longitude_deg'];
}
$reqette->closeCursor(); // Termine le traitement de la requête
$reqette = $Connexion->query("SELECT * FROM villes_france_free WHERE ville_nom_reel = '$villedarv' "); // On récupère tout le contenu de la table
while ($donnees = $reqette->fetch()) { // On affiche chaque entrée une à une
$latitude2 = $donnees['ville_latitude_deg'];
$longitude2 = $donnees['ville_longitude_deg'];
}
$reqette->closeCursor(); // Termine le traitement de la requête
/**
* Calcluler la distance entre 2 points GPS
* fobec 2010 http://www.fobec.com/php5/1026/calculer-distance-entre-villes.html
*/
class GPSDistance {
public static function calc($lat_a, $lon_a, $lat_b, $lon_b) {
$a = pi() / 180;
$lat1 = $lat_a * $a;
$lat2 = $lat_b * $a;
$lon1 = $lon_a * $a;
$lon2 = $lon_b * $a;
$t1 = sin($lat1) * sin($lat2);
$t2 = cos($lat1) * cos($lat2);
$t3 = cos($lon1 - $lon2);
$t4 = $t2 * $t3;
$t5 = $t1 + $t4;
$rad_dist = atan(-$t5/sqrt(-$t5 * $t5 +1)) + 2 * atan(1);
$dist=($rad_dist * 3437.74677 * 1.1508) * 1.6093470878864446;
return $dist;
}
}
$dist=GPSDistance::calc($latitude1, $longitude1, $latitude2, $longitude2);
echo 'La distance a vol d\'oiseau entre (' . $villedep . ') et (' . $villedarv . ') est de : ' . number_format($dist,0) . ' kms';
?>
<?php
echo 'lat ' . $latitude1 ;
echo 'lon ' . $longitude1 ;
?>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: <?php echo $latitude1 ?>, lng: <?php echo $longitude1 ?>};
var ulura = {lat: <?php echo $latitude2 ?>, lng: <?php echo $longitude2 ?>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
var marker = new google.maps.Marker({
position: ulura,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=***[YOUR_API_KEY]***&callback=initMap"
async defer>
</script>
</body>
5 : la base de données.
http://sql.sh/736-base-donnees-villes-francaises