Cannot get value from JQuery timepicker

Question

So, my friend and I have been trying to get this to work, but so far without any success. I want to select a time from an input dropdown using the timepicker, but whenever I try to pass it and add it to the database, I get "null", and I'm not really sure why.

I want to select e.g.: 10:30 and when I press the "booking" button on my page, I want to save that.

show.blade.php timepicker

{{-- Timepicker --}}
    {{-- Source: https://timepicker.co/ --}}

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<script>
// Timepicker
        $(function () {
            $('input.timepicker').timepicker({

                altField: "#timeslot",
                timeFormat: 'HH:mm',
                interval: 30,
                minTime: '10',
                maxTime: '6:00pm',
                // defaultTime: '11',
                startTime: '10:00',
                dynamic: false,
                dropdown: true,
                scrollbar: true
            });
        });
</script>

<div class="row">
        <div class="col-sm-7 text-center">
            {{-- <h4>@include('inc.todaydate')</h4> --}}
            <h3 class="text-uppercase">Select a date</h3>
            <div id="datepicker" class="text-center"></div>
            <br>
            <h3 class="text-uppercase">Select a time slot</h3>
            <input id="timepicker" type="text" class="timepicker text-center">

        </div> <!-- col-sm-8 end -->
        <div class="col-sm-1">
        </div>
        <div class="col-sm-4">
            {!! Form::open(['action' => 'PagesController@storebooking', 'method' => 'POST']) !!}

            <div class="form-group"></br>
                <h3 class="text-center">Selected Service</h3>
                <hr class="featurette-divider">
                {{-- <h4>{{$service_id}}</h4> --}}
                <h4 class="float-left">{{$service_name}}</h4>
                <h4 class="float-right">£ {{$service_price}}</h4>
                <br>
                {{Form::hidden('service_id', $service_id, ['class' => 'form-control', 'placeholder' => 'Service ID'])}}
                {{Form::hidden('service_name', $service_name, ['class' => 'form-control', 'placeholder' => 'Service Name'])}}
                {{Form::hidden('service_price', $service_price, ['class' => 'form-control', 'placeholder' => 'Service Price'])}}
                {{-- {{Form::hidden('service_price', $service_length, ['class' => 'form-control', 'placeholder' => 'Service Price'])}} --}}
            </div>
            <div class="form-group"></br>
            
            {{Form::hidden('dateofbooking', '', ['id' => 'dateofbooking'])}}
            {{Form::hidden('timeslot', '', ['id' => 'timepicker'])}}

            </div>
                {{Form::submit('Book Appointment', ['class' => 'submitbtn btn btn-primary btn-lg btn-block', 'style' => 'border-radius: 20px;'])}}
                {!! Form::close() !!}
            </div>
        </div> <!-- col-sm-4 end -->
    </div>

This is what I have in the storebooking controller

public function storebooking(Request $request)
    {
        $bookings = new Booking;
        $bookings->user_id = auth()->user()->id;
        $bookings->username = auth()->user()->username;
        $bookings->firstname = auth()->user()->firstname;
        $bookings->surname = auth()->user()->surname;
        $bookings->email = auth()->user()->email;
        $bookings->service_id = $request->input('service_id');
        $bookings->service_name = $request->input('service_name');
        $bookings->service_price = $request->input('service_price');
        $bookings->dateofbooking = $request->input('dateofbooking');

        $bookings->timeslot = $request->input('timepicker');

        dd($request->all()); // for debugging

        $bookings->save();
        return redirect('history')->with('success', 'Appointment Booked');
    }

Answer 1

You can use JQuery on the bottom :

<script type="text/javascript">
   $(document).ready(function(){
      $('#timepicker').change(function(){
          var val = $('#timepicker').val();
          $('#time').val(val);
      });
   });
</script>

And change :

{{ Form::hidden('timeslot', '', ['id' => 'timepicker']) }}

To

{{ Form::hidden('timeslot', '', ['id' => 'time']) }}