Sujet Précédent Sujet Suivant

Lier deux select AJAX

Fermé
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022 - 16 févr. 2022 à 13:54
 max30 - 18 févr. 2022 à 12:46
Bonjour, je cherche votre aide car je souhaite lier mon select quartier au select sous-quartier sans l'actualisation de la page.
Voici comment est structuré ma bdd mysql: 
id   id_parent   quartier_fr    quartier_en
1         0            quartier1          quartier1
2         0            quartier2          quartier2
3         0            quartier3          quartier3
4         0            quartier4          quartier4
.
.
.
101      1          sous-quartier1      sous-quartier1
102      1          sous-quartier2      sous-quartier2
103      1          sous-quartier3      sous-quartier3
  
201      2          sous-quartier4      sous-quartier4
202      2          sous-quartier5      sous-quartier5
203      2          sous-quartier6      sous-quartier6
...


Voici mon code Ajax dans la page formannonce.php: 
<srcipt src='/jquery-3.6.0.js'> </script>
      
       <script>
         $(document).ready(function(){

$('#quartier').on('change'.function(){
 var quartierID= $(this).val();
 if(quartierID){
$.get(
"formannonce.php",
{quartier: quartierID},
function(data){
  $('#sousquartier').html(data);
}

);

 }else{
$('#sousquartier').html('<option>Select quartier First</option>')
 }




});

         });

         </script>


Et les 2 select dans la même page formannonce.php: 


<div id= "c">

             <span><label for="quartier"><?php echo $lang['quartier'];?></label></span> <br>
                <select id="quartier" onchange="choisirsous()" name="quartier">
                <option value="" disabled selected><?php echo $lang['quartier'];?></option>
              <?php
              
           // 1- on récupère les quartiers principaux
$quartiers = getQuartier( 0 );	// 0 : catégories principales (niveau 0)   
$sousquartiers = getQuartier( $quartiers[0]['id'] );   

if($quartiers){
              foreach($quartiers as $quart){


 
 echo "<option value='".$quart['id']."'>".$quart['qua']."</option>";

   
 }
 ?>

</select>
<br> <br>
</div>

<div id="d">

<span><label for="sousquartier"><?php echo $lang['quartier'];?>2</label></span> <br>
                <select id= "sousquartier" name="sousquartier">
                <option value="" disabled selected><?php echo $lang['quartier'];?></option>
              <?php
              
           

  

             
              foreach($sousquartiers as $sq){


 
 echo "<option value='".$sq['id']."'>".$sq['qua']."</option>";

}


}//fin accolade if $quartiers
      
 ?>

</select>

</div>


Auriez-vous une solution ?


Configuration: Windows / Chrome 98.0.4758.82

17 réponses

Réponse 1 / 17
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
16 févr. 2022 à 14:06
Le script Ajax ne doit pas appeler la page dans laquelle tu te trouves mais un fichier php à part, dans lequel tu code la récupération des données dans la base.
0
Réponse 2 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 14:29
Bonjour Jordane,
j'ai séparé le script de la page du formulaire en l'ajoutant dans une page ajax.php, mais le deuxième select n'a pas changé: 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <srcipt src='/jquery-3.6.0.js'> </script>
      
      <script>
        $(document).ready(function(){

$('#quartier').on('change'.function(){
var quartierID= $(this).val();
if(quartierID){
$.get(
"formannonce.php",
{quartier: quartierID},
function(data){
 $('#sousquartier').html(data);
}

);

}else{
$('#sousquartier').html('<option>Select quartier First</option>')
}




});

        });

        </script>
</head>
<body>
    
</body>
</html>
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
16 févr. 2022 à 15:07
Comment se nomme la page sur laquelle tu as tes listes ?
Quel code html / JS as tu dedans ?

Comment se nomme le fichier PHP qui doit aller chercher les infos en BDD pour ta seconde liste ?
Quel code PHP ( et UNIQUEMENT PHP... ) s'y trouve ??
0
Réponse 3 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 16:27
La page où il y a les listes c'est la page du formulaire nommée formannonce.php: J'ai remis le script qui appelle le fichier ajax.php: 
<srcipt src='/jquery-3.6.0.js'> </script>
      
      <script>
        $(document).ready(function(){

$('#quartier').on('change'.function(){
var quartierID= $(this).val();
if(quartierID){
$.get(
"ajax.php",
{quartier: quartierID},
function(data){
 $('#sousquartier').html(data);
}

);

}else{
$('#sousquartier').html('<option>Select quartier First</option>')
}




});

        });

        </script>

Côté Html, il y a le formulaire, et côté Js c'est l'affichage des div Si un select est choisi


Je pense que le fichier PHP qui doit aller chercher les infos en bdd est le suivant: ajax.php 

<?php
include "../cnx.php";
function getQuartier( $id_parent=0 )
{
   global $bdd;
 
   $sql_lang = (!empty(($_SESSION['lang']) && in_array($_SESSION['lang'], ['fr','en']) ))? $_SESSION['lang'] : 'fr'; // on s'assure que la langue est correcte
 
   $sql = "SELECT id, id_parent, quartier_".$sql_lang." AS qua
	FROM quartiers
	WHERE id_parent = :id_parent
	ORDER BY id
	";
 
   try{
      $req = $bdd->prepare($sql);
      $req->execute( array(':id_parent'=>$id_parent) ); 
      $res =  $req->fetchAll(PDO::FETCH_ASSOC);
    }catch(Exception $e){
      echo "Erreur dans la requête " . $sql;
      $res = false;
    }
 
   return $res;
}



if(isset($_GET['quartier'])){



    $sousquartiers = getQuartier( $quartiers[0]['id'] );   

?>
<div id="d">

<span><label for="sousquartier"><?php echo $lang['quartier'];?>2</label></span> <br>
                <select id= "sousquartier" name="sousquartier">
                <option value="" disabled selected><?php echo $lang['quartier'];?></option>
              <?php
              
           

  

             
              foreach($sousquartiers as $sq){


 
 echo "<option value='".$sq['id']."'>".$sq['qua']."</option>";

}

      
 ?>

</select>

</div>





<?php

}


?>
0
Réponse 4 / 17
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
Modifié le 16 févr. 2022 à 16:46
Bonjour,

Le fichjier Ajax.php ne doit contenir QUE DU PHP.

