[Javascript] liste déroulante onChange
Résolu/Fermé
A voir également:
- Javascript liste déroulante onchange
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Supprimer liste déroulante excel ✓ - Forum Excel
- Supprimer liste déroulante Excel ✓ - Forum Excel
- Effacer le contenue d'une cellule avec liste déroulante - Forum Excel
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
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 :
Et un fichier de script qui doit avoir pour nom 'script.js' :
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 :)
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 :)