Discussion :

[johan0510]

bonjour à tous,

j'ai un formulaire ou je choisi l'heure de début et l'heure de fin d'une réservation avec une liste déroulante. Il faudrait que j'ai une fonction qui interdit de mettre une heure de début plus grande qu'une heure de fin... pour cela j'ai ce script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<tr>
				<td> Heure de début :
				<select name='heure_debut' onchange='this.form.heure_fin.options[this.selectedIndex+1].selected=true;'>
					<option value='0'>0</option>
					<option value='1'>1</option>
					<option value='2'>2</option>
					<option value='3'>3</option>
					<option value='4'>4</option>
					<option value='5'>5</option>
					<option value='6'>6</option>
					<option value='7'>7</option>
					<option value='8'>8</option>
					<option value='9'>9</option>
					<option value='10'>10</option>
					<option value='11'>11</option>
					<option value='12'>12</option>
					<option value='13'>13</option>
					<option value='14'>14</option>
					<option value='15'>15</option>
					<option value='16'>16</option>
					<option value='17'>17</option>
					<option value='18'>18</option>
					<option value='19'>19</option>
					<option value='20'>20</option>
					<option value='21'>21</option>
					<option value='22'>22</option>
					<option value='23'>23</option>
				</select>
				</td>
			</tr>
 
			<tr>
				<td> Heure de fin :
				<select name='heure_fin'>
					<option value='0'>0</option>
					<option value='1'>1</option>
					<option value='2'>2</option>
					<option value='3'>3</option>
					<option value='4'>4</option>
					<option value='5'>5</option>
					<option value='6'>6</option>
					<option value='7'>7</option>
					<option value='8'>8</option>
					<option value='9'>9</option>
					<option value='10'>10</option>
					<option value='11'>11</option>
					<option value='12'>12</option>
					<option value='13'>13</option>
					<option value='14'>14</option>
					<option value='15'>15</option>
					<option value='16'>16</option>
					<option value='17'>17</option>
					<option value='18'>18</option>
					<option value='19'>19</option>
					<option value='20'>20</option>
					<option value='21'>21</option>
					<option value='22'>22</option>
					<option value='23'>23</option>
				</select>
				</td>
			</tr>

la ligne de code suivante permet d'augmenter l'heure de fin de +1 par rapport à l'heure de début mais cela n'empêche peut être pas les erreurs...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name='heure_debut' onchange='this.form.heure_fin.options[this.selectedIndex+1].selected=true;'>

Quelqu'un a-t-il une fonction permettant ceci ?? merci à vous

[E.Bzz]

Bonjour,

Quelqu'un a-t-il une fonction permettant ceci ??

une fonction je sais pas, mais une solution de test dans la FAQ (à adapter pour prendre en compte les heures), oui

A+

[johan0510]

merci de ta réponse e.bzz, je viens de regarder, je pense que cette fonction sera la mieux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// Mise en place de la première date
d1 = new Date(0);
d1.setFullYear(2006, 11, 27)
 
// Mise en place de la seconde date
d2 = new Date(0);
d2.setFullYear(2006, 0, 18)
 
if(d1 > d2)
alert("d1 est après d2");
else if(d1 < d2)
alert("d1 est avant d2");
else
alert("d1 et d2 sont la même date");

il faut que je l'adapte mais comment puis-je l'insérer dans mon formulaire ??

[E.Bzz]

comment puis-je l'insérer dans mon formulaire ??

Ben tu en fais une fonction et tu l'appelles sur onchange de chacun des 2 select

Attention toutefois au cas où l'un des 2 n'est pas encore renseigné ...

A+

[johan0510]

okay j'ai fait ce que tu m'as dit le problème c'est qu'il ne se passe rien
voici ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
function verifHeure(){
// Mise en place de la première heure
d1 = $heureDebut;
 
// Mise en place de la seconde heure
d2 = $heureFin
 
if(d1 > d2)
alert("L'heure de début est plus grande que l'heure de fin");
else if(d1 <=d2)
alert("L'heure de début est égale à l'heure de fin");
}
</script>