En gros 
<?php
include "../cnx.php";
function getQuartier( $id_parent=0 )
{
   global $bdd;
 
   $sql_lang = (!empty(($_SESSION['lang']) && in_array($_SESSION['lang'], ['fr','en']) ))? $_SESSION['lang'] : 'fr'; // on s'assure que la langue est correcte
 
   $sql = "SELECT id, id_parent, quartier_".$sql_lang." AS qua
 FROM quartiers
 WHERE id_parent = :id_parent
 ORDER BY id
 ";
 
   try{
      $req = $bdd->prepare($sql);
      $req->execute( array(':id_parent'=>$id_parent) ); 
      $res =  $req->fetchAll(PDO::FETCH_ASSOC);
    }catch(Exception $e){
      echo "Erreur dans la requête " . $sql;
      $res = false;
    }
 
   return $res;
}


$q = !empty($_GET['quartier']) ? $_GET['quartier'] : NULL;
if(isset($q)){
    $sousquartiers = getQuartier( $q);   
    echo json_encode( $sousquartiers ) ;
   exit;
}

?>


côté JS,
Il va falloir boucler sur la réponse de l'ajax
un truc du genre : 
if(quartierID){
 $.getJSON("ajax.php",{quartier: quartierID}, function(result){
    console.log('reponse ajax',result);
    $.each(result, function(i, el){
      $("#sousquartier").append( "<option value=''"+el.id+"">"+el.qua+"</option>");
    });
  });


NB: Pense à regarder dans la console JS de ton navigateur ( en ayant pas activé le débugage de l'ajax ( XHR sous Firefoex )), ce qui s'affiche..

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 17:55
J'ai les erreurs suivantes dans la console:
1- Uncaught SyntaxError: missing ) after argument list
=> pour cette ligne: 
$('#quartier').on('change'.function(){


2-Uncaught SyntaxError: Invalid regular expression: missing /
==> Pour cette ligne: 
    $.each(result, function(i, el){
      $("#sousquartier").append( "<option value=''"+el.id+"">"+el.qua+"</option>");
    });
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
16 févr. 2022 à 18:19
Et tu ne vois pas comment corriger tout seul ??

Essaye ça 
if(quartierID){
 $.getJSON("ajax.php",{quartier: quartierID}, function(result){
    console.log('reponse ajax',result);
    $.each(result, function(i, el){
      $("#sousquartier").append( "<option value='"+el.id+"'>"+el.qua+"</option>");
    });
  });
}
0
Réponse 6 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 19:13
J'ai corrigé la première erreur, mais dans la console, il ne reste que celle là:
Uncaught ReferenceError: quartierID is not defined
=> cette ligne:
 $.getJSON("ajax.php",{quartier: quartierID}, function(result){
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
16 févr. 2022 à 19:15
Montre-nous le code complet du fichier qui contient ton formulaire et ton code JavaScript
0
Réponse 7 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 19:26
voici formannoncephp: 
<?php
session_start();
include "../cnx.php";
include '../langues/fb.php';
include "../header.php";


$villesm= getVilles();

?>

<html>


    <head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
      
       <script src='/jquery-3.6.0.js'> </script>
      
      <script>
        $(document).ready(function(){

$('#quartier').on('change',function(){
var quartierID= $(this).val();
if(quartierID){
$.get(
"ajax.php",
{quartier: quartierID},
function(data){
 $('#sousquartier').html(data);
}

);

}else{
$('#sousquartier').html('<option>Select quartier First</option>')
}




});

        });

        </script>
 <div class= "pub">      
    <form action="" method="POST" enctype="multipart/form-data" id="search-form">

        <div align= "center" class="container height-400 d-flex justify-content-center align-items-center">
    <div class="card text-center">
        <div class="py-4 p-2">
            <div class="mt-3 d-flex flex-row justify-content-center">
            <h5 style="font-size: 20px;"><?php echo $lang['infovendeur'];?></h5>


           <?php if(isset($_SESSION['id'])){ ?>
            <span> <label for= "pseudo"><?php echo $_SESSION['pseudo'];?></label> </span> <br>
                <?php } 
                else {?>

                

<span> <label for= "pseudo"><?php echo $lang['pseudo'];?></label> </span> <br>
                <input type="text" id="pseudo" name="pseudo" />
                <button type="button" class="microform"><i class="fas fa-microphone"></i></button>
                <?php } ?>  <br> <br>



                <?php if(isset($_SESSION['id'])){ ?>
                   <span> <label for= "telephone"><?php echo $_SESSION['telephone'];?></label></span><br><br>
                <?php } 
                else {?>
                
                <span><label for="telephone"><?php echo $lang['phoneclient'];?></label></span> <br>
                <input type="tel" id="phone" name="telephone"> <br> <br>
                <?php } ?>




                <?php if(isset($_SESSION['id'])){ ?>
                   <span> <label for= "whatsapp"><?php echo $_SESSION['whatsapp'];?></label></span><br><br>
                <?php } 
                else {?>
                
                <span><label for="whatsapp"><?php echo $lang['whatsapp'];?></label></span> <br>
                <input type="tel" id="whatsapp" name="whatsapp"> <br> <br>
                <?php } ?>





                <?php if(isset($_SESSION['id'])){ ?>
                    <span><label for= "email"><?php echo $_SESSION['email'];?> </label> </span><br><br>
                    <?php } 
                    else {?>

                <span><label for= "email"><?php echo $lang['emailclient'];?> </label></span><br>
                <input type="email" id="email" name="email" /> <br> <br> <br> <br>
                <?php } ?>


                </ul>
        
      
    </div>

                    </div>
                    </div>









    
    <div align= "center" class="container height-400 d-flex justify-content-center align-items-center">
    <div class="card text-center">
        <div class="py-4 p-2">
            <div class="mt-3 d-flex flex-row justify-content-center">
            <h5 style="font-size: 20px;"><?php echo $lang['infoannonce'];?></h5>







                <span>  <label for="categorieannonce"><?php echo $lang['ca'];?></label></span> <br>
                <select id="typecategorie" onchange="choisirsup()" name="categorie" required>

                <option value="" disabled selected><?php echo $lang['categorie'];?></option>
                <?php
	// 1- on récupère les catégories principales
	$categories = getCategories( 0 );	// 0 : catégories principales (niveau 0)
 
	foreach($categories as $C)
	{
		// 2- on récupère les sous-catégories de CETTE catégorie
		$sous_categories = getCategories( $C['id'] ); // (sous-)catégories dont l'id_parent est $C['id']
 
		// Si il n'y a pas de sous-catégories
		if( empty($sous_categories) )
		{
	echo "	<option value='".$C['id']."'>".$C['nom']."</option>"."\n"; // "\n" : passage à la ligne dans le code (lisibilité du code)
		}
		// Sinon (il y a des sous-catégories)
		else
		{
            echo "	<optgroup label ='".$C['nom']."'> "."\n";
 
			// 3 - affichage des sous-catégories
			foreach($sous_categories as $SC)
			{
	echo "<option value='".$SC['id']."'>".$SC['nom']."</option>"."\n";
			}
 
	echo "	</optgroup>";
		}
	}
?>
</select> <br> <br>


<div id="piece">

                <span> <label for= "chambre">Nombre de chambres</label></span> <br>
                <input type="number" id="chambre" name="chambre">  <br> <br>


                <span> <label for= "douche">Nombre de douches</label></span> <br>
                <input type="number" id="douche" name="douche">  <br> <br>

</div>





<div id="infosuperficie"
<span><label for= "superficie"><?php echo $lang['superficie'];?></label></span> <br>
            <input type="number" id="superficie" name="superficie">  <br> <br>

            <span> <label for= "unite"><?php echo $lang['unite'];?></label></span> <br>
            <input type="radio" name="unite" value="m2"> m2 <br>
<input type="radio" name="unite" value="ha">ha
<br> <br> 


</div>







<span><label for="villes"><?php echo $lang['ville'];?></label></span> <br>
                <select id="villes" onchange="choisirquart()" name="villes" required>
                <option value="" disabled selected><?php echo $lang['ville'];?></option>
              <?php  foreach($villesm as $v){


 
 echo "<option value='".$v['id']."'>".$v['ville']."</option>";

   
 }
 ?>

</select>

             <br> <br>



<div id= "moughataa">

             <span><label for="quartier"><?php echo $lang['quartier'];?></label></span> <br>
                <select id="quartier" onchange="choisirsous()" name="quartier">
                <option value="" disabled selected><?php echo $lang['quartier'];?></option>
              <?php
              
           // 1- on récupère les quartiers principaux
$quartiers = getQuartier( 0 );	// 0 : catégories principales (niveau 0)   
$sousquartiers = getQuartier( $quartiers[0]['id'] );   

if($quartiers){
              foreach($quartiers as $quart){


 
 echo "<option value='".$quart['id']."'>".$quart['qua']."</option>";

   
 }
 ?>

</select>
<br> <br>
</div>

<div id="d">

<span><label for="sousquartier"><?php echo $lang['quartier'];?>2</label></span> <br>
                <select id= "sousquartier" name="sousquartier">
                <option value="" disabled selected><?php echo $lang['quartier'];?></option>
              <?php
              
           

  

             
              foreach($sousquartiers as $sq){


 
 echo "<option value='".$sq['id']."'>".$sq['qua']."</option>";

}


}//fin accolade if $quartiers
      
 ?>

</select>

</div>






             <br> <br>





            <span> <label for= "titre"><?php echo $lang['tva'];?></label></span><br>
                <input type="text" id="titre" name="titre"> <button type="button" class="microform"><i class="fas fa-microphone"></i></button> <br> <br>

                <span><label for= "description"><?php echo $lang['description'];?></label></span> <br>
                <textarea id="description" name="description" rows="4" cols="50"> </textarea> <br> <br> <br> <br>

               <span> <label for= "prix"><?php echo $lang['prix'];?></label></span> <br>
                <input type="number" id="prix" name="prix">  <br> <br>

 
                </ul>
        
      
    </div>

                    </div>
                    </div>






                
        <div align= "center" class="container height-400 d-flex justify-content-center align-items-center">
    <div class="card text-center">
        <div class="py-4 p-2">
            <div class="mt-3 d-flex flex-row justify-content-center">
            <h5 style="font-size: 20px;"><?php echo $lang['lesphotos'];?></h5>

               <span> <label for= "image"><?php echo $lang['photo1'];?></label></span>
                <input type="file" id="img1" name="img1" accept="image/png, image/jpeg, image/jpg" > <br><br>
                <span><label for= "image"><?php echo $lang['photo2'];?></label> </span>
                <input type="file" id="img2" name="img2" accept="image/png, image/jpeg, image/jpg"><br><br>
                <span><label for= "image"><?php echo $lang['photo3'];?></label></span>
                <input type="file" id="img3" name="img3" accept="image/png, image/jpeg, image/jpg"> <br><br>
               <span> <label for= "image"><?php echo $lang['photo4'];?></label></span>
                <input type="file" id="img4" name="img4" accept="image/png, image/jpeg, image/jpg"> <br><br>
                <span><label for= "image"><?php echo $lang['photo5'];?></label></span>
                <input type="file" id="img5" name="img5" accept="image/png, image/jpeg, image/jpg"> <br><br>
                <br> <br>





                <input type="submit" id='submit' name="formannonce" value='<?php echo $lang['valider'];?>' /> <br><br>
            </form>
         
            </ul>
        
        </div>
    </div>
</div>


<script>
  //rv
  
  const searchForm = document.querySelector("#search-form");
const searchFormInput = searchForm.querySelector("input"); // <=> document.querySelector("#search-form input");
const info = document.querySelector(".info");

// The speech recognition interface lives on the browser’s window object
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; // if none exists -> undefined

if(SpeechRecognition) {
  console.log("Your Browser supports speech Recognition");
  
  const recognition = new SpeechRecognition();
  recognition.continuous = true;
  recognition.lang = "fr-FR";


  const micBtn = searchForm.querySelector("button");
  const micIcon = micBtn.firstElementChild;

  micBtn.addEventListener("click", micBtnClick);
  function micBtnClick(){
    if(micIcon.classList.contains("fa-microphone")) { 
      recognition.start(); 
    }
    else {
      recognition.stop();
    }
  }

  recognition.addEventListener("start", startSpeechRecognition); // <=> recognition.onstart = function(){...}
  function startSpeechRecognition(){
    micIcon.classList.remove("fa-microphone");
    micIcon.classList.add("fa-microphone-slash");
    searchFormInput.focus();
    console.log("Voice activated, SPEAK");
  }

  recognition.addEventListener("end", endSpeechRecognition); // <=> recognition.onend = function(){...}
  function endSpeechRecognition(){
    micIcon.classList.remove("fa-microphone-slash");
    micIcon.classList.add("fa-microphone");
    searchFormInput.focus();
    console.log("Speech recognition service disconnected");
  }

  recognition.addEventListener("result", resultOfSpeechRecognition); // <=> recognition.onresult = function(event) {...} - Fires when you stop talking
  function resultOfSpeechRecognition(event) {
    const current = event.resultIndex;
    const transcript = event.results[current][0].transcript;
    
    if(transcript.toLowerCase().trim()==="stop recording") {
      recognition.stop();
    }
    else if(!searchFormInput.value) {
      searchFormInput.value = transcript;
    }
    else {
      if(transcript.toLowerCase().trim()==="go") {
        searchForm.submit();
      }
      else if(transcript.toLowerCase().trim()==="reset input") {
        searchFormInput.value = "";
      }
      else {
        searchFormInput.value = transcript;
      }
    }
    // searchFormInput.value = transcript;
    // searchFormInput.focus();
    // setTimeout(() => {
    //   searchForm.submit();
    // }, 500);
  }
  
  info.textContent = 'Voice Commands: "stop recording", "reset input", "go"';
  
}
else {
  console.log("Your Browser does not support speech Recognition");
  info.textContent = "Your Browser does not support Speech Recognition";
}
</script>


<script>

function choisirquart()
{
  var sup= document.getElementById("typecategorie");
  var city= document.getElementById("villes");


  if((sup.value >=101 && sup.value <=106) && (city.value== 1))
  {
    console.log('oui');
    document.getElementById("moughataa").style.display="block"; 

}
else{
  console.log('non');
  document.getElementById("moughataa").style.display="none"; 

}


}

  </script>


<script>

function choisirsous()
{
  var sous= document.getElementById("quartier");



  if(sous.value >= 1 )
  {
    console.log('yes');
    document.getElementById("d").style.display="block"; 

}
else{
  console.log('no');
  document.getElementById("d").style.display="none"; 

}


}

  </script>

<script>
  if(quartierID){
 $.getJSON("ajax.php",{quartier: quartierID}, function(result){
    console.log('reponse ajax',result);
    $.each(result, function(i, el){
      $("#sousquartier").append( "<option value='"+el.id+"'>"+el.qua+"</option>");
    });
  });
}
  </script>



<script>
  //select dynamique
function choisirsup()
{
  var sup= document.getElementById("typecategorie");
  console.log(sup.value);

  if( (sup.value >=101 && sup.value <=106) || (sup.value >=501 && sup.value <=504))
  {
    console.log('ok');
    document.getElementById("infosuperficie").style.display="block"; 

}
else{
  console.log('ko');
  document.getElementById("infosuperficie").style.display="none"; 

}






 /*if(sup.value>=501 && sup.value <=504)
  {
    document.getElementById("infosuperficie").style.visibility="visible"; 

}

else{
  document.getElementById("infosuperficie").style.visibility="hidden"; 

}*/

}

  </script>



    </body>
</html>
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 19:27
Et voici ajax.php 
<?php
include "../cnx.php";
function getQuartier( $id_parent=0 )
{
   global $bdd;
 
   $sql_lang = (!empty(($_SESSION['lang']) && in_array($_SESSION['lang'], ['fr','en']) ))? $_SESSION['lang'] : 'fr'; // on s'assure que la langue est correcte
 
   $sql = "SELECT id, id_parent, quartier_".$sql_lang." AS qua
 FROM quartiers
 WHERE id_parent = :id_parent
 ORDER BY id
 ";
 
   try{
      $req = $bdd->prepare($sql);
      $req->execute( array(':id_parent'=>$id_parent) ); 
      $res =  $req->fetchAll(PDO::FETCH_ASSOC);
    }catch(Exception $e){
      echo "Erreur dans la requête " . $sql;
      $res = false;
    }
 
   return $res;
}


$q = !empty($_GET['quartier']) ? $_GET['quartier'] : NULL;
if(isset($q)){
    $sousquartiers = getQuartier( $q);   
    echo json_encode( $sousquartiers ) ;
   exit;
}

?>
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
16 févr. 2022 à 19:57
Il manque du code dans ton JavaScript.....
.

Je ne t'ai donné qu'une partie du code à modifier je ne t'ai pas dit de tout remplacer....

Il faudrait vraiment que tu essayes de comprendre à minimum ce que font les codes que l'on te donne au lieu de les copier-coller bêtement en faisant n'importe quoi
0
Réponse 8 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 22:33
Si j'ai bien compris il fallait ajouter le code dans le 
 $(document).ready(function(){
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 22:37
En le faisant j'obtiens l'erreur suivante: Uncaught SyntaxError: Unexpected end of input
Depuis tout à l'heure j'essaie de mettre le code en message mais on m'affiche Access Denied
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
16 févr. 2022 à 23:02
Il te manque surtout 
$('#quartier').on('change'.function(){
var quartierID= $(this).val();

Et les accolades / parenthèses de fin qui vont avec bien entendu...
0
Réponse 9 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 23:02
Voici en image le code, je n'ai pas pu le copier à cause l'access denied
0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 23:06
La syntaxe n'est pas facile la première fois, et donc j'ignore si il y a une accolade ou une parenthèse qui manque
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
16 févr. 2022 à 23:17
Visiblement il manque une parenthèse et un point virgule sur ta dernière accolade.
0
Réponse 10 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
Modifié le 16 févr. 2022 à 23:24
En le faisant, c'est Uncaught SyntaxError: Unexpected token ')' qui s'affiche dans la console 
   $("#sousquartier").append( "<option value='"+el.id+"'>"+el.qua+"</option>");

    });
  });

});


Et en enlevant on retrouve la même erreur
0
Réponse 11 / 17
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 févr. 2022 à 11:59
Ce n'est pourtant pas dûr de voir où mettre les accolades et les parenthèses ... surtout quand le code est bien indenté ..


et au pire.. il faut compter...

En gros 

        $("#sousquartier").append( "<option value='"+el.id+"'>"+el.qua+"</option>");
      }); // ferme le each
    }); // ferme le getJson
  } // ferme le if
}); // ferme le on change


