[Javascript] liste déroulante onChange

[Résolu/Fermé]
Signaler
-
 Igila -
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

Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
852
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41713 internautes nous ont dit merci ce mois-ci

Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
852
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.
Re-salut !

Merci du coup de main, j'ai réussi du coup à le faire fonctionner.

J'ai utilisé pour cela ta seconde méthode, parce qu'a ce stade du projet, comme je n'ai pas encore entamé le développement, je n'ai même pas encore de Bean. Ceci dit, lorsque j'en aurai besoin je reprendrai surement le premier code qui est, comme tu l'a dit, plus propre.

Autre petit détail, il semblerait que le switch ne fonctionne pas avec le paramètre val (j'ai essayé à maintes reprises et il ne le trouve pas) mais avec des if cela fonctionne très bien...

Encore alligato-sama et a bientôt (surement ...) ^^
Encore alligato-sama et a bientôt (surement ...) ^^

HS
on dit Arigato ou Arigato gosaimashita ou si tu veux Arigato sama sans le trait d'union
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
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
852
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_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();
}

/**
 * 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.


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,

Merci bien Kij_82 le script fonctionne tres bien...
Bonjour,

Attention plus haut, il semble que ce ne soit pas
document.forms[0].action.value
mais
document.forms[0].action

Cordialement
Bonjour,je suis débutant et j'ai un petit problème semblable à ce sujet, notamment , sur l'appli que je développe je dois remplir certains champs selon mon choix dans une liste que j'ai pu alimenter depuis ma BDD.
(et aussi les données a mettre dans mes champs doivent parvenir de ma BDD selon le choix dans la liste).
voici un peux de mon code:

<!-- Connexion BDD -->
<?php include("connexion.php");?>

<!-- déclaration requete sql -->
<?php
$query=mysql_query("select * from famille");
?>

<!-- affectation des données dans la liste déroulante -->
<?php
echo('<label for="select"></label>');
echo('<select name="select" size="1" id="select" onchange="choix(this)">');

echo('<option value="'.'">'.'</option>');

while ($row=mysql_fetch_object($query))
{
$IdCat = $row->IdFamille;
echo('<option>'.$row->NomFamille.'</option>');
}

echo('</select>');

?>
<input type="hidden" name="envoi_form" value="ok"> </td>
</tr>
<tr>
<td class="colonne_gauche" width="37%" align="justify" bgcolor="E6E6E6">Numèro Ordre </td>
<td class="colonne_droite" width="63%" align="left" bgcolor="E6E6E6"><input name="numordre" size="40" maxlength="80" type="text"></td>
</tr>

<tr>
<td class="colonne_gauche" width="37%" align="justify" bgcolor="E6E6E6">Description Gènèrale </td>
<td class="colonne_droite" width="63%" align="left" bgcolor="E6E6E6">
<?php
echo('<textarea name="descgeneral" cols="55" rows="6">');

echo('ICI JE DOIS METTRE UNE DONNEES SELON LE CHOIX DANS LA LISTE');
echo('</textarea>' );

?>


</td>

Merci pour votre aide
alut tout le monde , voici un tutorial détaillé Step by Step pour developper avec Struts , bonne chance mes amis , voici le site http://java.host22.com