Afficher les résultat de mon formulaire sur la même page

<!-- INCLURE LE FICHIER JQUERY -->



<?php
// Requête pour récupérer la liste des villes
// enregistrées dans la BDD
$sql='SELECT DISTINCT ville
   FROM client 
   GROUP BY  ville
   ORDER BY ville '; 
$arrVilles=mysql_query($sql); // lancement de la requêtre 

?>

<form action="" method="post">
 VILLE 
 <select  name="ville" id="sel_ville" onclick="afficheVille(this.value);">
 <option value=""></option>
 <?php
 while( $data=mysql_fetch_array($arrVilles)) { 
  $ville = $data['ville'];
  echo "<option value='$ville'>$ville</option>";
 }
 ?>
 </select>

 <script type="text/javascript">
 //Script permettant de rafraichir la page 
 //en fonction de la ville selectionnée
 // Necessite la librairie JQUERY
 function afficheVille(ville){
 urlAjx = "rechercheVille.ajx.php";
  $.ajax({ 
    type: "POST",
     url:urlAjx,
     data: "ville="+ville,
     async: false,
     dataType: "html",
     success: function(data){
       $("#tbody_detail").html(data);
     },
     error:function(reponse){
     alert('error ' + reponse);
     }
  });

 }
 </script>
 <input type="submit" value="RECHERCHER">
 <table border=1" id="tbl_donnees"> 
  <thead>
   <tr> 
    <th> 
    <!-- entête de mon tableau--> 
    </th> 
   </tr> 
  </thead>
  <tbody id="tbody_detail">
  </tbody>
 </table> 
</form>

<?php
//rechercheVille.ajx.php 
//------------------------------------------------------
// >>>>> Penser à Inclure le fichier de connexion à la BDD
//------------------------------------------------------

 $result="";
 $ville=isset($_POST['ville'])?$_POST['ville']:NULL;
 if($ville){ 
  $req='select * from client where ville="'.$_POST['ville'].'"'; 
  $res=mysql_query($req); // lancement de la requêtre 

 while( $data=mysql_fetch_array($res)) {  
 $result .="<tr> 
                   <td><font size=2>".$data['nom']."</font></td> 
                   <td><font size=2>".$data['prenom']."</font></td> 
                   <td><font size=2>".$data['date nais']."</font></td> 
                   <td><font size=2>".$data['ville']."</font></td> 
                   <td><font size=2>".$data['portable']."</font></td> 
                   <td><font size=2>".$data['fixe']."</font></td> 
                   <td><font size=2>".$data['email']."</font></td> 
                   <td><font size=2>".$data['code postal']."</font></td> 
                   <td><font size=2>".$data['adresse']."</font></td> 
                    </tr>";    
  } 
 }
 print ($result);
?>

<script type="text/javascript" src="jquery.js">

<?php
// on se connecte à notre base
$base = mysql_connect ('localhost', 'root', '');
if(!$base)
{die('Erreur de connexion au serveur '.mysql_error());}
$sel=mysql_select_db ('mabase', $base) ;
if(!$sel)
{die('Erreur de connexion '.mysql_error());}
//else{echo ' connexion au server reussit';}

// Requête pour récupérer la liste des villes
// enregistrées dans la BDD
$sql='SELECT DISTINCT ville
   FROM client 
   GROUP BY  ville
   ORDER BY ville '; 
$arrVilles=mysql_query($sql); // lancement de la requêtre 

?>

<form action="" method="post">
 VILLE 
 <select  name="ville" id="sel_ville" onclick="afficheVille(this.value);">
 <option value=""></option>
 <?php
 while( $data=mysql_fetch_array($arrVilles)) { 
  $ville = $data['ville'];
  echo "<option value='$ville'>$ville</option>";
 }
 ?>
 </select>

 <script type="text/javascript">
 //Script permettant de rafraichir la page 
 //en fonction de la ville selectionnée
 // Necessite la librairie JQUERY
 function afficheVille(ville){
 urlAjx = "rechercheVille.ajx.php";
  $.ajax({   
    type: "POST",
     url:urlAjx,
     data: "ville="+ville,
     async: false,
     dataType: "html",
     success: function(data){
       $("#tbody_detail").html(data);
     },
     error:function(reponse){
     alert('error ' + reponse);
     }
  });

 }
 </script>
 <input type="submit" value="RECHERCHER">
 
   <table border=1" id="tbl_donnees"> 
    <thead>
     <tr> 
               <th> <font size=2 color="black">NOM </font></th> <th> <font size=2 color="black">PRENOM</font> </th> <th><font size=2 color="black"> NAISSANCE </font></th>
      <th> <font size=2 color="black">VILLE</font> </th> <th> <font size=2 color="black">PORTABLE</font> </th> <th> <font size=2 color="black">FIXE</font> </th>
      <th> <font size=2 color="black">EMAIL</font> </th> <th> <font size=2 color="black">CODE POSTAL </font></th> <th> <font size=2 color="black">ADRESSE</font> </th>
      <th> <font size=2 color="black">DOSSIER TRAITE</font> </th><th> <font size=2 color="black">CV </font></th>
      
     </tr> 
    </thead>
    <tbody id="tbody_detail">
    
    </tbody>
   </table> 
</form>

<html>
<head>
<title>TEST</title>
</head>
<body>
<script src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
alert ("Jquery OK");
});


</script>

</body>
</html>

if

if (isset($_POST['ville'])) {
    // Ta requête & affichage
}

mapage.php?ville=%22%22%3B%20drop%20table%20client%3B

client

mysql_*