尽管显示“ style =” display:none'”,但表单仍在显示,jquery无法正常工作

因此,我在这里有几个无法解决的问题:

My form is displaying despite style="display:none", and my jquery click action for #createBtn isn't working. I can't figure out why though.... Maybe some clearer minds can give me some insight?

@extends('layouts.app')

@section('content')

    <div class="col-md-10 offset-md-1">
        <div class="row justify-content-center">
            <table class="table">
                <thead>
                    <tr class="d-flex">
                        <th style="width:19%">Date</th>
                        <th style="width:10%">Start time</th>
                        <th style="width:10%">Duration (min)</th>
                        <th style="width:10%">End time</th>
                        <th style="width:10%">Fee (EUR)</th>
                        <th style="width:10%">Status</th>
                        <th style="width:15%">Student</th>

                        <th style="width:16%">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($lessons as $lesson)
                        <tr class="d-flex">
                            <td style="width:19%">{{$lesson->date()}}</td>
                            <td style="width:10%">{{$lesson->startTime()}}</td>
                            <td style="width:10%">{{$lesson->duration()}}</td>
                            <td style="width:10%">{{$lesson->endTime()}}</td>
                            <td style="width:10%">{{$lesson->fee}}</td>
                            <td style="width:10%">{{$lesson->status}}</td>
                            <td style="width:15%">{{$lesson->user->name?? ''}}</td>

                            <td style="width:16%"></td>
                        </tr>
                    @endforeach
                    <div id="createBtnDiv">
                        <tr class="d-flex">
                            <td style="width:100%; text-align:center">
                                <button type="button" id="createBtn" class="btn btn-primary"><i class="fa fa-plus"></i> Add a new lesson</button>
                            </td>
                        </tr>
                    </div>
                        <form id="createForm" style="display:none" action="{{route('admin.lessons.store', ['admin_username' => $admin->username])}}" method="post">
                            @csrf
                            <tr class="d-flex">
                                <td style="width:19%;">
                                    <div class="date" id="datepicker" data-target-input="nearest" style="position:relative;">
                                        <input type="text" id="datePickerInput" class="form-control datePicker datetimepicker-input{{ $errors->has('date') ? ' is-invalid' : '' }}" data-toggle="datetimepicker" data-target="#datepicker" name="date"/> 
                                    </div>
                                    @if ($errors->has('date'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('date') }}</strong>
                                        </span>
                                    @endif     
                                </td>
                                <td style="width:10%">   
                                    <div class="date" id="startTimePicker" data-target-input="nearest" style="position:relative;">
                                        <input type="text" id="startTimePickerInput" class="form-control startTimePicker datetimepicker-input{{ $errors->has('start_time') ? ' is-invalid' : '' }}" data-toggle="datetimepicker" data-target="#startTimePicker" name="start_time"/>      
                                    </div>
                                    @if ($errors->has('start_time'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('start_time') }}</strong>
                                        </span>
                                    @endif
                                </td>
                                <td style="width:10%">
                                    <select id="duration" class="form-control duration" name="duration">
                                        <option selected>60</option>
                                        <option>45</option>
                                        <option>30</option>
                                    </select>
                                </td>
                                <td style="width:10%">
                                    <input class="form-control" id="endTimePicker" type="text" value="" placeholder="" disabled>
                                </td>
                                <td style="width:10%">
                                    <input class="form-control" id="fee" name="fee" type="text" value="{{old('fee')?? $admin->adminSetting->fee}}">
                                    @if ($errors->has('fee'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('fee') }}</strong>
                                        </span>
                                    @endif
                                </td>
                                <td style="width:10%"></td>
                                <td style="width:15%"></td>

                                <td style="width:16%">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </td>   
                            </tr>
                        </form>
                </tbody>
            </table>






        </div>
    </div>



@endsection

@section('javascript')

    <script>

        $(document).on('click','#createBtn', function() {
            console.log('clicked');
            $('#createBtnDiv').hide();
            $('#createForm').show();
        });



        var startTime = moment();

        var duration = $('select.duration').children('option:selected').val();

        var endTime = moment().add(duration, 'm').format('HH:mm');

        $('#endTimePicker').val(endTime);



        $(function () {
                $('#datepicker').datetimepicker({
                    format: 'ddd DD.MM.YYYY',
                    useCurrent: false,
                    defaultDate: moment()

                });
                $('#datepicker').on("change.datetimepicker", function (e) {

                    if (e.date == undefined) {

                        $('input.datePicker').val(startTime.format('DD.MM.YYYY'));
                    } 
                })
            });

        $(function () {
            $('#startTimePicker').datetimepicker({
                format: 'HH:mm',
                useCurrent: false,
                defaultDate: moment()

            });
            $('#startTimePicker').on("change.datetimepicker", function (e) {

                if (e.date == undefined) {

                    $('input.startTimePicker').val(startTime.format('HH:mm'));
                } else {
                    startTime = e.date;
                }
                duration = $('select.duration').children('option:selected').val();
                endTime = startTime.add(duration, 'm').format('HH:mm');
                $('#endTimePicker').val(endTime);

            })
        });
        $(function () {

            $('#duration').on("change", function (e) {
                startTime = $('#startTimePicker').datetimepicker('viewDate')
                duration = $(this).val();
                endTime = startTime.add(duration, 'm').format('HH:mm');
                $('#endTimePicker').val(endTime);

            })
        });
    </script>
@endsection
评论