Discussion :

[Trebor]

Bonjour à tous.

Je suis désolé de poster ici, si cela ne correspond pas mais ma demande concerne plusieurs langages.

J'ai créé une petite appli via Laravel et livewire (qui utilise AlpineJs).
Dans mon appli, j'ai un formulaire pour enregistrer des données dans ma BDD. Jusqu'ici, je m'en sors.
J'ai un champ date et heure de debut et date et heure de fin.
Lors de la perte de focus, si toutes les valeurs sont renseignées, je coche une également une case en fonction de la situation.

Mon javascript semble fonctionner et me renseigne correctement les champs mais lorsque je soumet mon formulaire, les valeurs restent "NULL" dans la BDD. Si je saisi manuellement les champs tout fonctionne.

Je pense que je n'emploie pas la bonne méthode ou peut-être qu'il y a un conflit avec livewire. Pourriez-vous m'aider à solutionner mon problème.

Voici le code HTML de ma page :

Code HTML :

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
<!-- DATE ET HEURE DE DEBUT / DE FIN + N° SEMAINE-->
                    <div class="flex items-center mb-6 mt-3">
                        <div class="">
                            <label class="block text-white font-bold mb-1 pr-4" for="inline-full-name">
                                Date et Heure de début de stage
                            </label>
                        </div>
                        <div class="">
                            <input wire:model="date_heure_debut" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" type="datetime-local" value="" id="dhdebut" onfocusout="calculjour()">
                        </div>
                        <div class="pl-2">
                            <label class="block text-white font-bold mb-1 pr-4 text-right" for="inline-full-name">
                                Date et Heure de fin de stage
                            </label>
                        </div>
                        <div class="">
                            <input wire:model="date_heure_fin" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="dhfin" type="datetime-local" step="1800" value="" onfocusout="calculjour()">
                        </div>
                        <div class="pl-2">
                            <label class="block text-white font-bold mb-1 pr-4 text-right" for="inline-full-name">
                                N° de semaine
                            </label>
                        </div>
                        <div class="">
                            <input wire:model="num_semaine" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="numsem" type="text" value="">
                        </div>
                    </div>
                    <!--  -->
 
                    <!-- INDICATION DEBUT OU FIN DEMI JOURNEE-->
                    <div class="flex items-center mb-6 mt-3">
                        <div class="">
                            <label class="block text-white font-bold mb-1 pr-4" for="inline-full-name">
                                Début de stage l'après-midi
                            </label>
                        </div>
                        <div class="">
                            <input wire:model="debut_stage_pm" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="startpm" type="checkbox">
                        </div>
                        <div class="pl-2">
                            <label class="block text-white font-bold mb-1 pr-4" for="inline-full-name">
                                Fin de stage le matin
                            </label>
                        </div>
                        <div class="">
                            <input wire:model="fin_stage_am" class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" id="endam" type="checkbox">
                        </div>
                    </div>

Le script Js :

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
 
                            function calculjour() {
 
                                var datedebut = new Date(document.getElementById('dhdebut').value);
                                var datefin = new Date(document.getElementById('dhfin').value);
 
 
                                if (datedebut != 'Invalid Date' && datefin != 'Invalid Date') {
                                    var oneJan = new Date(datedebut.getFullYear(), 0, 1);
                                    var numberOfDays = Math.floor((datedebut - oneJan) / (24 * 60 * 60 * 1000));
                                    var result = Math.ceil((datedebut.getDay() + 1 + numberOfDays) / 7);
 
                                    let heuredebut = datedebut.getHours();
                                    let heurefin = datefin.getHours();
 
                                    if (heuredebut > '12') {
                                        document.getElementById("startpm").checked = true;
                                    } else {
                                        document.getElementById("startpm").checked = false;
                                    }
 
                                    if (heurefin < '14') {
                                        document.getElementById("endam").checked = true;
                                    } else {
                                        document.getElementById("endam").checked = false;
                                    }
 
                                    document.getElementById("numsem").value = result;
                                }
                            }

Merci de l'aide que vous pourrez m'apporter.

[mathieu]

avez-vous regardé dans la console de développement de votre navigateur si la requete http envoyée contient le bonnes valeurs ?

[Trebor]

Non, effectivement, je n'ai pas fait ce test.

J'ai testé en n'utilisant pas livewire et à ce moment, tout fonctionne.

Je pense qu'il s'agit d'un problème avec Alpine JS, il me faut probablement coder autrement mais aucune idée de comment faire.