Page 1 sur 1

Affichage selon sélection liste déroulante sans recharger la page

Posté : 06 janv. 2019, 11:50
par cris84
Bonjour à tous,

j'ai une liste déroulante qui contient les départements, je voudrais que dans le formulaire dans un input, je puisse rentrer une ville (en autocomplete que j'ai déjà fait) mais en fonction du choix de la liste déroulante même lorsque l'utilisateur change de département.
Il faut appeler je crois ce changement en Javascript ou Ajax ?

Le hearder.php contient la liste déroulante département comme ceci :

<select name="id_departement" class="form-control mb-2" id="region" onChange="getVilles(this.value);">
		     <option value="">- - - Choisissez un d&eacute;partement - - -</option>
		   <?php
  			  foreach($departements as $nr => $nom)
    {
		       ?>
					 <option value="<?= $nr;?>"<?php
				  } 
		
		?>><?= utf8_encode($nom); ?></option><?php }  
				echo'</select>';
				 }
//ici je voudrais afficher le input en fonction du choix du département même si l'utilisateur change
?>
<div class="input_container">
                    <input type="text" id="country_id" onkeyup="autocomplet()">
                    <ul id="country_list_id"></ul>
                </div> 

le fichier d'autocomplete :

$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT id_ville, ville, cp FROM ville WHERE ville LIKE (:keyword) and id_departement = ". $idd ." LIMIT 0, 8";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
	// put in bold the written text
	$ville = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['ville']);
	// add new option
    echo '<li onclick="set_item(\''.str_replace("'", "\'", $rs['ville']).'\')">'.$ville.'</li>';
	}

Re: Affichage selon sélection liste déroulante sans recharger la page

Posté : 07 janv. 2019, 03:46
par kevin254kl
Salut,

Un exemple ici https://github.com/boktoso/AjaxExample je pense le mieux c'est de renvoyer du json plus léger et en javascript insérer l'élément. Tu peux utiliser jquery https://stackoverflow.com/questions/229 ... ax-and-php

Re: Affichage selon sélection liste déroulante sans recharger la page

Posté : 08 janv. 2019, 20:02
par cris84
Bonsoir,
comment peut-on remplacer switch dans le résultat de la requête sql dans le premier exemple ?

Re: Affichage selon sélection liste déroulante sans recharger la page

Posté : 09 janv. 2019, 19:27
par cris84
Bonsoir,

j'ai fait ceci mais évidement cela m'affiche dans la deuxième liste uniquement que la première ville.
Comment faire une répétition pour afficher toutes les villes correspondantes :?:
<?php
	$choice = $_GET["first"];
	
	$ville = $bdd->query('SELECT * FROM ville WHERE id_departement ="'.$_GET['first'].'"');
			$don = $ville->fetch();
			
			
	switch($choice){
		case  "".$don['id_departement']."":
	
		echo '["'.$don['ville'].'"]'; 
			break;
		
		default:
			echo "[]";
			break;
	}
	?>
Merci

Re: Affichage selon sélection liste déroulante sans recharger la page

Posté : 11 janv. 2019, 08:50
par kevin254kl
Salut,

C'était juste un exemple, fait ta requête selon la ville tu retourne le résultat enjson_encode, puis tu fais un consol.log pour voir à quoi sa ressemble. Enfin en jquery javascript ou ce que tu veux tu sélectionnes ton élément et utilise append (en jquery) pour mettre à jour ta liste.

Re: Affichage selon sélection liste déroulante sans recharger la page

Posté : 11 janv. 2019, 21:43
par cris84
Je maîtrise un peu le PHP mais pas le java, Ajax et javascript
Une petite explication avec un bout de code pour m'aider à comprendre

Re: Affichage selon sélection liste déroulante sans recharger la page

Posté : 18 janv. 2019, 20:32
par cris84
Bonsoir à tous,
J'ai résolut mon problème en faisant le code ci-dessous, par contre je voudrais ajouter un selected de la valeur de l'option pour garder la sélection de la ville après la validation du formulaire mais avec une variable de SESSION['id_ville'].

if(val1 != "") {
			$ville.empty(); 
		
			$.ajax({
				url: 'SearchAJAXresult.php',
				data: 'departement=' + val1, 
				dataType: 'json',
				//error: function(){document.write("lol")},
				success: function(json) {
					$.each(json, function(index, value) {
					
						$ville.append('<option value="'+ index +'">'+ value +'</option>'); 
						
					});
				
				}
				
			});
		}
Merci de votre aide

Re: Affichage selon sélection liste déroulante sans recharger la page

Posté : 21 janv. 2019, 01:55
par @rthur
Si ton formulaire est envoyé en Ajax alors la valeur sélectionnée dans le menu déroulant va rester sur celle que l'utilisateur a choisi tant que la page n'est pas réactualisée.

Si tu veux que ce choix soit conservé après le rechargement de ta page qui contient le formulaire, alors il faut lors du chargement de la page soit en PHP ou en javascript ajouter un "selected" sur la bonne option.
Voici une piste en JS :
http://www.finalclap.com/faq/247-jquery-select-option

Re: Affichage selon sélection liste déroulante sans recharger la page

Posté : 26 janv. 2019, 13:30
par cris84
Bonjour,

du coup j'ai fait autrement, mais cette fois je voudrais savoir comment garder la sélection avec $_SESSION['id_ville'];

Ce que j'ai fait ne fonctionne pas, la sélection n'est pas conservée :

<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
					
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						
						document.getElementById('id_ville').innerHTML = leselect;
						if(document.getElementById('id_ville').options.length>0)
{document.getElementById('id_ville').options[i].selected=true;}

					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","index3.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de du departement
				sel = document.getElementById('departement');
				id_departementdepartement = sel.options[sel.selectedIndex].value;
				xhr.send("id_departement="+id_departementdepartement);
			}
		</script>

l'index3.php pout tester :

<?php session_start();
  require 'config.inc.php'; 
 
	echo "<select name='id_ville' class='custom-select mb-2'>";
	if(isset($_POST["id_departement"])){
		
		$sql = $bdd->query("SELECT id_ville, ville, cp FROM ville WHERE id_departement=".$_POST["id_departement"]." ORDER BY ville ASC");
		
		while($row = $sql->fetch()){ ?>
		
			<option value="<?= $row["id_ville"];?>"<?php if (isset($_GET['id_ville'])) { 
			
            if ($row['id_ville'] == $_GET['id_ville']) {
                echo 'selected="selected"';
				
           } 
        } elseif (isset($_SESSION['id_ville'])) { 
            if ($row['id_ville'] == $_SESSION['id_ville']) {
                echo 'selected="selected"';
				
           } 
        }  ?>><?= utf8_encode($row["ville"])." (".$row['cp'].")";?></option>
		<?php }
	}
	echo "</select>";
	
?>
Merci