et voici mon formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<?php
echo "<form method='post' action='#'>
        <table id='tabAjoutEvent'>
                
                        <tr>
                                Ce formulaire vous permet de saisir un nouvel évènement de la piste de karting.
                        </tr>

                        <tr>
                                <br><br>
                        </tr>
                        
                <tr>
                <td>Date : <input type='date' size = '10' name='date_evenement' value='$date_evenement'/></td>
            </tr>
                        
                        <tr>
                                <td> Heure de début :
                                <select name='heure_debut' onchange='verifHeure(this)'>
                                        <option value='0'>0</option>
                                        <option value='1'>1</option>
                                        <option value='2'>2</option>
                                        <option value='3'>3</option>
                                        <option value='4'>4</option>
                                        <option value='5'>5</option>
                                        <option value='6'>6</option>
                                        <option value='7'>7</option>
                                        <option value='8'>8</option>
                                        <option value='9'>9</option>
                                        <option value='10'>10</option>
                                        <option value='11'>11</option>
                                        <option value='12'>12</option>
                                        <option value='13'>13</option>
                                        <option value='14'>14</option>
                                        <option value='15'>15</option>
                                        <option value='16'>16</option>
                                        <option value='17'>17</option>
                                        <option value='18'>18</option>
                                        <option value='19'>19</option>
                                        <option value='20'>20</option>
                                        <option value='21'>21</option>
                                        <option value='22'>22</option>
                                        <option value='23'>23</option>
                                </select>
                                </td>
                        </tr>
                        
                        <tr>
                                <td> Heure de fin :
                                <select name='heure_fin' onchange='verifHeure(this)'>
                                        <option value='0'>0</option>
                                        <option value='1'>1</option>
                                        <option value='2'>2</option>
                                        <option value='3'>3</option>
                                        <option value='4'>4</option>
                                        <option value='5'>5</option>
                                        <option value='6'>6</option>
                                        <option value='7'>7</option>
                                        <option value='8'>8</option>
                                        <option value='9'>9</option>
                                        <option value='10'>10</option>
                                        <option value='11'>11</option>
                                        <option value='12'>12</option>
                                        <option value='13'>13</option>
                                        <option value='14'>14</option>
                                        <option value='15'>15</option>
                                        <option value='16'>16</option>
                                        <option value='17'>17</option>
                                        <option value='18'>18</option>
                                        <option value='19'>19</option>
                                        <option value='20'>20</option>
                                        <option value='21'>21</option>
                                        <option value='22'>22</option>
                                        <option value='23'>23</option>
                                </select>
                                </td>
                        </tr>
                        
                        <tr>
                                <td>Description de la piste :
                                <select name='id_etat_evenement'>";
                                
                                $sql = ('SELECT * FROM jos_etat'); //on sélectionne tout les champs de la table état
                                $req = mysql_query($sql) or die(mysql_error()); //Envoie une requête à un serveur MySQL  et Retourne le texte associé avec l'erreur générée lors de la dernière requête
                                while($data = mysql_fetch_assoc($req)) // Tant qu'il y a des enregistrements  $data on lance la requête
                                //mysql_fetch_assoc — Lit une ligne de résultat MySQL dans un tableau associatif
                                {
                                        $optionT = $data['id_etat'].' | '.$data['description_etat']; // concaténation des deux éléments de la table état
                                        echo '<option value='.$optionT.'>' .$optionT. '</option>';
                                }
                                mysql_close(); //Ferme la connexion MySQL
                        
                                echo "</select></td>
                        </tr>
                
                        <tr>
                                <td><br></td>
                        </tr>
                
                <tr>
                        <td>
                        <a href='javascript:void(0)'>
                        <input name='reset' type='reset' value='Effacer' class='reset'/>
                        </a>

                        <a href='javascript:void(0)'>
                        <input type='submit' name='envoi' value='Envoyer' class='submit'/>
                        </a>
                        </td>
                </tr>
                        
                </table>
    </form>";
        
?>

Y-a-t-il une erreur?

[E.Bzz]

Y-a-t-il une erreur?

Relis la FAQ ...

A+

[johan0510]

c'est effectivement ce que je fais mais je ne trouve toujours pas la solution...
voici le code que j'ai modifié :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
function verifHeure(){
// Mise en place de la première heure
d1 = heure_debut;
 
// Mise en place de la seconde heure
d2 = heure_fin
 
if(d1 > d2)
alert("L'heure de début est plus grande que l'heure de fin");
else if(d1 <=d2)
alert("L'heure de début est égale à l'heure de fin");
}
</script>

mais je ne pense pas que cela vienne de ça... c'est surement mon onchange ??

[E.Bzz]

Un indice : il faut que tu adaptes cette partie là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
// Mise en place de la première date
d1 = new Date(0);
d1.setFullYear(2006, 11, 27)
 
// Mise en place de la seconde date
d2 = new Date(0);
d2.setFullYear(2006, 0, 18)

Je sais : c'était plus simple de la supprimer, mais du coup ça marche un peu moins bien

A+

[johan0510]

Le problème c'est que moi j'ai une liste déroulante avec les choix des heures. C'est à dire 1, 2, 3, 4 etc... ce n'est pas une heure de type 00:00:00.
Dans ma base de données c'est un smallint (2).

Je n'ai donc pas besoin de cette partie je pense... t'en penses quoi ?

[E.Bzz]

Je n'ai donc pas besoin de cette partie je pense... t'en penses quoi ?

Si pour une même date tu autorises une heure de début = 17 et une heure de fin = 8, effectivement tu peux te passer de gérer les heures.

Pour les dates, faudra quand même que tu intègres les tiennes.
A moins que tu souhaites comparer à chaque fois le 27/12/2006 et le 18/01/2006 ...