0
Réponse 12 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
17 févr. 2022 à 13:18
Maintenant c'est plus facile, et j'ai ajouté une autre pour le document ready et pas de problème dans le script. Pour le select du sousquartier, c'est toujours les sousquartiers du 1er select(dont l'id=1 et id_parent=0) qui s'affichent. Pas d'erreur dans la console, et non plus de message
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 févr. 2022 à 13:22
Sachant que dans le code que je t'ai donné il y a
Un console.log(
Tu as obligatoirement des choses afficher dans cette console...
Vide bien ton cash, choisi un quartier dans ta première liste, et fais-nous une capture écran de la console
0
Réponse 13 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
17 févr. 2022 à 13:55
Voici la capture d'écran. Uniquement les console log des script transmis en haut qui sont sont affichés. Par exemple le yes quand on choisi un quartier dans la fonction choisirsous:
0
Réponse 14 / 17
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 févr. 2022 à 17:16
N'aurais tu pas d'autres codes JS dans ton fichier ?
Il serait bien de nous remontrer l'intégralité du code html + javascript que tu as actuellement....
0
Réponse 15 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
18 févr. 2022 à 02:31
Depuis un bon moment j'essaie de montrer l'intégralité du code, mais j'ai ACCESS DENIED.
0
Réponse 16 / 17
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
18 févr. 2022 à 02:49
Mais voici les captures d'écran:







0
max30_3775 Messages postés 178 Date d'inscription jeudi 4 novembre 2021 Statut Membre Dernière intervention 18 mars 2022
18 févr. 2022 à 02:50
Est-ce à cause des balises styles?
0
Réponse 17 / 17
max30
18 févr. 2022 à 12:45 


  <style>
      /*/photo header*/

      html,
body {
  margin: 0;
  padding: 0;
}
/* ------------------------------- */
/* MENU */
#menu {
  position: relative;
  width: 100%;
  
}
#menu ul,
#menu li,
#menu li a {
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  list-style: none;
  z-index:1;
}
#menu ul {
  width: 100%;
  background:#FFA500;/*orange*/
  font-weight: bold;
}
#menu ul li a {
  display: block;
  color:#873600;/*dark orange*/
  padding: 20px 30px;
  position: relative;
  text-decoration: none;
  height:100%;
}
/* --------------- */
/* MENU : niveau 1 */
#menu nav > ul > li > a {
 color: white;
}
/* --------------- */
/* MENU : niveau 2 */
#menu ul ul {
  color:white;
  background:#f4d03f;/*jaune-orange*/
}
#menu ul ul li > a {
  padding: 15px 30px;
  font-size: 10px bold;
  color:white;/*dark orange*/
}
 
