[Javascript] liste déroulante onChange

Résolu/Fermé
Gerwalden - 2 mai 2007 à 11:47
 Igila - 23 juil. 2011 à 08:29
Bonjour,

Actuellement en stage, je dois développer une application en Strus, EJB etc.

Encore à la phase des dessins d'écrans (html, css et javascript uniquement donc) et débutant dans le javascript (néophyte et encore ^^) j'ai besoin d'un petit coup de main :

Je souhaite afficher une liste déroulante (jusque là tout va bien).
Lorsque l'on clique sur un élément de la liste, un paragraphe de texte se met à jour automatiquement en bas de la page (en fonction de l'élément).

Pouvez-vous m'aider ? ^^ Merci d'avance.

9 réponses

kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
9 avril 2008 à 11:36
Bonjour,

Voici ta solution (développée et testée) :

Une première page que l'on nommera par exemple 'data.php' dont le code est le suivant :
<?php
include "script.js";
?>

<select name="choix" onchange="setNewDate(this)">
<option value="1">Une heure avant</option>
<option value="6">6 heures avant</option>
<option value="0">Aujourd'hui</option>
<option value="24">Les dernieres 24 heures</option>
</select>
</td>
<td>
De:
<input id="from" type="Text" name="input12" value= "">
</td>
<td>
jusqu'a:
<input id="to" type="Text" name="input13" value= "">
</td> 

<script language="javascript">
// --- Insert current date into 'to' input
insertCurrentDate();
</script>


Et un fichier de script qui doit avoir pour nom 'script.js' :
<script language="javascript">

var currentDate = new Date();

/**
 * Calculate new time in function of time parameter
 */
function calculateNewTime ( _additional_time_in_hours ){
	
	// --- Check if input text "from" is present
	if ( ! document.getElementById("from") ){
		alert("Missing form data 'from' to calculate the new date");
		return;
	}
	// --- Check if input text "to" is present
	var toTime = null;
	if ( ! document.getElementById("to") ){
		alert("Missing form data 'to' to calculate the new date");
		return;
	}
	// --- Retrieve 'to' value
	else
		toTime = document.getElementById("to").value;
	
	// --- Calculate the new date only if input text "to" is filled
	if ( toTime != null && toTime != "" ){
		
		// --- Take current time as a reference to calculate the new time.
		// --- An update would be to parse the value of the input text 'to' in order the user to be able to enter his own time
		// --- instead of having current time forced
		var newDate = new Date(currentDate.getTime());
		// --- Del additional time
		newDate.setHours(newDate.getHours()-_additional_time_in_hours);
		document.getElementById("from").value = 
			newDate.getFullYear()+"-"+(newDate.getMonth()+1)+"-"+newDate.getDate()+" "+
			newDate.getHours()+":"+newDate.getMinutes()+":"+newDate.getSeconds();
		
	}
	
}

function setNewDate ( selectBox ){
	calculateNewTime(selectBox.options[selectBox.options.selectedIndex].value);
}

/**
 * Insert current timestamp into input text "to"
 */
function insertCurrentDate ( ){
	if ( document.getElementById("to") )
		document.getElementById("to").value = 
			currentDate.getFullYear()+"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate()+" "+
			currentDate.getHours()+":"+currentDate.getMinutes()+":"+currentDate.getSeconds();
}
</script>


Quelques explications sur le fonctionnement de tout ceci :
Le fichier 'date.php' :

1°. Tu remarquera que l'on inclue le fichier de script dans lequel sont définies les fonctions javascript utilisée, ceci via l'instruction include "script.js";
2°. Ensuite j'ai ajouté un évênement onchange sur la selectbox de manière à recalculer automatiquement la date en fonction de ce qu'à sélectionner l'utilisateur : onchange="setNewDate(this)"
La fonction setNewDate est appelée est sera chargée de refaire le calcul.
3°). J'ai modifier les valeurs des différentes sélection en donnant à chaque fois la durée en heure à laquelle correspond l'option (une heure = 1, dans les 24h = 24, aujourd'hui = 0, etc.)
Tu peux donc mettre les valeurs que tu souhaite par la suite, mais attention, n'oublie qu'il s'agit de nombre indiquant des heures !
4°) Comme tu le vera par la suite, le calcule de la date est faite sur la date courante en javascript, donc plutot que d'afficher via du code PHP la date courante dans le champ "from" (deuxième input), je la calcule en javascript et l'affiche via la méthode "insertCurrentDate();". Notes que cette fonction est à appeler une fois le formulaire écrit dans la page.
5°) J'ai ajouté les identifiant "from" et "to" aux deux champs input text du formulaire de manière à les appeler plus facilement dans le code javascript.


Le fichier de script 'script.js' :
Celui-ci contient donc les fonctions de recalcule de la date.
1°. La fonction "insertCurrentDate" permet de calculer la date courante et l'afficher dans le champ input 'to'
2°. La fonction "setNewDate" permet de récupérer la valeur sélectionnée dans la liste box et d'appeler la fonction de recalcule de la nouvelle date en donnant en paramètre la valeur récupérée.
3°. La fonction "calculateNewTime" permet de recalculer la nouvelle date. Je n'explique pas plus là dessus, si tu tiens à comprendre son fonctionnement je te conseille vivement de regarder cette page web :
https://www.commentcamarche.net/contents/571-javascript-l-objet-date

Une amélioration serait de faire un timer qui met à jour automatiquement toutes les x secondes la date du champ 'to' de manière à ce que si l'utilisateur reste 10 minutes sur ta page, cette date soit raffraichie. (sinon lors du recalcul tu aura un décalage :)


25