Comparaison de deux selects

Version imprimable

Bonjour

Je fait un site ou on doit sélectionner une heure de début et une heure de fin dans un formulaire j'ai donc fait deux select avec les différents choix d'horaire mais j'ai une question comment faire pour que lors de l'envoi du formulaire il check si l'heure de début est bien inférieur a l'heure de fin ?

Merci
voilà le bout de code pour l'instant

Code:

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
<b>de</b>
<select id="selectbasic" name="selectheuredebut" class="input-xlarge" tabindex="1" required="required">
    <option selected="selected"></option>
    <option value="1">7:00</option>
    <option value="2">7:30</option>
    <option value="3">8:00</option>
    <option value="4">8:30</option>
    <option value="5">9:00</option>
    <option value="6">9:30</option>
    <option value="7">10:00</option>
    <option value="8">10:30</option>
    <option value="9">11:00</option>
    <option value="10">11:30</option>
    <option value="11">12:00</option>
    <option value="12">12:30</option>
    <option value="13">13:00</option>
    <option value="14">13:30</option>
    <option value="15">14:00</option>
    <option value="16">14:30</option>
    <option value="17">15:00</option>
    <option value="18">15:30</option>
    <option value="19">16:00</option>
    <option value="20">16:30</option>
    <option value="21">17:00</option>
    <option value="22">17:30</option>
    <option value="23">18:00</option>
    <option value="24">18:30</option>
    <option value="25">19:00</option>
    <option value="26">19:30</option>
    <option value="27">20:00</option>
</select>
<b>a</b>
<select id="selectbasic" name="selectheurefin" class="input-xlarge" tabindex="1" required="required">
    <option selected="selected"></option>
    <option value="1">7:00</option>
    <option value="2">7:30</option>
    <option value="3">8:00</option>
    <option value="4">8:30</option>
    <option value="5">9:00</option>
    <option value="6">9:30</option>
    <option value="7">10:00</option>
    <option value="8">10:30</option>
    <option value="9">11:00</option>
    <option value="10">11:30</option>
    <option value="11">12:00</option>
    <option value="12">12:30</option>
    <option value="13">13:00</option>
    <option value="14">13:30</option>
    <option value="15">14:00</option>
    <option value="16">14:30</option>
    <option value="17">15:00</option>
    <option value="18">15:30</option>
    <option value="19">16:00</option>
    <option value="20">16:30</option>
    <option value="21">17:00</option>
    <option value="22">17:30</option>
    <option value="23">18:00</option>
    <option value="24">18:30</option>
    <option value="25">19:00</option>
    <option value="26">19:30</option>
    <option value="27">20:00</option>
</select>

Attention tes deux <select> ont le même id, normalement un id doit être unique. Là tu ne peux pas accéder au second <select> avec getElementById. Corrige déjà ce problème et après ajoute le code JavaScript. Je vais partir sur ces deux id :
Code:

1 2 3 4 5 6 <select id="heure-debut" name="selectheuredebut" ...> ... </select> <select id="heure-fin" name="selectheuredebut" ...> ... </select>
Il te faut une fonction qui sera appellée lorsque l'un des deux <select> lance un évènement change. Tu peux surveiller aussi les évènements keyup mais c'est un choix qui a des pour et des contre.

Dans cette fonction, tu dois récupérer les attributs value. Ils te donnent des chaînes (par exemple "7"), et tu dois les convertir en nombres avec parseInt pour les comparer correctement. En effet, la comparaison de chaînes se fait dans l'ordre lexicographique, par exemple la chaîne "27" est inférieure à la chaîne "3", donc la conversion en nombre est obligatoire pour un résultat correct.
Code:

1 2 3 4 5 6 7 function verifierDebutFin() { var debut = parseInt(document.getElementById("heure-debut").value); var fin = parseInt(document.getElementById("heure-fin").value); if (fin < debut) { alert("Veuillez choisir une heure de fin supérieure à l'heure de début."); } }
Là j'ai mis un alert pour faire simple, mais si tu as un endroit dans le HTML où insérer le message, c'est mieux.

Pour surveiller les évènements change, utilise addEventListener comme ceci :
Code:

1 2 document.getElementById("heure-debut").addEventListener("change", verifierDebutFin); document.getElementById("heure-fin").addEventListener("change", verifierDebutFin);
Veille à ce que ton script s'exécute après que les <select> aient été créés, sinon ça ne marchera pas. Donc place ton script à la fin du <body> ou utilise un évènement load ou DOMContentLoaded.

12/06/2015, 01h00
tib44

nickel Merci ça marche
en effet je n'avais pas fait attention aussi pour les id identiques
12/06/2015, 01h18
tib44
Je viens de trouver un petit truc c'est que si la date de debut est superieur a la date de fin et que l'on appui sur OK on peut quand meme envoyer sur formulaire avec des horaires pas cohérent

je pensais donc rajouter deux
Code:

1 2 document.getElementById("selectHeureDebut").addEventListener("change", verifierDebutFin); document.getElementById("selectHeureFin").addEventListener("change", verifierDebutFin);
quand j'appui sur le bouton d'envoi du formulaire avec ce bouton :
Code:

1 2 3 <div class="controls"> <button id="Reserver" name="Reserver" class="btn btn-primary">Réserver</button> </div>
mais je ne sais pas trop quoi mettre a la place de change

Edit : Je viens de trouver j'ai ajouter

Code:

document.getElementById("Reserver").addEventListener("click", verifierDebutFin);