Laravel: Passing selected values to route function from dropdown selection - php

Question

I have a dropdown list that I want to be able to select a value and modify a value in the MYSQL table by calling a function on change.
The drop list is created with:
<td>
{{-- {{ $ticket->priority}} --}}
<div class="form-group{{ $errors->has('priority') ? 'has-error': '' }}">
<div class="col-md-6">
<select id="priority" type="" class="form-control" name="priority"
onchange="{{ url('admin/updatePriority/',['ticket_id' => $ticket->ticket_id, 'priority'=> value ] )}}">
<option value="">{{ $ticket->priority}}</option>
<option value="Low">Low</option>
<option value="Moderate">Moderate</option>
<option value="High">High</option>
</select>
</div>
</div>
</td>
The function in the Routes is:
Route::group(['prefix' => 'admin', 'middleware' => 'admin'], function () {
Route::get('tickets', 'TicketsController#index');
Route::post('close_ticket/{ticket_id}', 'TicketsController#close');
Route::post('updatePriority/{ticket_id}/{priority}', 'TicketsController#updatePriority');
});
The code for the function is:
public function updatePriority($ticket_id, $priority)
{
$ticket = Ticket::where('ticket_id', $ticket_id)->firstOrFail();
$ticket->priority = $priority;
$ticket->save();
}
When I make a selection from the dropdown box, the onchange function is not triggered, so the value remains unchanged in the table.
Can anyone point me in the right direction on this?

Answer 1

HTML event listeners expect Javascript code or function calls, a URL is not valid in such context
Here's what you can do
<td>
<div class="form-group{{$errors->has('priority') ? 'has-error': '' }}">
<div class="col-md-6">
<select id="priority" type="" class="form-control" name="priority" onchange="change({{ $ticket->ticket_id }}, this.value)">
<option value="">{{ $ticket->priority}}</option>
<option value="Low">Low</option>
<option value="Moderate">Moderate</option>
<option value="High">High</option>
</select>
</div>
</div>
</td>
<script>
function change(ticket_id, priority) {
const response = fetch('/admin/updatePriority/' + ticket_id + '/' + priority, {
headers: {
"Content-Type": "application/json",
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
"X-CSRF-Token": document.head.querySelector('meta[name="csrf-token"]')
},
method: "post",
});
console.log(JSON.stringify(response));
}
</script>
This is using the native Ajax fetch API to perform the request to the URI with the dynamically changed value of the select element as parameter
Note that you still need to deal with CSRF header and to properly call the parameters in the controller from the request object
Hope this helps