end_time value will not be set properly

Hello,

I am trying to submit a form, which is fine, but i am having some trouble with this JS code:

document.querySelectorAll('.timeslot').forEach(timeslot => {
    timeslot.addEventListener("change", () => {
        let hours = timeslot.querySelector('.hours').value;
        let minutes = timeslot.querySelector('.minuts').value;
        end_time_value.value = (`${hours}:${minutes}`);
        console.log("end_time_value = ", end_time_value.value);
    });
});

When i submit the form, i only get the hours output (example: end_time = 12), and not the minuts. This is the html code:

        <div class="">
            <label for="" class="">End time</label>
            <div class="border-2 border-black flex justify-center content-start">
                <label for="">
                    <input type="text" name="end_time" id="end_time_value"
                           class="hours w-28 text-center"
                           maxlength="2"
                           minlength="1">
                </label>
                <label for="minuts">
                    <select class="minuts border-l-2 border-black" id="minut_box_selector">
                        <option value="00">00</option>
                        <option value="15">15</option>
                        <option value="30">30</option>
                        <option value="45">45</option>
                    </select>
                </label>
            </div>
            <br>

If anybody has a suggestion, i am all ears!

Snapey

1 year ago

Level 122

hat is timeslot ?

JazzMaster

1 year ago

Level 1

Timeslot stems from here:

    @foreach($weekday->hours as $hour)
        <div class="block relative timeslot timeslot{{ $hour->hour }} text-center"
             data-value="{{ $hour->hour->format('H:i') }}">
            <div class="z-40">
                {{ $hour->hour->format('H:i') }}
                <button onclick="openForm(event)"
                    @class([
                        "flex justify-center text-center bg-orange-500 w-full h-12",
                        $bookings->some(fn ($booking) => $booking->isHourBooked($hour->hour)) ? 'bg-red-600 cursor-not-allowed' : ''
                    ])>{{ $bookings->some(fn ($booking) => $booking->isHourBooked($hour->hour)) ? '' : 'Open' }}
                </button>
            </div>
            @unless($bookings->some(fn ($booking) => $booking->isHourBooked($hour->hour)))
                <x-popupform class="openClose" :user="$user" :hour="$hour"></x-popupform>
            @endunless
        </div>
    @endforeach

So as you properly can see, it creates the forms, since x-popupform is inside the loop, and x-popupform contains the above html code.

Please or to participate in this conversation.