Correction TP3 AJAX
Correction TP3 AJAX
-
Objectifs
- Apprendre à créer un système de saisie semi-automatique pour afficher la suggestion d’entrée à l’utilisateur.
-
Exercice 01
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’application
-
Solution
-
Page: index.php
-
Page: get_localite.php
-
Page: get_delegation.php
-
Page: get_cdePostal.php
<?php
require_once("connexion.php");
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>PHP Liste déroulante</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/script.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<div class="container pl-2">
<a class="navbar-brand" href="#">
<img src="apc_-161.png" alt="">
</a>
</div>
</nav>
<hr >
<div class="row">
<div class="col-sm-12">
<div class="d-flex justify-content-center">
<h3>Liste déroulante dépendante de jQuery – Gouvernorats , délégations et localités</h3>
</div>
<hr>
<div class="d-flex justify-content-center">
<div class="col-sm-6">
<form name="insert" action="" method="post">
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-3 col-form-label">Gouvernorats:</label>
<div class="col-sm-8">
<select onChange="getdelegation(this.value);" name="gouvernorats" id="gouvernorats" class="form-control" >
<option value="">Choisir le gouvernorat </option>
<?php
$reponse = $connexion->query('SELECT * FROM gouvernorats');
while ($donnees = $reponse->fetch())
{ ?>
<option value="<?php echo $donnees['cde_gouv'];?>"><?php echo $donnees['intitule_gouv_fr'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-3 col-form-label">Délégations :</label>
<div class="col-sm-8">
<select onChange="getlocalite(this.value);" name="delegation"
id="delegation-list" class="form-control">
<option value="">Choisir la délégation</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-3 col-form-label">Localités :</label>
<div class="col-sm-8">
<select onChange="getCdePostal(this.value);" name="localite" id="localite-list"
class="form-control">
<option value="">Choisir la localité</option>
</select>
</div>
</div>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-3 col-form-label">Code Postal :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="cdepostal-text"
placeholder="Sélectionner la localité pour afficher le code postal">
<p id="cdepostal-texte"></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
<!--/container-fluid-->
<!-- script references -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php
require_once("connexion.php");
if(!empty($_POST["cde_deleg"]))
{
$reponse = $connexion->prepare("SELECT * FROM localites WHERE cde_deleg =?");
$reponse->execute([$_POST["cde_deleg"]]);
?>
<option value="">Select localité</option>
<?php
while ($donnees = $reponse->fetch())
{
?>
<option value="<?php echo $donnees["cde_local"]; ?>"><?php echo $donnees["intitule_local_fr"]; ?></option>
<?php
}
}
?>
<?php
require_once("connexion.php");
if(!empty($_POST["cde_gouv"]))
{
$reponse = $connexion->prepare("SELECT * FROM delegations WHERE cde_gouv =?");
$reponse->execute([$_POST["cde_gouv"]]);
?>
<option value="">Select délégation</option>
<?php
while ($donnees = $reponse->fetch())
{
?>
<option value="<?php echo $donnees["cde_deleg"]; ?>"><?php echo $donnees["intitule_deleg_fr"]; ?></option>
<?php
}
}
?>
<?php
require_once("connexion.php");
if(!empty($_POST["cde_local"]))
{
$reponse = $connexion->prepare("SELECT cde_postal FROM localites WHERE cde_local=?");
$reponse->execute([$_POST["cde_local"]]);
$donnees = $reponse->fetch();
}
?>
<?php echo $donnees["cde_postal"]; ?>
