Pass id to materialize modal laravel

I'm trying to send the ID of a registered user to a modal for been able to edit the DB directly from the modal, but since it's a modal and not other page I can't use a routing method. And i don't know if it's possible using JavaScript

Here is my view code:

table class="highlight responsive-table">
    <thead>
        <tr>
            <th data-field="id" hidden>ID</th>
            <th data-field="name">Nombre</th>
            <th data-field="last_name">Apellidos</th>
            <th data-field="course">Curso</th>
            {{-- <th data-field="date">Fecha</th> --}}
            <th style="text-align: right;">Acciones</th>
        </tr>
    </thead>

    <tbody>

        @foreach($professors as $professor)
            <tr>
                <td hidden>{{$professor->id}}</td>
                <td>{{$professor->name}}</td>
                <td>{{$professor->last_name}}</td>
                <td>{{$professor->course}}</td>
                <td style="text-align: right; width: 20em">

                    <button data-target="modalEdit" class="waves-effect waves-light btn yellow darken-2"><i class="material-icons left" style="margin:0">create</i></button>

                    </form>

                </td>
            </tr>
        @endforeach

    </tbody>
</table>

  <!-- Modal Structure -->
<div id="modalEdit" class="modal modal-fixed-footer">
    <form class="col s12" method="POST" action="/professors">
        <div class="modal-content">
            <h4>Editar a {{ $professor->name }}</h4>
            {{csrf_field()}}
        <div class="row">
            <div class="input-field col s6">
                <input id="name" name="name" type="text" class="validate" required>
                    <label for="first_name">Nombre</label>
            </div>
            <div class="input-field col s6">
                <input id="last_name"  name="last_name" type="text" class="validate" required>
                <label for="last_name">Apellidos</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input id="course" name="course" type="text" class="validate" required>
                <label for="course">Nombre de curso</label>
            </div>
        </div>
        <div class="file-field input-field">
            <div class="btn btn yellow darken-2">
                <span>Subir foto</span>
                <input type="file">
            </div>
            <div class="file-path-wrapper">
                <input class="file-path validate" type="text">
            </div>
        </div>
        <p>Nota: Porás actualizar la foto usando el botón editar.</p>
    </div>

    <div class="modal-footer">
        <button type="submit" class="waves-effect waves-light btn blue darken-2 ">Registrar</button>
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Cerrar</a>
    </div>
</form>

    <script>
    $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('#modalEdit').modal();
    });
</script>

I Need to pass the ID to the modal to get the info of the user from the DB.

Solution

You can pass the id by placing an attribute on your DOM button

<button data-target="modalEdit" class="waves-effect waves-light btn   yellow darken-2" data_professor_id="{{$professor->id}}"><i class="material-icons left" style="margin:0">create</i></button>

And place a input[type="hidden"] input inside the modal:

<div id="modalEdit" class="modal modal-fixed-footer">
<form class="col s12" method="POST" action="/professors">
    <div class="modal-content">
        <h4>Editar a {{ $professor->name }}</h4>
        {{csrf_field()}}
        <div class="row">
        <!-- Hidden Input Professor Id -->
        <input type="hidden" name="professor_id" />
        ....
        </div>
    </div>
</form>

Then on clicking the button, you can use attr method to get that specific professor id and pass it in your new hidden input in your modal

$(document).ready(function() {
    $('button.darken-2').click(function(event) {
        var sProfessorId = $(this).attr('data_professor_id');
        var oModalEdit = $('#modalEdit');
        oModalEdit.find('input[name="professor_id"]').val(sProfessorId);
        oModalEdit.modal();
    });

});

Hope this helps for your case

Edit: If you want to get the {{ $professor->name }} as well, apply the same method the same as you are passing the id as well.

// Add this in the button as well
data_professor_name="{{$professor->name}}"

$('button.darken-2').click(function(event) {
    var sProfessorId = $(this).attr('data_professor_id');
    var sProfessorName = $(this).attr('data_professor_name'); 
    var oModalEdit = $('#modalEdit');
    oModalEdit.find('input[name="professor_id"]').val(sProfessorId);
    oModalEdit.find('h4').html('Editar a ' + sProfessorName);
    oModalEdit.modal();
});