Bonjour,

Je m'en remets à vous car je bute sur un problème depuis quelques jours. 

Dans le but de créer un tableau de bord, je dois afficher un tableau de données selon un mois et une année (donc deux listes déroulantes). Pour faire ça dynamiquement, j'ai vu qu'il fallait utiliser AJAX et j'ai suivi un tuto sur w3schools qui montrait comment afficher un tableau en fonction de la sélection dans UNE SEULE liste déroulante.

J'ai essayé d'adapter mon code à la fonction javascript et ça donne ça:

Le fichier formAnnee.php:

function showIndic(str,str2) {
	if (str == "" || str2 == "") {
		document.getElementById("txtHint").innerHTML = "";
		return;
	} else { 
		if (window.XMLHttpRequest) {	
	 	      xmlhttp = new XMLHttpRequest();
		} else {
					
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				document.getElementById("txtHint").innerHTML = this.responseText;
			}
		};
		xmlhttp.open("GET","form.php?date="+str+str2,true);
		xmlhttp.send();
	}
}

J'ai aussi une première liste déroulante dans laquelle j'affiche les mois et une deuxième liste déroulante qui affiche les années à partir de 2016:

<select name="month">
	<option value="<?php $nowMonth ?>" selected><?php echo $nowMonth; ?></option>
	<option value="1">Janvier</option>
	<option value="2">Février</option>
	<option value="3">Mars</option>
	<option value="4">Avril</option>
	<option value="5">Mai</option>
	<option value="6">Juin</option>
	<option value="7">Juillet</option>
	<option value="8">Août</option>
	<option value="9">Septembre</option>
	<option value="10">Octobre</option>
	<option value="11">Novembre</option>
	<option value="12">Décembre</option>
</select>

Et voici la deuxième liste déroulante qui affiche les années:

<select name ="year" onchange="showIndic(this.value)">
	<option value="<?php $nowYear ?>" selected><?php echo $nowYear; ?></option>
	<?php for($i = 2016; $i <= $nowYear; $i++){
		echo '<option value='.$i.'>'.$i.'</option>';
	      } 

        ?>
</select>

J'ai un autre fichier "form.php" qui lui affiche le tableau en fonction des valeurs récupérées des deux listes déroulantes:

<?php
	$selectedDate = intval($_GET['date']);
	$mois = substr($selectedDate,-1);
	if($mois != "10" || $mois != "11" || $mois !="12")
		$mois = "0".$mois;
	$year = substr($selectedDate,1);
	$date = $mois."/".$year;
	
	// on récupère les données de la messagerie pour la date sélectionnée
	$req = $bdd->query('SELECT * FROM indicateur WHERE date = "'.$date.'" AND id_domaine = 1');

	echo "<table>
	<tr>
	<th>Nom</th>
	<th>Date</th>
	<th>Valeur</th>
	</tr>";
	while($row = $req->fetch()) {
		echo "<tr>";
		echo "<td>" . $row['nom'] . "</td>";
		echo "<td>" . $row['date'] . "</td>";
		echo "<td>" . $row['valeur'] . "</td>";
		echo "</tr>";
	}
	echo "</table>";
	$req->closeCursor();
?>

Donc voilà, la problématique est: "Comment récupérer la valeur des deux listes et ensuite afficher le tableau seulement si les deux valeurs sont sélectionnées?"

En vous remerciant d'avance pour ceux qui auront l'amabilité de me venir en aide.

Jessy

-
Edité par JessyXiong 11 septembre 2017 à 16:49:38

Salut,

Pour récupérer les valeurs de tes select regarde la première réponse à ce post :

https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript 

Tu peux mettre une valeur null (vide) au début de tes deux listes et donc vérifier que tes deux listes aient un élément sélectionné si la valeur est différente de vide. 

Bonjour et merci de m'avoir répondu.

Désolé de la réponse tardive je pensais que personne n'allait m'aider ...

Je vais essayer de faire ce que tu me suggères et je reviendrai vers toi en cas de soucis

Petite question, du coup les arguments de ma fonction showIndic() ne servent plus à rien ? Puisqu'il faut déclarer ces variables directement dans al fonction.

-
Edité par JessyXiong 14 septembre 2017 à 11:45:05

Oui,

les arguments de ta fonction ne seront plus utiles, il va falloir la modifier un peut pour qu'elle prennent en compte les deux values des deux listes (mois + année) et déclencher cette fonction après sélection d'un élément différent de null pour les deux listes.

Petite remarque en plus, ce serais mieux de ne pas passer par le "onchange" HTML mais plutôt par "addEventListener" (https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener) ce qui est beaucoup plus propre niveau code.

-
Edité par kokoal 14 septembre 2017 à 12:29:44

Ah super c'est ce que je me disais.

Et merci pour le conseil c'est ce que je cherchais, j'arrête pas d'essayer de trouver comment faire fonctionner "onchange" sur les deux listes!

Je te tiens au courant !

Re,

Alors j'ai essayé avec addEventListener mais je ne saisis pas comment faire lorsque'on a deux variables. On concatène les deux en une seule et ensuite on ajoute addEventListener sur celui là ? J'ai fais un truc du genre, voici ma fonction modifiée:

function showIndic() {
		
		var month = document.getElementById("month");
		var year = document.getElementById("year");
		var strMonth = month.options[month.selectedIndex].value;
		var strYear = year.options[year.selectedIndex].value;
		var strDate = strMonth+strYear;
		
			
		
		if(strMonth != "" && strYear != ""){
			if(window.XMLHttpRequest){
				xmlhttpd = new XMLHttpRequest();
			}
			else{
				xmlhttpd = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
					document.getElementById("txtHint").innerHTML = this.responseText;
				}
			};
			strDate.addEventListener('change',function(){
				xmlhttp.open("GET","form.php?date="+strMonth+strYear,true);
				xmlhttp.send();
			}, false);
		}
		else{
			document.getElementById("txtHint").innerHTML = "";
			return;
		}	
	}

-
Edité par JessyXiong 15 septembre 2017 à 9:42:50

up

Nope,

tu met deux "addEventListener" après le chargement de ta page un sur ta liste de mois et un sur ta liste d'années et les deux "listener" pointeront vers ta fonction "showIndic" sur l’événement "change" ou "click" (enfin  éventement déclencheur quoi).

var year = document.getElementById("year");
var month = document.getElementById("month");

year.addEventListener('change', showIndic);
month.addEventListener('change', showIndic);

Du coup là je dis : quand l'événement 'change' est appliqué à la liste d'année je lance la fonction showIndic et quand l'événement 'change' est appliqué à la liste de mois je lance showIndic.

Et du coup ce n'est pas possible de concaténer des objets JS XD

Et la méthode "addEventListener" doit être appliqué sur un objet du DOM.

-
Edité par kokoal 18 septembre 2017 à 12:01:23