I have a form in Laravel Blade which contains data that need to be hidden and shown dynamically. Here is the code.
@foreach ($working_orders as $key => $order)
<div class="col-lg-12 row ">
<div class="title-md">Work Order # {{$order->id}}</div>
<div class="form-group col-lg-6">
<label style="color: #44484d;">Camión</label>
<select class="form-control kt-selectpicker truck_type" required name="truck_type" onchange="getOrderFields()">
<option value="1" selected>No asignar</option>
<option value="2">Asignar empresa de logística</option>
</select>
</div>
</div>
<div class="form-group col-lg-6 assigner_div">
<label style="color: #44484d;">Assigner</label>
<div class="input-group">
<select class="form-control kt-selectpicker" required name="truck_assigner">
<option selected="" disabled>❗</option>
@foreach ($truck_assigners as $truck_assigner)
<option> {{ $truck_assigner->staffs->name }}</option>
@endforeach
</select>
</div>
</div>
</div>
@endforeach
and jQuery
function getOrderFields()
{
if ($(".truck_type :selected").val() == '2')
{
$('.assigner_div').show();
}
if ($(".truck_type :selected").val() == '1')
{
$('.assigner_div').hide();
}
}
This code hides and shows the fields but issue is I am using classes so All elements in foreach loop has same class and it hides/shows all of the fields. For example: I have two keys in array given to foreach loop. So I changes field in key 0 of loop it hides div in both of keys that is 2nd key. I need to hide/show fields for selected order not all. What is the solution to this problem?
I'd consider changing the event handler to be set using jQuery rather than using the onchange attribute. Then you can combine DOM Traversal methods with the $(this) selector to do what you're looking for. Rough Example:
$(document).on('change', 'select.truck_type', function(){
var val = $(this).val(),
assigner = $(this).parents('.row').children('.assigner_div');
assigner.toggle(val === '2');
});
In this example we used the parents, and children methods. There are many different methods that could be used though. For instance the next method:
$(document).on('change', 'select.truck_type', function(){
var val = $(this).val(),
assigner = $(this).parents('.title-md').next();
assigner.toggle(val === '2');
});
There are also the find, and closest methods:
$(document).on('change', 'select.truck_type', function(){
var val = $(this).val(),
assigner = $(this).closest('.row').find('.assigner_div');
assigner.toggle(val === '2');
});
You can use the $key in foreach loop to accomplish the given task. Pass the $key to the getOrderFields function and change the class name according to the $key as well. Following is the changed code segments according to your problem.
...
<select class="form-control kt-selectpicker truck_type" required name="truck_type" onchange="getOrderFields({{ $key }})">
...
<div class="form-group col-lg-6 assigner_div_{{ $key }}">
...
In script,
function getOrderFields(key) {
if ($(".truck_type :selected").val() == '2') {
$('.assigner_div_' + key).show();
}
if ($(".truck_type :selected").val() == '1') {
$('.assigner_div_' + key).hide();
}
}