How to pass a value in href into modal window in laravel?-CodePudding

I have displayed a listing in laravel from table given as below :

       <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>

                    @php $sln = 1 @endphp

                    @foreach ($roles as $role)
                        <tr>
                            <td>{{ $sln   }}</td>
                            <td>{{ $role->name }}</td>
                            <td><a href="" class="btn addbtn editrole" data-bs-toggle="modal" data-bs-target="#role-edit-modal">Edit</a></td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

I have also a modal form in bootstrap on clicking on the <a> Edit which is given below.

<div class="modal fade" id="role-edit-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Role</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="formbox">
                    <form action="" method="post" id="role-form">
                        <div class="form-group">
                            <label for="roleName">Role Name</label>
                            <input type="text" name="name" id="role-name" class="form-control" maxlength="50" value="{{ old('email', $role->name) }}">
                            <span id="role-error" hljs-string">"></span>
                        </div>
                        <div hljs-string">">
                            <button type="submit" hljs-string">">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

I wanted to pass the value of $role->id from to this modal file and display the value in$role->name`

How do I passw the value of id on clicking the edit button in jqery and trigger the modal window.

CodePudding user response：

You need to use Jquery or JS for this

<td>
    <a href="#" data-id="{{$role->id}}" class="btn addbtn editrole">Edit</a>
</td>

$('.addbtn').click(function(e){
    e.preventDefault();
    let id = $(this).attr('data-id');
    $('#role-edit-modal').modal('show');
    alert(id);
});

CodePudding user response：

You can try something like this:

View:

<td><a href="" class="btn addbtn editrole" data-bs-toggle="modal" data-bs-target="#role-edit-modal" onclick="getRoleDetails('{{$role->id}}', '{{$role->name}}');" >Edit</a></td>

JS:

function getRoleDetails (roleId, roleName) {

   // If you want to display the role ID

   document.getElementById('role-name').value = roleId;


   // If you want to display the role name

   document.getElementById('role-name').value = roleName;

}