[Javascript] liste déroulante onChange

Bonjour :)

Puisque tu travaille en Struts, et non en "statique", je te conseille d'utiliser struts plutot que du javascript pur. Cela te permet de vraiment séparé la couche métier et la couche Vue, et c'est à ca que sert Struts d'ailleurs.

Donc pour cela, je te propose d'avoir une petite fonction javascript a déclencher sur l'évênement onchange de ta liste :

function submitChange ( ){
    // --- Modification du parametre action qui va permettre d'appeller la bonne méthode JAVA a éxécuter.
    document.forms[0].action.value = 'change';
    // --- Soumission du formulaire.
    document.forms[0].submit;
}

Et tu l'applique sur ta liste :

   onchange="javascript:submitChange()" 

Ensuite, il te faut ajouter une action dans ta classe java d'action, nommée 'change'. Elle sera appellée lors du changement de valeur de ta liste. Cette fonction aura pour but de récupérer la valeur sélectionnée de ta liste via un paramètre présent dans ton form, et ensuite de récupérer le texte a affiché qui correspond à cette valeur.
Une fois ces valeurs récupérées, tu n'as plus qu'un renseigner les champs d'un Bean construit a cette occasion (ou un Bean existant auquel tu ajoute les propriétés adéquat.
Et dans ta page JSP, tu affiche les données en fonctions de ton BEAN.

C'est la manière la plus propre si tu travail en Struts.

Apres si tu souhaite juste faire en javascript, le principe est le même :
1. Tu applique la fonction javascript à ta liste :

  onclick='javascript:submitChange(this)"

Note la différence : ici on passe l'objet liste en parametre de manière à pouvoir récupérer la valeur sélectionnée dans la fonction.

2. Tu récupère la valeur :

function submitChange ( liste ){
    // --- Recup de la valeur courante :
     var val = liste.options[liste.selectedIndex].value;
    // --- Ensuite libre à toi d'aller chercher le 
    // --- texte correspondant à la valeur :
    var texte = ...
    // --- Puis de remplir la zone ou afficher le texte comme il se doit.
    // --- Admettons pour cela que dans ta JSP tu aie déclarée une DIV
    // --- ayant id='toto'
    document.getElementById('toto').innerHTML = texte;
}

Voilà grosso modo ce qu'il faut faire. Maintenant a toi de voir quelle méthode t'es la plus simple à implémenter, et cela dépend je pense de comment sont stockés (ou plus où) les textes à afficher. S'ils sont présent dans le BEAN de session alors tu devra faire la premiere méthode, sinon la deuxième.

Bon courage pour la suite.
~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~

Tout d'abord affiche chacun des paragraphes entre des balises <div> (par exemple) qui ont pour style "visibility=hidden".
Ensuite, dans l'évenement onChange fais appel à une fonction (qui prend en paramètre la valeur selectionnée).
Cette fonction change le style du paragraphe choisi (désigné par le paramètre) en "visibility=visible".

Pour changer un style, utilise 'objet.style.visibility=<hidden ou visible>'

Bonjour,

je suis entrain de developper une petite application en PHP...Alors tout marche bien sauf que je voulais ameliorer mon code comme le suivant:

<select name="choix">
<option value="1">Une heure avant</option>
<option value="2">6 heures avant</option>
<option value="3">Aujourd'hui</option>
<option value="4">Les dernieres 24 heures</option>
</select>
</td>
<td>
De:
<input type="Text" name="input12" value= "">
</td>
<td>
jusqu'a:
<input type="Text" name="input13" value= "<?php echo date('Y-m-d H:i:s') ?>">
</td>

Je voulais a partir de mon choix dans la liste deroulante le value du 1er champs de texte ce remplie avec une date...
Par exemple si j'ai la date actuelle de mon systeme(qui est affiche dans le second champs de texte) est de 2008-04-09 08:29:56 et j'ai choisie le second option de ma liste cad 6 heures, alors dans le 1er value s'affiche l'heure actuelle - 6heures cad 2008-04-09 06:29:56
je pense que la solution est en Javascript et comme je ne le connais pas alors j'espere que je trouverais quelqu'un qui m'aidera a faire cette tache...

Merci d'avance

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_ho­urs);
		document.getElementById("from").value = 
			newDate.getFullYear()+"-"+(newDate.getMonth()+1­)+"-"+newDate.getDate()+" "+
			newDate.getHours()+":"+newDate.getMinutes()+&qu­ot;:"+newDate.getSeconds();
		
	}
	
}

function setNewDate ( selectBox ){
	calculateNewTime(selectBox.options[selectBox.options.select­edIndex].value);
}

/**
 * Insert current timestamp into input text "to"
 */
function insertCurrentDate ( ){
	if ( document.getElementById("to") )
		document.getElementById("to").value = 
			currentDate.getFullYear()+"-"+(currentDate.getM­onth()+1)+"-"+currentDate.getDate()+" "+
			currentDate.getHours()+":"+currentDate.getMinut­es()+":"+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 :
http://www.commentcamarche.net/javascript/jsdate.php3

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 :)



~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~

Re,

Voici la nouvelle version avec en plus le timer qui raffraichit toutes les minutes la date courante.
Fichier date.php :

<?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();
// --- Launch timer
startTimer();
</script>

La seule modification se situe dans la partie javascript du bas avec le lancement du timer :

// --- Launch timer
startTimer();

Le fichier '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_ho­urs);
		document.getElementById("from").value = 
			newDate.getFullYear()+"-"+(newDate.getMonth()+1­)+"-"+newDate.getDate()+" "+
			newDate.getHours()+":"+newDate.getMinutes()+&qu­ot;:"+newDate.getSeconds();
		
	}
	
}

function setNewDate ( selectBox ){
	calculateNewTime(selectBox.options[selectBox.options.select­edIndex].value);
}

/**
 * Insert current timestamp into input text "to"
 */
function insertCurrentDate ( ){
	if ( document.getElementById("to") )
		document.getElementById("to").value = 
			currentDate.getFullYear()+"-"+(currentDate.getM­onth()+1)+"-"+currentDate.getDate()+" "+
			currentDate.getHours()+":"+currentDate.getMinut­es()+":"+currentDate.getSeconds();
}

/**
 * Timer to set automatically the current date into the input text 'to'
 * and have the real date recalculated
 */
var tant = 0;  // ---
function startTimer(){
   tant = tant+1;

   if (tant < 60 ) {  // exemple:caler à 60 secondes (60*1000) 
      timerID = setTimeout("startTimer()",1000);
   } else {
      tant = 0;
      // --- New date
      currentDate = new Date();
      // --- Display again
      insertCurrentDate();     
      startTimer();                                // Redémarre la boucle
   }
}

</script>

La seule modif est l'ajout de la fonction 'startTimer' qui toutes les 60 secondes (modifiable), modifie la date courante et raffraichit le champ input 'to' avec cette nouvelle date.

~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~

Bonjour,

Merci bien Kij_82 le script fonctionne tres bien...