/* --------------- */
/* HOVER : afficher/masquer les SOUS-MENUS*/
#menu ul li > ul {
  display: none; /*on masque le SOUS-MENU*/
}
#menu ul li:hover > ul {
  display: block; /*on affiche le SOUS-MENU*/
}
#menu nav > ul > li.active > a, /* MENU : niveau 1 ACTIF */
#menu ul li:hover > a {
  color:#21618c;/*bleu*/
  background: silver;
}
#menu nav > ul > li.active > a:before, /* MENU : niveau 1 ACTIF */
#menu nav > ul > li:hover > a:before {
  position:absolute;
  content:'';
  display:block;
  top:0; left:0;
  width:100%;
  height:5px;
  background:#f4d03f;/*jaune-orange*/
}
 
/* ---------- responsive  --------- */
/* DESKTOP : menu horizontal */
@media screen and (min-width: 769px) {
  #menu nav > ul {
    display: -webkit-flex;
    display: flex;
  }
  /*  niveau 1 */
  #menu nav > ul > li {
    -webkit-flex: 1 1 1%; /* astuce : 1% pour même largeur */
    flex: 1 1 1%;
  }
  #menu nav > ul > li > a {
  }
  /*  niveau 2  */
  #menu nav > ul ul {
    position: absolute;
    width: 200%;
  }
}
/* ------------------------------- */
/* PHONE : menu vertical */
@media screen and (max-width: 768px) {
  #menu {
    width: 100%;
    margin:0 auto;
    height:7px;
  }
}
/* ------------------------------- */
/* MENU*/
nav input[type=checkbox],
nav label {
  display:none;
}
@media screen and (max-width: 768px) {
  /* input */
  input#menu-mobile {
    position: absolute;
    /*xxleft: -9999em;*/
    opacity:0; /* invisible */
  }
  label[for="menu-mobile"] {
    display: block;
    text-indent: .25em;
    background: #EEE;
    border: 1px solid #CCC;
    margin: 1px;
    cursor: pointer;
    height:48px;
    line-height:48px;
  }
  label[for="menu-mobile"]:before {
    content: "\2630";  
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1em;
    text-align: center;
    text-indent: 0;
    font-size: 1em;
    font-weight: bold;
    color: #069;
  }
  /* on traite la liste menu */
  #menu-mobile:not(:checked) ~ ul {
    display: none;
    position: absolute;
    left: -1px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: inherit;
    background: #FFF;
  }
  #menu-mobile:checked ~[for="menu-mobile"]:before {
    content: "\2716";
  }
}
.col-sm-6{
flex: 0 0 50%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
    max-width: 50%;
}

