Modal update issue in laravel

[Pirakavi]

my Controller function

public function editDoctor($id)
{
        $doctor = $this->doctorsRepository->getDoctorById($id);

        return view('doctor.edit', compact(['doctor']));
 }

This is my modal form

<!-- Edit Doctor modal --> <div class="custom-modal"> <div class="modal fade" id="editDoctorPopup"  role="dialog" aria-labelledby="editDoctorPopupLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="editDoctorPopupLabel">Edit Doctor</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="alert alert-danger" id="errorAlert" style="display:none;"></div> <div class="alert alert-success" id="successAlert" style="display:none;"></div> <form id="edit-doctor-form"> <input type="hidden"  id="doctor_id" name="doctor_id" value="{{ $doctor->doctor_id }}"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="doctor-list">Doctor Initials</label> <input type='text' class="form-control" id="doc_initials" name="doc_initials" value=""/> <span style="font-size:11px;">Max. 2 characters</span> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="doctor-list">Doctor Name</label> <input type='text' class="form-control" id="doctor_name" name="doctor_name" value=""/> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="doctor-list">Display Name</label> <input type='text' class="form-control" id="display_name" name="display_name" value=""/> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="doctor-list">Registration No</label> <input type='text' class="form-control" id="registration_no" name="registration_no" value=""/> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="doctor-list">Phone No</label> <input type='text' class="form-control" id="phone" name="phone" value=""/> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="doctor-list">Mobile No</label> <input type='text' class="form-control" id="mobile" name="mobile" value=""/> </div> </div> </div> </form> </div> <div class="modal-footer"> <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}"> <button type="button" class="btn btn-secondary" onClick="closeEditDoctor()">Close</button> <button type="button" class="btn btn-primary" id="editBtn" onClick="editDoctor({{$doctor->doctor_id}})">Save</button> </div> </div> </div> </div> </div> <!-- Edit Doctor modal end -->

this is my button code

<button type="button" 
                                data-doctor-id="{{ $doctor->doctor_id }}"
                                data-initial="{{ $doctor->doc_initials }}"  
                                data-name="{{ $doctor->doctor_name }}"
                                data-display="{{ $doctor->display_name }}"  
                                data-regi="{{ $doctor->registration_no }}"
                                data-phone="{{ $doctor->phone }}"
                                data-mobile="{{ $doctor->mobile }}"    
                                data-toggle="modal" data-target="#editDoctorPopup"
                          class="edit-btn m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill editDoctorPopup" 
                                 title="Edit"> <i class="flaticon-edit"></i> </button>

this is my jquery

$('#editDoctorPopup').on('show.bs.modal', function (event) {

    var button = $(event.relatedTarget) 
    var doctorId = button.data('doctor-id')
    var initial = button.data('initial')
    var name = button.data('name')
    var display = button.data('display')
    var regi = button.data('regi')
    var mobile = button.data('mobile')
     var phone = button.data('phone')

    var modal = $(this)

    modal.find('.modal-body #doc_initials').val(initial)
    modal.find('.modal-body #doctor_name').val(name)
    modal.find('.modal-body #display_name').val(display)
    modal.find('.modal-body #registration_no').val(regi)
    modal.find('.modal-body #mobile').val(mobile)
     modal.find('.modal-body #phone').val(phone)
})

function editDoctor(id){
    this.doctorId = id;
    this.docInitial  = $("#doc_initials").val();

    }

In this case I pass the data to modal but I couldn't get correct id to submit the form

[Dani]

When you load the page, what does the actual HTML look like for the button? Does it properly fill in the correct values for data-doctor-id, data-name, etc?

[Pirakavi]

yes, I got correct values

[Dani]

So then the bug must be in the 'show.bs.modal' function.

What if you put console.log(doctorId) right above line 12 of your code above. When the modal loads, does it execute and spit out the correct ID in the developer tools console of your web browser?