Avant de te décider, je te propose un peu de lecture (toute la page, pas seulement la comparaison de 2 dates), ça te donnera peut être des idées :
http://javascript.developpez.com/faq/?page=date

A+

[johan0510]

je me re-explique
j'ai un formulaire dont voici l'interface :



Je vois pas pourquoi tu me parles de la date sachant que je souhaite gérer que l'heure de début et l'heure de fin. En gros je souhaite juste que :
heure_debut<heure_fin

je ne pense pas avoir besoin d'une fonction comme celle intitulé "Comment vérifier si un champ qui contient la date et l'heure au format(aaaa-mm-jj hh:mm:ss) est bien rempli ?" dans le lien que tu m'as fourni. je me trompes ?

[E.Bzz]

je me trompes ?

Non.
C'est moi qui me suis trompé en pensant qu'il s'agissait d'une vrai question

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if (a<=b) {
...}

A+

[johan0510]

tu peux le dire si ma question est basique.. sa ne me vexera pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function verifheure(){
// Mise en place de la première heure
var heure_Debut;
// Mise en place de la seconde heure
var heure_Fin
 
if(a <= b)
alert("L'heure de début est plus petite ou égale à l'heure de fin");
}

il suffit seulement de ça ?

[E.Bzz]

Disons que je cherchais dans la mauvaise direction : ce n'est qu'une comparaison de valeurs numériques sans lien avec les dates/heures

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function verifheure(){
// Mise en place de la première heure
var heure_Debut = document.getElementById('heure_debut').value;
// Mise en place de la seconde heure
var heure_Fin = document.getElementById('heure_fin').value;
 
if (heure_Fin <= heure_Debut)
alert("L'heure de début est plus petite ou égale à l'heure de fin");
}

A+

[E.Bzz]

Un oubli : il faut que tu ajoutes un id égal au name dans chacun des select ...

A+

[johan0510]

merci e.Bzz pour tes réponses, j'ai fait ce que tu m'as dit c'est a dire :

code de la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script>
function verifheure(){
// Mise en place de la première heure
var heure_Debut = document.getElementById('heure_debut').value;
// Mise en place de la seconde heure
var heure_Fin = document.getElementById('heure_fin').value;
 
if (heure_Fin <= heure_Debut)
alert("erreur, l'heure de fin doit être supérieur à l'heure de début");
}
</script>

code des select :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name='heure_debut' id='heure_debut' onchange='verifheure(this)'>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name='heure_fin' id='heure_fin' onchange='verifheure(this)'>

le code fonctionne cependant je souhaiterais que quand je clique sur "envoyer" cela se bloque si c'est pas possible...

il faut que je rajoute un "onchange" ??

[Bovino]

Essaye quand même de faire preuve d'un peu d'imagination...
On se doute bien que le but n'est pas en soi d'afficher une alert, donc complète le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if (heure_Fin <= heure_Debut)
alert("erreur, l'heure de fin doit être supérieur à l'heure de début");
document.getElementById('id_du_submit').disabled = true;
}
else{
document.getElementById('id_du_submit').disabled = false;
}

Mais ce n'est qu'un exemple !

[FMaz]

Peut-être bourrin comme solution, mais s'il rajoute des 0 à ses heures et ses minutes, pour être capable de compiler des valeur telle que:
"01:32"
"11:12"
"14:01"

... un tri par ordre alphabetique va mettre ses trucs dans l'ordre, alors il pourrais simplement faire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
if("01:32" > "14:01")
{
}

... oui oui, ca marche !

Bon c'est un peu dégueulasse, mais vu la simplicité et le nombre de lignes, je me devais de le souligner



Edit:
Visiblement j'avais pas tout lu le sujet
Je pensais qu'il avait 2 selectbox:
[Heure] : [Minute]

Et qu'on lui suggérais de générer des timestamps pour faire la comparaison.

[johan0510]

merci bovino mais je comprends pas...
je viens de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function verifheure(){
// Mise en place de la première heure
var heure_Debut = document.getElementById('heure_debut').value;
// Mise en place de la seconde heure
var heure_Fin = document.getElementById('heure_fin').value;
 
if (heure_Fin <= heure_Debut)
alert("erreur, l'heure de fin doit être supérieur à l'heure de début");
document.getElementById('envoi').disabled = true;
}
else{
document.getElementById('envoi').disabled = false;
}

mes select :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name='heure_debut' id='heure_debut' onchange='verifheure(this)'>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name='heure_fin' id='heure_fin' onchange='verifheure(this)'>

mon submit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type='submit' name='envoi' id='envoi' value='Envoyer' class='submit' onchange='verifheure(this)'/>

et ça ne fonctionne pas...

[FMaz]

Il te manque une {

Edit
et une } aussi.

Re-edit:
Et il me semble avoir un certain bug de logique dans le fait de tripple valider les champs. Si par défaut il sont à 0 et 0, il faudra ABSOLUMENT que l'utilisateur commence par définir la fin AVANT le début.

Ce qui me semble contre-ergonomique et contre-intuitif.