After validation fails. The values are flashed to the fields.
Now, I am trying to use old input to display all the dynamic fields where the user-added data. Therefore, I am using an array called "name" and loop through them to determine how many names are stored in the array. This determines the number of fields I need to display. But my field is a select field. This already checks within an array which field is select.
So, for example, the user selects "Jan" from the field called "name". Using the dynamic fields, a new field is added. Here the user selects "Piet". He submits, but he made somewhere else in the form a mistake, the validation fails. Now, my two select fields ("name") displays in both cases are Piet, Instead of piet and Jan. And I also need to press "Add Task" button in order to display the second field.
I guess I need to add some unique ID. But I don't see how I can do this because I am already working within an array for the select option. Thanks for the input
Blade template.
@if( old('name') )
{{ $i=0 }}
@foreach( old('name') as $field)
{{ $i++ }}
<div id="dynamicFields">
<!-- Start row -->
<div class="row">
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="showName p-2" for="name" >Name</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
### Name field
<!-- First time Jan is selected second time Piet is select but after failed validation. The form displays always Piet -->
<div class="flex-fill p-2">
<select class="form-control showName" id="selectNameType0" name="name[]" onchange="showType(0)">
<option value="Jan" {{ in_array('Jan', old('name') ?? [] ) ? 'selected' : '' }}>Jan</option>
<option value="Piet" {{ in_array('Piet', old('name') ?? [] ) ? 'selected' : '' }}>Piet</option>
<option value="Tom" {{ in_array('Tom', old('name') ?? [] ) ? 'selected' : '' }}>Tom</option>
<option value="Dean" {{ in_array('Dean', old('name') ?? [] ) ? 'selected' : '' }}>Dean</option>
<option value="Bert" {{ in_array('Bert', old('name') ?? [] ) ? 'selected' : '' }}>Bert</option>
</select>
</div>
</div>
</div>
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="p-2" for="type" id="showTypeLabel0" style="display: none;">Type</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<select class="form-control" id="showType0" name="type[]" style="display: none;">
<option value="Operator" {{ in_array('Operator', old('type') ?? [] ) ? 'selected' : '' }}>Operator</option>
<option value="Analysist" {{ in_array('Analysist', old('type') ?? [] ) ? 'selected' : '' }}>Analysist</option>
</select>
</div>
</div>
</div>
</div> <!-- End row -->
<!-- Start row -->
<div class="row mb-4">
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="showName p-2" for="date">Date</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<input class="form-control showName"
type="date"
name="date[]"
>
</div>
</div>
</div>
</div> <!-- End row -->
</div> <!-- End dynamicFields -->
@endforeach
@endif
<div class="row showName" style="margin: 10px;">
<div class="col-4 offset-4">
<input type="button" name="submit" id="submit" class="btn btn-success btn-block addmore" value="Add Task" />
</div>
</div>
jQuery for dynamic fields
$(document).ready(function() {
// Start from 1
var i = 1;
// When button clicked
$('.addmore').click(function(){
i++;
// add the following layout
$('#dynamicFields').append('<div class="row removing'+i+'"><div class="col-2"><div class="d-flex"><div class="p-1"><label class="showName p-2" for="name" > Name</label></div></div></div><div class="col-4"> <div class="d-flex"><div class="flex-fill p-2"><select class="form-control showName" id="selectType'+i+'" onchange="showType('+i+')" name="name[]"><option></option><option value="Jan">Jan</option><option value="Piet">Piet</option><option value="Tom">Tom</option><option value="Bert">Bert</option><option value="Dean">Dean</option></select></div></div></div><div class="col-2"><div class="d-flex"><div class="p-1"><label class="p-2" id="showNameTypeLabel'+i+'" for="type" style="display: none;"> Type</label></div></div></div><div class="col-4"> <div class="d-flex"><div class="flex-fill p-2"><select class="form-control" id="showNameType'+i+'" name="type[]" style="display: none;"><option></option><option value="Operator">Operator</option><option value="Analysist">Analysist</option></select></div></div></div></div><div class="row removing'+i+'"><div class="col-2"><div class="d-flex"><div class="p-1"><label class="showName p-2" for="date"> Date</label></div></div></div><div class="col-4"> <div class="d-flex"><div class="flex-fill p-2"><input class="form-control showName" type="date" name="date[]"></div></div> </div><div class="col-2"><div class="d-flex"><div class="p-1"><label class="showName p-2" for="time"> Time</label></div></div></div><div class="col-4"> <div class="d-flex"><div class="flex-fill p-2"><input class="form-control showName" type="time" name="time[]" ></div></div> </div></div><div class="row removing'+i+' showName" style="margin: 10px;"><div class="col-4 offset-4"><button type="button" class="btn btn-danger btn-block remove-fields">Remove Moment</button></div></div>');
});
// Removing fields
$('#dynamicFields').on('click', '.remove-fields', function(){
$('.removing'+i).remove(); i--;
})
});