.depot {
     color: white;
     text-decoration: none;
     outline: none !important;
}


.submit_bt{
  position: absolute;
  right: 20px;
     font-size: 14pt; 
     color: #ffffff;
     background-color: #69c934;
     border: 0px;
     height: 50px;
     padding: 0px 20px;
     margin-top: 30px;
}

.white-color{
  color: white;
}
 
 .maquette{
   color: black;
 }

.submit_bt a:hover{ color: #000; }

.search_main{ width: 78%; float: right; }




.sousnav{
    display: grid;
    grid-template-columns: 1fr 5fr 5fr 5fr;
    grid-template-rows: 1fr 20fr 20fr;
    grid-template-areas:
        "lo social connect connect"
        "lo social lg search"    ;
    height: 100px;
    margin-top: 45px;
}

.nav-item{
    grid-area: connect;
    display: flex; /* on remet en flex */
    justify-content :flex-end; /* on aligne les items dans flex*/

    height: 30px;
    font-weight:bold;
margin-right:10px;

    
  
}

.nav-item i{
  padding-left:15px;
}

.search_main{
    grid-area: search;  
    display: flex; /* on remet en flex */
    justify-content :flex-end; /* on aligne les items dans flex*/
    padding-right: 20px;  
    margin-top:10px;
}

.socialmedia{
    grid-area: social;
    display: flex; /* on remet en flex */
    justify-content: center;
    width: 110px;
    height: 30px;


    padding-left:10px;
 
}

.socialmedia i{
    padding-right:10px;
}

.nav-link{
 color:black;
 text-decoration: none;
  outline: none !important;
  
}
.logo{
  grid-area: lo;
  background: url('/lewedli.jpg');
  background-repeat:no-repeat;
  width: 140px;
  height: 125px;
  display:flex;
    align-items: start;
    margin-bottom: 20px;
    
}



.LatinLanguage{
    grid-area: lg;
    display: flex; /* on remet en flex */
    justify-content: center;
height:30px;
    width: 180px;
    margin-top: 10px;

}

.langues{
  color: blue;
  font-weight: bold;
  margin-left:5px;
  font-size: 12px;
  text-decoration: none;
  outline: none !important;
}





/*Bouton*/

/*.styled {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: #FFA500;
  background-image: linear-gradient(to top left,
                                    rgba(0, 0, 0, .2),
                                    rgba(0, 0, 0, .2) 30%,
                                    rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
              inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.styled:hover {
  background-color: #008000;
}

.styled:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
              inset 2px 2px 3px rgba(0, 0, 0, .6);
}

.icons{
text-align: right;
vertical-align: 30px;
padding: 0px;
margin-right: 20px
}

.boutons{
text-align: right;
vertical-align: 50px;
padding: 20px;
}*/


      </style>

<header>
<div id= "containermenu">
<div id= "rowmenu">

<div id="menu">
<nav>
  <label for="menu-mobile" class="menu-mobile">Menu</label>
  <input type="checkbox" id="menu-mobile" role="button">

  <ul> <li class='menu'><a href="/index.php">Accueil</a>

 <li class='menu'><a href='/principales/affichage.php?id=1'>Immobilier</a><ul><li class='submenu'><a href='/principales/affichage.php?id=101'>Vente de Maisons </a></li><li class='submenu'><a href='/principales/affichage.php?id=102'>Location de Maison </a></li><li class='submenu'><a href='/principales/affichage.php?id=103'>Vente Appartement </a></li><li class='submenu'><a href='/principales/affichage.php?id=104'>Location Appartement </a></li><li class='submenu'><a href='/principales/affichage.php?id=105'>Bureau </a></li><li class='submenu'><a href='/principales/affichage.php?id=106'>Terrain </a></li></ul></li><li class='menu'><a href='/principales/affichage.php?id=2'>Véhicules</a><ul><li class='submenu'><a href='/principales/affichage.php?id=201'>Voitures </a></li><li class='submenu'><a href='/principales/affichage.php?id=202'>Motos </a></li><li class='submenu'><a href='/principales/affichage.php?id=203'>Pièces et Accessoires pour Véhicules </a></li><li class='submenu'><a href='/principales/affichage.php?id=204'>Vélos </a></li><li class='submenu'><a href='/principales/affichage.php?id=205'>Véhicules Professionnels </a></li></ul></li><li class='menu'><a href='/principales/affichage.php?id=3'>Multimédia</a><ul><li class='submenu'><a href='/principales/affichage.php?id=301'>Téléphones </a></li><li class='submenu'><a href='/principales/affichage.php?id=302'>Télévisions </a></li><li class='submenu'><a href='/principales/affichage.php?id=303'>Ordinateurs Portables </a></li><li class='submenu'><a href='/principales/affichage.php?id=304'>Accessoires Informatiques </a></li><li class='submenu'><a href='/principales/affichage.php?id=305'>Ordinateurs de Bureaux </a></li></ul></li><li class='menu'><a href='/principales/affichage.php?id=4'>Cours</a><ul><li class='submenu'><a href='/principales/affichage.php?id=401'>Cours Individuels </a></li><li class='submenu'><a href='/principales/affichage.php?id=402'>Cours Collectifs </a></li></ul></li><li class='menu'><a href='/principales/affichage.php?id=5'>Agriculture</a><ul><li class='submenu'><a href='/principales/affichage.php?id=501'>Vente de terrain agricole </a></li><li class='submenu'><a href='/principales/affichage.php?id=502'>Location de terrain agricole </a></li><li class='submenu'><a href='/principales/affichage.php?id=503'>Vente de tracteurs </a></li><li class='submenu'><a href='/principales/affichage.php?id=504'>Location de tracteurs </a></li></ul></li><li class='menu'><a href='/principales/affichage.php?id=20'>Autres...</a><ul></ul></li></ul>
</nav>  
</div>



  <div class= "sousnav">

	


        <div class="nav-item">
                <a class="nav-link" href="/principales/connexion.php">
                  <i class="fa fa-user" aria-hidden="true"></i>
                  <span>
                  Connexion                  </span>
                </a>
        
                <a class="nav-link" href="/principales/register.php">
                  <i class="fa fa-user" aria-hidden="true"></i>
                  <span>
                  Inscription                  </span>
                </a>
</div>


<div class="search_main">
                    <button class="submit_bt"><a class='depot' href="/principales/formannonce.php"><span class="doctor"><i class='fa fa-plus white-color'></i></span> Déposer une annonce</a></button>
				    </div>

  

<div class="socialmedia">
<a href="#"><i class="fab fa-facebook-f "></i></a>
  	 				<a href="#"><i class="fab fa-twitter"></i></a>
  	 				<a href="#"><i class="fab fa-instagram"></i></a>
  	 				<a href="#"><i class="fab fa-linkedin-in"></i></a>

</div>



<div class="logo"></div> 


<div class ="LatinLanguage">


<div class="language">
<i class="fa fa-globe" aria-hidden="true"></i>
<a class= "langues" href="/index.php?lang=fr"> Français </a>
<a class= "langues" href="/index.php?lang=en">English </a>
<a class= "langues" href="/index.php?lang=ar">العربية</a>
</div>

</div>


</div>







</header>
<html>


    <head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
      
       <script src='/jquery-3.6.0.js'> </script>

       <script>
        $(document).ready(function(){
$('#quartier').on('change',function(){
var quartierID= $(this).val();
if(quartierID){
 $.getJSON("/principales/ajax.php",{quartier:quartierID}, function(result){
    console.log('reponse ajax',result);
    $.each(result, function(i, el){
      $("#sousquartier").append("<option value='"+el.id+"'>"+el.qua+"</option>");
      }); // ferme le each
    }); // ferme le getJson
  } // ferme le if
}); // ferme le on change
        });

</script>

      <style>

      <style>
         body {
            line-height: 1.5;
	font-family: 'Poppins', sans-serif;
    background-color: #eee
}
input{
    display: inline-block;
}

.height-100 {
    height: 150vh
}
.card {
    margin-bottom: 100px;
   margin-top: 100px;
    width: 400px;
    border: 2px solid orange;
}
.btn {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: #FFA500;
  background-image: linear-gradient(to top left,
                                    rgba(0, 0, 0, .2),
                                    rgba(0, 0, 0, .2) 30%,
                                    rgba(0, 0, 0, 0));
  box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
              inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.btn:hover {
  background-color: #008000;
}

.btn:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
              inset 2px 2px 3px rgba(0, 0, 0, .6);
}


.list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px;
    border-top: 1px solid #eee;
    cursor: pointer
}

