Level 7
You want a button group?
Oct 7, 2019
5
Level 5
Dynamic button for multible routes based on select
I have a table which has three buttons for show, edit, delete record .. instead of all this buttons i want to make a select box with this values and one button .. when i click the button it take the selected value as a route
my code
@extends('layouts.master')
@section('content')
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex align-items-center">
<h3 class="card-title">{{ __('site.users') }}</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<table>
<thead>
<tr>
<th class="th-sm">Id</th>
<th class="th-sm">{{ __('site.name') }}</th>
<th class="th-sm"> </th>
</tr>
</thead>
<tbody>
@foreach ($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user-> name }}</td>
<td class="text-center">
<a href="#" class="btn btn-default btn-sm" data-toggle="modal" datatarget="#modal-default-{{ $user->id }}">District</a>
</td>
<td class="text-center">
<!-- i want to replace this three buttons by a select box has values show,edit ande delete with dynamic button-->
<a href="{{ route('dashboard.users.show' , $user->id) }}">{{ show</a>
<a href="{{ route('dashboard.users.edit' , $user->id) }}" >edit</a>
<a href="{{ route('dashboard.users.destroy' , $user->id) }}" >delete</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
@endsection
Level 5
If I've understood you correctly, you need a dropdown select menu, and on selection of an option trigger a form submit.
For this you'll need onchange event handler and use window.replace or window.location to redirect the user to your routes.
Hope this helps.
Level 5
yes .. something like that .. how to do that !? in code please :-)
Level 7
Can you use this? it's not a select box, but I don't see how that should work myself.
This is based on bootstrap4
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="{{ route('dashboard.users.show', $user) }}">Show</a>
<a class="dropdown-item" href="{{ route('dashboard.users.edit', $user) }}">Edit</a>
<a class="dropdown-item" href="{{ route('dashboard.users.destroy', $user) }}" onclick="event.preventDefault();document.getElementById('delete-form').submit();">Delete</a>
<form id="delete-form" action="{{ route('dashboard.users.destroy', $user) }}" method="POST" style="display: none;">
@csrf
@method('DELETE')
</form>
</div>
</div>
</div>
1 like
Level 5
That's it ... thank you so much
1 like
Please or to participate in this conversation.