Lier deux select AJAX

max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention   -  
 max30 -
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention  
 
Mais voici les captures d'écran:







0
max30_3775 Messages postés 178 Date d'inscription   Statut Membre Dernière intervention  
 
Est-ce à cause des balises styles?
0
Réponse 17 / 17
max30
  


  <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
 
Enfin l'intégralité du code html
0

Discussions similaires

Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
Select boot device première utilisation
eleagtte -
bazfile -

7 réponses
probléme avec ajax svp
marwen109 -
Groarh -

4 réponses
Please select boot device
Pauline Emmy -
nadellen -

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

1 réponse