.list li:hover {
    background-color: silver;
    color: #fff
}

.pub{margin-top: 100px;
  
}

#infosuperficie{
  display:none;
}
#moughataa{
  display:none;
}
#d{
  display:none;
}

#piece{
  display:none;
}

       </style>
    </head>
    <body>
    
    








            
    <div class= "pub">      
    <form action="" method="POST" enctype="multipart/form-data" id="search-form">

        <div align= "center" class="container height-400 d-flex justify-content-center align-items-center">
    <div class="card text-center">
        <div class="py-4 p-2">
            <div class="mt-3 d-flex flex-row justify-content-center">
            <h5 style="font-size: 20px;">Informations du vendeur</h5>


           
                

<span> <label for= "pseudo">Nom ou pseudo</label> </span> <br>
                <input type="text" id="pseudo" name="pseudo" />
                <button type="button" class="microform"><i class="fas fa-microphone"></i></button>
                  <br> <br>



                                
                <span><label for="telephone">Téléphone</label></span> <br>
                <input type="tel" id="phone" name="telephone" maxlength="20"> <br> <br>
                



                                
                <span><label for="whatsapp">Whatsapp</label></span> <br>
                <input type="tel" id="whatsapp" name="whatsapp" maxlength="20"> <br> <br>
                




                
                <span><label for= "email">Email </label></span><br>
                <input type="email" id="email" name="email" maxlength="50"/> <br> <br> <br> <br>
                

                </ul>
        
      
    </div>

                    </div>
                    </div>









    
    <div align= "center" class="container height-400 d-flex justify-content-center align-items-center">
    <div class="card text-center">
        <div class="py-4 p-2">
            <div class="mt-3 d-flex flex-row justify-content-center">
            <h5 style="font-size: 20px;">Informations de l'annonce</h5>







                <span>  <label for="categorieannonce">Catégorie de votre annonce</label></span> <br>
                <select id="typecategorie" onchange="choisirsup();choisirnbre()" name="categorie" required>

                <option value="" disabled selected>Catégorie</option>
                	<optgroup label ='Immobilier'> 
