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

Eléphant du PHP | 233 Messages

06 janv. 2019, 11:50

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>';
	}

Eléphant du PHP | 319 Messages

07 janv. 2019, 03:46

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

Eléphant du PHP | 233 Messages

08 janv. 2019, 20:02

Bonsoir,
comment peut-on remplacer switch dans le résultat de la requête sql dans le premier exemple ?

Eléphant du PHP | 233 Messages

09 janv. 2019, 19:27

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

Eléphant du PHP | 319 Messages

11 janv. 2019, 08:50

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.

Eléphant du PHP | 233 Messages

11 janv. 2019, 21:43

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

Eléphant du PHP | 233 Messages

18 janv. 2019, 20:32

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

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 8149 Messages

21 janv. 2019, 01:55

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
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphant du PHP | 233 Messages

26 janv. 2019, 13:30

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