[PHP]Problème date/liste déroulante formulair
Résolu/Fermé
stylz882
Messages postés
22
Date d'inscription
lundi 4 avril 2011
Statut
Membre
Dernière intervention
26 novembre 2013
-
Modifié par stylz882 le 24/01/2012 à 11:31
stylz882 Messages postés 22 Date d'inscription lundi 4 avril 2011 Statut Membre Dernière intervention 26 novembre 2013 - 30 janv. 2012 à 08:33
stylz882 Messages postés 22 Date d'inscription lundi 4 avril 2011 Statut Membre Dernière intervention 26 novembre 2013 - 30 janv. 2012 à 08:33
A voir également:
- [PHP]Problème date/liste déroulante formulair
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Google sheet liste déroulante - Accueil - Guide bureautique
- Trouver une date de naissance gratuit - Forum Webmastering
4 réponses
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
24 janv. 2012 à 17:08
24 janv. 2012 à 17:08
oups il manque une ) a la fin de la ligne 473
tout ce code javascript je l'ai trouvé sur internet
-principe:
le javascript s'éxécute dans ton navigateur, au chargement du formulaire on initialise un détecteur d'évenement (ligne 365 window.onload = init_evenement;)
qd click dans l'input date_rdv ça appelle la fonction qui génère et affiche le calendrier
ensuite le choix dans le calendrier est recopié dans l'input
oui tu peux le faire en php mais il y aurra toujours un peu de javascript
- ou tu charge un calendrier généré en php dès le chargement du formulaire
- ou si tu veux laisser tes listes mois /jour il faudra qu'au choix du mois ça fasse un submit pour recharger le formulaire avec le bon nombre de jour
Ce n'est pas forcement plus simple et moins "fluide"
while($ligne=mysql_fetch_array($result))
tout ce code javascript je l'ai trouvé sur internet
-principe:
le javascript s'éxécute dans ton navigateur, au chargement du formulaire on initialise un détecteur d'évenement (ligne 365 window.onload = init_evenement;)
qd click dans l'input date_rdv ça appelle la fonction qui génère et affiche le calendrier
ensuite le choix dans le calendrier est recopié dans l'input
oui tu peux le faire en php mais il y aurra toujours un peu de javascript
- ou tu charge un calendrier généré en php dès le chargement du formulaire
- ou si tu veux laisser tes listes mois /jour il faudra qu'au choix du mois ça fasse un submit pour recharger le formulaire avec le bon nombre de jour
Ce n'est pas forcement plus simple et moins "fluide"
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
26 janv. 2012 à 17:34
26 janv. 2012 à 17:34
il faut mettre
concernant le CSS oui tu peux le mettre dans un fichier externe
<form action="resultat.php" method="post">
concernant le CSS oui tu peux le mettre dans un fichier externe
stylz882
Messages postés
22
Date d'inscription
lundi 4 avril 2011
Statut
Membre
Dernière intervention
26 novembre 2013
1
30 janv. 2012 à 08:33
30 janv. 2012 à 08:33
Ah oui, je n'avais pas fait attention à la ligne :
<form action="" method="post">
Merci beaucoup de ton aide précieuse Alain !
<form action="" method="post">
Merci beaucoup de ton aide précieuse Alain !
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
24 janv. 2012 à 14:36
24 janv. 2012 à 14:36
Code profondément refondu, avec un calendrier qui apparait au click dans le champ date
ne t'affole pas il y a beaucoup de javascript, un peu de css
formulaire:
et la page resultat.php:
ne t'affole pas il y a beaucoup de javascript, un peu de css
formulaire:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>demande de rendez-vous</title> <script type="text/javascript" > ////// script pour détection évenement click dans input pour affichage du calendrier juste en dessous //Fonction permettant de passer a l'annee précédente function annee_precedente(){ //On récupère l'annee actuelle puis on vérifit que l'on est pas en l'an 1 :-) if(current_year == 1){ current_year = current_year; } else{ current_year = current_year - 1 ; } //et on appel la fonction de génération de calendrier calendrier( current_year , current_month, current_day); } //Fonction permettant de passer à l'annee suivante function annee_suivante(){ //Pas de limite pour l'ajout d'année current_year = current_year +1 ; //et on appel la fonction de génération de calendrier calendrier( current_year , current_month, current_day); } //Fonction permettant de passer au mois précédent function mois_precedent(){ //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on enlève une année if(current_month == 0){ current_month = 11; current_year = current_year - 1; } else{ current_month = current_month - 1 ; } //et on appel la fonction de génération de calendrier calendrier( current_year , current_month, current_day); } //Fonction permettant de passer au mois suivant function mois_suivant(){ //On récupère le mois actuel puis on vérifit que l'on est pas en janvier sinon on ajoute une année if(current_month == 12){ current_month = 1; current_year = current_year + 1; } else{ current_month = current_month + 1; } //et on appel la fonction de génération de calendrier calendrier( current_year , current_month, current_day); } //Fonction principale qui génère le calendrier //Elle prend en paramètre, l'année , le mois , et le jour //Si l'année et le mois ne sont pas renseignés , la date courante est affecté par défaut function calendrier(year, month, day ){ //Aujourd'hui si month et year ne sont pas renseignés if(month == null || year == null){ today = new Date(); } else{ //month = month - 1; //Création d'une date en fonction de celle passée en paramètre today = new Date(year, month , day); } //Mois actuel current_month = today.getMonth() //Année actuelle current_year = today.getFullYear(); //Jours actuel current_day = today.getDate(); // On récupère le premier jour de la semaine du mois var dateTemp = new Date(current_year, current_month,1); //test pour vérifier quel jour était le prmier du mois current_day_since_start_week = (( dateTemp.getDay()== 0 ) ? 6 : dateTemp.getDay() - 1); //variable permettant de vérifier si l'on est déja rentré dans la condition pour éviter une boucle infinit var verifJour = false; //On initialise le nombre de jour par mois var nbJoursfevrier = (current_year % 4) == 0 ? 29 : 28; //Initialisation du tableau indiquant le nombre de jours par mois var day_number = new Array(31,nbJoursfevrier,31,30,31,30,31,31,30,31,30,31); //On initialise la ligne qui comportera tous les noms des jours depuis le début du mois var list_day = ''; var day_calendar = ''; var x = 0 //Lignes permettant de changer de mois var month_bef = "<a href=\"javascript:mois_precedent()\" style=\"float:left;margin-left:3px;\" > << </a>"; var month_next = "<a href=\"javascript:mois_suivant()\" style=\"float:right;margin-right:3px;\" > >> </a>"; /* //Lignes permettant de changer l'année et de mois var month_bef = "<a href=\"javascript:mois_precedent()\" style=\"margin-left:3px;\" > < </a>"; var month_next = "<a href=\"javascript:mois_suivant()\" style=\"margin-right:3px;\"> > </a>"; var year_next = "<a href=\"javascript:annee_suivante()\" style=\"float:right;margin-right:3px;\" > > > </a>"; var year_bef = "<a href=\"javascript:annee_precedente()\" style=\"float:left;margin-left:3px;\" > < < </a>"; */ calendrierSortie = "<p class=\"titleMonth\"> <a href=\"javascript:alimenterChamps('')\" style=\"float:left;margin-left:3px;color:#cccccc;font-size:10px;\"> Effacer la date </a><a href=\"javascript:masquerCalendrier()\" style=\"float:right;margin-right:3px;color:red;font-weight:bold;font-size:12px;\">X</a> </p>"; //On affiche le mois et l'année en titre // calendrierSortie += "<p class=\"titleMonth\" style=\"float:left;\">" + year_next + year_bef+ month_bef + month_name[current_month]+ " "+ current_year + month_next+"</p>"; calendrierSortie += "<p class=\"titleMonth\" style=\"float:left;\">" + month_bef + month_name[current_month]+ " "+ current_year + month_next+"</p>"; //On remplit le calendrier avec le nombre de jour, en remplissant les premiers jours par des champs vides for(var nbjours = 0 ; nbjours < (day_number[current_month] + current_day_since_start_week) ; nbjours++){ // On boucle tous les 7 jours pour créer la ligne qui comportera le nom des jours en fonction des<br /> // paramètres d'affichage if(enLigne == true){ // Si le premier jours de la semaine n'est pas un lundi alors on commence ce jours ci if(current_day_since_start_week != 1 && verifJour == false){ i = current_day_since_start_week - 1 ; if(x == 6){ list_day += "<span>" + day_name[x] + "</span>"; } else{ list_day += "<span>" + day_name[x] + "</span>"; } verifJour = true; } else{ if(x == 6){ list_day += "<span>" + day_name[x] + "</span>"; } else{ list_day += "<span>" + day_name[x] + "</span>"; } } x = (x == 6) ? 0: x + 1; } else if( enLigne == false && verifJour == false){ for(x = 0 ; x < 7 ; x++){ if(x == 6){ list_day += "<span>" + day_name[x] + "</span>"; } else{ list_day += "<span>" + day_name[x] + "</span>"; } } verifJour = true; } //et enfin on ajoute les dates au calendrier //Pour gèrer les jours "vide" et éviter de faire une boucle on vérifit que le nombre de jours corespond bien au //nombre de jour du mois if(nbjours < day_number[current_month]){ if(current_day == (nbjours+1)){ day_calendar += "<span onclick=\"alimenterChamps(this.innerHTML)\" class=\"currentDay\">" + (nbjours+1) + "</span>"; } else{ day_calendar += "<span onclick=\"alimenterChamps(this.innerHTML)\">" + (nbjours+1) + "</span>"; } } } //On ajoute les jours "vide" du début du mois for(i = 0 ; i < current_day_since_start_week ; i ++){ day_calendar = "<span> </span>" + day_calendar; } //Si aucun calendrier n'a encore été crée : if(!document.getElementById("calendrier")){ //On crée une div dynamiquement, en absolute, positionné sous le champs input var div_calendar = document.createElement("div"); //On lui attribut un id div_calendar.setAttribute("id","calendrier"); //On définit les propriétés de cette div ( id et classe ) div_calendar.className = "calendar_input"; //Pour ajouter la div dans le document var mybody = document.getElementsByTagName("body")[0]; //Pour finir on ajoute la div dans le document mybody.appendChild(div_calendar); } else{ div_calendar = document.getElementById("calendrier"); } //On insèrer dans la div, le contenu du calendrier généré //On assigne la taille du calendrier de façon dynamique ( on ajoute 10 px pour combler un bug sous ie ) var width_calendar = ( enLigne == false ) ? largeur+"px" : ((nbjours * 20) + ( nbjours * 4 ))+10+"px" ; calendrierSortie = calendrierSortie + list_day + day_calendar + "<div class=\"separator\"></div>"; div_calendar.innerHTML = calendrierSortie; div_calendar.style.width = width_calendar; } //Fonction permettant de trouver la position de l'élément ( input ) pour pouvoir positioner le calendrier function ds_getleft(el) { var tmp = el.offsetLeft; el = el.offsetParent while(el) { tmp += el.offsetLeft; el = el.offsetParent; } return tmp; } function ds_gettop(el) { var tmp = el.offsetTop; el = el.offsetParent while(el) { tmp += el.offsetTop; el = el.offsetParent; } return tmp; } //fonction permettant de positioner le calendrier function positionCalendar(objetParent){ //document.getElementById('calendrier').style.left = ds_getleft(objetParent) + "px"; document.getElementById('calendrier').style.left = ds_getleft(objetParent) + "px"; //document.getElementById('calendrier').style.top = ds_gettop(objetParent) + 20 + "px" ; document.getElementById('calendrier').style.top = ds_gettop(objetParent) + 20 + "px" ; // et on le rend visible document.getElementById('calendrier').style.visibility = "visible"; } function initialiserCalendrier(objetClick){ //on affecte la variable définissant sur quel input on a clické myObjectClick = objetClick; if(myObjectClick.disabled != true){ //On vérifit que le champs n'est pas déja remplit, sinon on va se positionner sur la date du champs if(myObjectClick.value != ''){ //On utilise la chaine de formatage var reg=new RegExp("/", "g"); var dateDuChamps = myObjectClick.value; var tableau=dateDuChamps.split(reg); calendrier( tableau[2] , tableau[1] - 1 , tableau[0]); } else{ //on créer le calendrier calendrier(objetClick); } //puis on le positionne par rapport a l'objet sur lequel on a clické //positionCalendar(objetClick); positionCalendar(objetClick); masquerSelect(); } } //Fonction permettant d'alimenter le champs function alimenterChamps(daySelect){ if(daySelect != ''){ lastInput.value= formatInfZero(daySelect) + formatage + formatInfZero((current_month+1)) + formatage +current_year; } else{ lastInput.value = ''; } masquerCalendrier(); } function masquerCalendrier(){ document.getElementById('calendrier').style.visibility = "hidden"; montrerSelect(); } function formatInfZero(numberFormat){ if(parseInt(numberFormat) < 10){ numberFormat = "0"+numberFormat; } return numberFormat; } /* ##################### CONFIGURATION ##################### */ /* ##- INITIALISATION DES VARIABLES -##*/ var calendrierSortie = ''; //Date actuelle var today = ''; //Mois actuel var current_month = ''; //Année actuelle var current_year = '' ; //Jours actuel var current_day = ''; //Nombres de jours depuis le début de la semaine var current_day_since_start_week = ''; //On initialise le nom des mois et le nom des jours en VF :) var month_name = new Array('Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre'); var day_name = new Array('L','M','M','J','V','S','D'); //permet de récupèrer l'input sur lequel on a clické et de le remplir avec la date formatée var myObjectClick = null; //Classe qui sera détecté pour afficher le calendrier var classMove = "calendrier"; //Variable permettant de savoir si on doit garder en mémoire le champs input clické var lastInput = null; //Div du calendrier var div_calendar = ""; //########################## FIN DES FONCTION LISTENER ########################## // /*Ajout du listener pour détecter le click sur l'élément et afficher le calendrier uniquement sur les textbox de class css date */ //Fonction permettant d'initialiser les listeners function init_evenement(){ //On commence par affecter une fonction à chaque évènement de la souris if(window.attachEvent){ document.onmousedown = start; document.onmouseup = drop; } else{ document.addEventListener("mousedown",start, false); document.addEventListener("mouseup",drop, false); } } //Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe function start(e){ //On initialise l'évènement s'il n'a aps été créé ( sous ie ) if(!e){ e = window.event; } //Détection de l'élément sur lequel on a clické var monElement = null; monElement = (e.target)? e.target:e.srcElement; if(monElement != null && monElement) { //On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables getClassDrag(monElement); if(myObjectClick){ initialiserCalendrier(monElement); lastInput = myObjectClick; } } } function drop(){ myObjectClick = null; } function getClassDrag(myObject){ with(myObject){ var x = className; listeClass = x.split(" "); //On parcours le tableau pour voir si l'objet est de type calendrier for(var i = 0 ; i < listeClass.length ; i++){ if(listeClass[i] == classMove){ myObjectClick = myObject; break; } } } } window.onload = init_evenement; //########################## Pour combler un bug d'ie 6 on masque les select ########################## // function masquerSelect(){ var ua = navigator.userAgent.toLowerCase(); var versionNav = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) ); var isIE = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) ); if(isIE && (versionNav < 7)){ svn=document.getElementsByTagName("SELECT"); for (a=0;a<svn.length;a++){ svn[a].style.visibility="hidden"; } } } function montrerSelect(){ var ua = navigator.userAgent.toLowerCase(); var versionNav = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) ); var isIE = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) ); if(isIE && versionNav < 7){ svn=document.getElementsByTagName("SELECT"); for (a=0;a<svn.length;a++){ svn[a].style.visibility="visible"; } } } //########################## FIN DES FONCTION LISTENER ########################## // // ## PARAMETRE D'AFFICHAGE du CALENDRIER ## // //si enLigne est a true , le calendrier s'affiche sur une seule ligne, //sinon il prend la taille spécifié par défaut; var enLigne = false ; var largeur = "175"; var formatage = "/"; /* ##################### FIN DE LA CONFIGURATION #################### */ </script> <style type="text/css"> /* CSS Document */ .calendar_input{ background-color:#f7f6f3; position:absolute; font-family:Arial, Helvetica, sans-serif; font-size:11px; border:1px solid #0099cc; } .calendar_input a{ text-decoration:none; color:#ffffff; font-weight:bold; } .calendar_input span{ float:left; display:block; width:25px; cursor:pointer; text-align:center; color:#000000; } .titleMonth{ width:100%; background-color:#08a1d4; color:#FFFFFF; text-align:center; border-bottom:1px solid #666; margin:0; padding:0; padding-bottom:2px; margin-top:0px; margin-bottom:0px; font-weight:bold; } .separator{ float:left; display:block; width:25px; } .currentDay{ font-weight:bold; } </style> </head> <body> <form action="" method="post"> <fieldset> <legend>formulaire de contact</legend> <strong> sélectionner votre nom dans la liste ci-dessous : </strong> <br /> <br /> <?php include('fonction.php'); //appel fonction connexion connexion(); // requête sql $rqsql = "SELECT id,nom FROM lycee ORDER BY nom ASC"; // exécution de la requête $result = mysql_query( $rqsql) or die( "exécution requête impossible."); echo '<form name="form1" method="post" action="resultat.php" >'; //il faut que les balises <form et </form> "encadrent" tous les input et select echo '<select name="nom">'; while($ligne=mysql_fetch_array($result) { echo "<option value=".$ligne['id'].">".$ligne['nom']."</option>"; } echo '</select>'; echo "<br />"; echo "<br />"; echo '<strong> A quelle date voulez-vous le rendez-vous ? :</strong><input type="text" name="date_rdv" id="date_rdv" value="" class="calendrier" readonly />'; /// deconnexion(); ?> <br /> <br /> <label for="message"> <strong>Message:</strong></label><br /> <textarea cols="70" rows="4" name="message" id="message"></textarea> <br /> <br /> <input name="envoyer" type="submit" value="envoyer"/> </fieldset> </form> </body> </html>
et la page resultat.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>affichage du résultat</title> </head> <body> <?php include('fonction.php'); connexion(); if(isset($_POST['envoyer'])) { //le bouton envoyer a été clické $id=$_POST['nom']; $req1="SELECT nom FROM lycee WHERE id=$id"; $res=mysql_query($req1) or die("erreur"); $lig=mysql_fetch_array($res); echo 'Bonjour, vous êtes :'.$lig['nom']; deconnexion(); echo '<br />votre demande de rendez vous est le :'.$_POST['date_rdv']; echo '<br />votre commentaire '.nl2br($_POST['message']); //nl2br transforme en <br> les \n des retours à la ligne générés dans le textarea } ?> </body> </html>
stylz882
Messages postés
22
Date d'inscription
lundi 4 avril 2011
Statut
Membre
Dernière intervention
26 novembre 2013
1
24 janv. 2012 à 15:10
24 janv. 2012 à 15:10
Waouh.. Merci beaucoup pour ton boulot Alain.
Cependant, étant débutant, et que je n'ai pas encore touché au Javascript, n'y a-t-il pas moyen de faire qu'avec du PHP/HTML ? ( Sinon j'ai testé le code, il me trouve une erreure : "Parse error: syntax error, unexpected '{' in C:\Program Files (x86)\EasyPHP-5.3.8.0\www\f\test1.php on line 474")
Cependant, étant débutant, et que je n'ai pas encore touché au Javascript, n'y a-t-il pas moyen de faire qu'avec du PHP/HTML ? ( Sinon j'ai testé le code, il me trouve une erreure : "Parse error: syntax error, unexpected '{' in C:\Program Files (x86)\EasyPHP-5.3.8.0\www\f\test1.php on line 474")
stylz882
Messages postés
22
Date d'inscription
lundi 4 avril 2011
Statut
Membre
Dernière intervention
26 novembre 2013
1
26 janv. 2012 à 08:08
26 janv. 2012 à 08:08
Désolé pour le retard, j'essaie ça tout de suite et je te mets au courant !
stylz882
Messages postés
22
Date d'inscription
lundi 4 avril 2011
Statut
Membre
Dernière intervention
26 novembre 2013
1
26 janv. 2012 à 08:30
26 janv. 2012 à 08:30
En rajoutant la ) le formulaire se lance niquel ( ça va bien chercher ma liste des profs dans ma DB, le calendrier marche super ) En revanche, le bouton Envoyer ne m'enmène pas sur la page " resultat.php "
J'ai une autre question par rapport à ton code, niveau du CSS, je le met dans une autre page, non?
J'ai une autre question par rapport à ton code, niveau du CSS, je le met dans une autre page, non?