<option value='101'>Vente de Maisons</option>
<option value='102'>Location de Maison</option>
<option value='103'>Vente Appartement</option>
<option value='104'>Location Appartement</option>
<option value='105'>Bureau</option>
<option value='106'>Terrain</option>
	</optgroup>	<optgroup label ='Véhicules'> 
<option value='201'>Voitures</option>
<option value='202'>Motos</option>
<option value='203'>Pièces et Accessoires pour Véhicules</option>
<option value='204'>Vélos</option>
<option value='205'>Véhicules Professionnels</option>
	</optgroup>	<optgroup label ='Multimédia'> 
<option value='301'>Téléphones</option>
<option value='302'>Télévisions</option>
<option value='303'>Ordinateurs Portables</option>
<option value='304'>Accessoires Informatiques</option>
<option value='305'>Ordinateurs de Bureaux</option>
	</optgroup>	<optgroup label ='Cours'> 
<option value='401'>Cours Individuels</option>
<option value='402'>Cours Collectifs</option>
	</optgroup>	<optgroup label ='Agriculture'> 
<option value='501'>Vente de terrain agricole</option>
<option value='502'>Location de terrain agricole</option>
<option value='503'>Vente de tracteurs</option>
<option value='504'>Location de tracteurs</option>
	</optgroup>	<option value='20'>Autres...</option>
</select> <br> <br>


<div id="piece">

                <span> <label for= "chambre">Nombre de chambres</label></span> <br>
                <input type="number" id="chambre" name="chambre">  <br> <br>


                <span> <label for= "douche">Nombre de douches</label></span> <br>
                <input type="number" id="douche" name="douche">  <br> <br>

</div>





<div id="infosuperficie"
<span><label for= "superficie">Superficie</label></span> <br>
            <input type="number" id="superficie" name="superficie">  <br> <br>

            <span> <label for= "unite">Unité</label></span> <br>
            <input type="radio" name="unite" value="m2"> m2 <br>
<input type="radio" name="unite" value="ha">ha
<br> <br> 


</div>







<span><label for="villes">Ville</label></span> <br>
                <select id="villes" onchange="choisirquart()" name="villes" required>
                <option value="" disabled selected>Ville</option>
              <option value='1'>Nouakchott</option><option value='2'>Nouadhibou</option><option value='3'>Atar</option><option value='4'>Rosso</option><option value='5'>Zouerate</option><option value='6'>Kaedi</option><option value='7'>Kiffa</option><option value='8'>Adelbagrou</option><option value='9'>Boutilimitt</option><option value='10'>Mal</option><option value='11'>Bareina</option><option value='12'>Gouraye</option><option value='13'>Chinguetti</option><option value='14'>Oualata</option><option value='15'>Tichitt</option><option value='16'>Ouadane</option><option value='17'>Nema</option><option value='18'>Aleg</option><option value='19'>Tidjikdja</option><option value='20'>Koumbi</option><option value='21'>Selibabi</option><option value='22'>Aioun</option><option value='23'>Rkiz</option><option value='24'>Bassikounou</option><option value='25'>Guerou</option><option value='26'>Djigueni</option><option value='27'>Benichab</option><option value='28'>Bababe</option><option value='29'>Tintane</option><option value='30'>Keurmacene</option><option value='31'>Ntékane</option><option value='32'>Mederdra</option>
</select>

             <br> <br>



<div id= "moughataa">

             <span><label for="quartier">quartier</label></span> <br>
                <select id="quartier" onchange="choisirsous()" name="quartier">
                <option value="" disabled selected>quartier</option>
              <option value='1'>Araffatt</option><option value='2'>Dar-Naim</option><option value='3'>El Mina</option><option value='4'>Ksar</option><option value='5'>Riyadh</option><option value='6'>Sebkha</option><option value='7'>Tevragh-Zeina</option><option value='8'>Teyaret</option><option value='9'>Toujounine</option>
</select>
<br> <br>
</div>

<div id="d">

<span><label for="sousquartier">quartier2</label></span> <br>
                <select id= "sousquartier" name="sousquartier">
                <option value="" disabled selected>quartier</option>
              <option value='101'>Carrefour</option><option value='102'>El Velouja</option><option value='103'>Tensweilem</option><option value='104'>Poteau 3</option><option value='105'>Poteau 4</option><option value='106'>Poteau 6</option><option value='107'>Poteau 11</option><option value='108'>Mosquée Nour</option><option value='109'>Beit Police</option>
</select>

</div>






























             <br> <br>











            <span> <label for= "titre">Titre de votre annonce</label></span><br>
                <input type="text" id="titre" name="titre" maxlength="35"> <button type="button" class="microform"><i class="fas fa-microphone"></i></button> <br> <br>

                <span><label for= "description">Description</label></span> <br>
                <textarea id="description" name="description" rows="4" cols="50"> </textarea> <br> <br> <br> <br>

               <span> <label for= "prix">Prix en MRO</label></span> <br>
                <input type="number" id="prix" name="prix">  <br> <br>

 
                </ul>
        
      
    </div>

                    </div>
                    </div>






                
        <div align= "center" class="container height-400 d-flex justify-content-center align-items-center">
    <div class="card text-center">
        <div class="py-4 p-2">
            <div class="mt-3 d-flex flex-row justify-content-center">
            <h5 style="font-size: 20px;">Les Photos</h5>

               <span> <label for= "image">Photo1</label></span>
                <input type="file" id="img1" name="img1" accept="image/png, image/jpeg, image/jpg" > <br><br>
                <span><label for= "image">Photo2</label> </span>
                <input type="file" id="img2" name="img2" accept="image/png, image/jpeg, image/jpg"><br><br>
                <span><label for= "image">Photo3</label></span>
                <input type="file" id="img3" name="img3" accept="image/png, image/jpeg, image/jpg"> <br><br>
               <span> <label for= "image">Photo4</label></span>
                <input type="file" id="img4" name="img4" accept="image/png, image/jpeg, image/jpg"> <br><br>
                <span><label for= "image">Photo5</label></span>
                <input type="file" id="img5" name="img5" accept="image/png, image/jpeg, image/jpg"> <br><br>
                <br> <br>





                <input type="submit" id='submit' name="formannonce" value='valider' /> <br><br>
            </form>
         
            </ul>
        
        </div>
    </div>
</div>


<script>
  //rv
  
  const searchForm = document.querySelector("#search-form");
const searchFormInput = searchForm.querySelector("input"); // <=> document.querySelector("#search-form input");
const info = document.querySelector(".info");

// The speech recognition interface lives on the browser’s window object
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; // if none exists -> undefined

if(SpeechRecognition) {
  console.log("Your Browser supports speech Recognition");
  
  const recognition = new SpeechRecognition();
  recognition.continuous = true;
  recognition.lang = "ar-AR";


  const micBtn = searchForm.querySelector("button");
  const micIcon = micBtn.firstElementChild;

  micBtn.addEventListener("click", micBtnClick);
  function micBtnClick(){
    if(micIcon.classList.contains("fa-microphone")) { 
      recognition.start(); 
    }
    else {
      recognition.stop();
    }
  }

  recognition.addEventListener("start", startSpeechRecognition); // <=> recognition.onstart = function(){...}
  function startSpeechRecognition(){
    micIcon.classList.remove("fa-microphone");
    micIcon.classList.add("fa-microphone-slash");
    searchFormInput.focus();
    console.log("Voice activated, SPEAK");
  }

  recognition.addEventListener("end", endSpeechRecognition); // <=> recognition.onend = function(){...}
  function endSpeechRecognition(){
    micIcon.classList.remove("fa-microphone-slash");
    micIcon.classList.add("fa-microphone");
    searchFormInput.focus();
    console.log("Speech recognition service disconnected");
  }

  recognition.addEventListener("result", resultOfSpeechRecognition); // <=> recognition.onresult = function(event) {...} - Fires when you stop talking
  function resultOfSpeechRecognition(event) {
    const current = event.resultIndex;
    const transcript = event.results[current][0].transcript;
    
    if(transcript.toLowerCase().trim()==="stop recording") {
      recognition.stop();
    }
    else if(!searchFormInput.value) {
      searchFormInput.value = transcript;
    }
    else {
      if(transcript.toLowerCase().trim()==="go") {
        searchForm.submit();
      }
      else if(transcript.toLowerCase().trim()==="reset input") {
        searchFormInput.value = "";
      }
      else {
        searchFormInput.value = transcript;
      }
    }
    // searchFormInput.value = transcript;
    // searchFormInput.focus();
    // setTimeout(() => {
    //   searchForm.submit();
    // }, 500);
  }
  
  info.textContent = 'Voice Commands: "stop recording", "reset input", "go"';
  
}
else {
  console.log("Your Browser does not support speech Recognition");
  info.textContent = "Your Browser does not support Speech Recognition";
}
</script>


<script>

function choisirquart()
{
  var sup= document.getElementById("typecategorie");
  var city= document.getElementById("villes");


  if((sup.value >=101 && sup.value <=106) && (city.value== 1))
  {
    console.log('oui');
    document.getElementById("moughataa").style.display="block"; 

}
else{
  console.log('non');
  document.getElementById("moughataa").style.display="none"; 

}


}




  </script>

<script>
function choisirsous()
{
  var sous= document.getElementById("quartier");



  if(sous.value >= 1 )
  {
    console.log('yes');
    document.getElementById("d").style.display="block"; 

}
else{
  console.log('no');
  document.getElementById("d").style.display="none"; 

}


}
  </script>



<script>
  //select dynamique
function choisirsup()
{
  var sup= document.getElementById("typecategorie");
  console.log(sup.value);

  if( (sup.value >=101 && sup.value <=106) || (sup.value >=501 && sup.value <=504))
  {
    console.log('ok');
    document.getElementById("infosuperficie").style.display="block"; 

}
else{
  console.log('ko');
  document.getElementById("infosuperficie").style.display="none"; 

}


}

  </script>



<script>
 function choisirnbre(){

  var nbre= document.getElementById("typecategorie");
  console.log(nbre.value);

  if(nbre.value >=101 && nbre.value <=104)
  {
    console.log('ok');
    document.getElementById("piece").style.display="block"; 

}
else{
  console.log('ko');
  document.getElementById("piece").style.display="none"; 

}


  }

  </script>


    </body>
</html>
0
max30
18 févr. 2022 à 12:46
Enfin l'intégralité du code html
0

Discussions similaires

"Reboot and Select proper Boot Device"
Rodoxx -
Patrick -

5 réponses
Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
Please select boot device
Pauline Emmy -
nadellen -

5 réponses
Montre connecté eko tank
Cess91070 -
Zigcat -

96 réponses
"Please select a boot device " ? ???
EtienneRMsss -
Malekal_morte- -

1 réponse