旧的输入数组和动态字段-Laravel-Blade [英] Old input array AND dynamic fields - Laravel - Blade
问题描述
验证失败后.值将闪烁到字段.
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.
因此，例如，用户从名为名称"的字段中选择扬".使用动态字段，将添加一个新字段.用户在这里选择"Piet".他提交了，但是他以错误的形式在其他地方犯了错误，验证失败.现在，在这两种情况下，我显示的两个选择字段(名称")都是Piet，而不是piet和Jan.而且我还需要按下添加任务"按钮才能显示第二个字段.
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.
我想我需要添加一些唯一的ID.但是我看不到该怎么做，因为我已经在select选项的数组中工作了.感谢您的输入
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
@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
$(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--;
})
});
推荐答案
实际上，您需要添加一个ID.
Indeed you need to add an ID.
您也可以在其余代码中使用此方法.
You can use this method for the rest of your code as well.
@foreach( old('name') as $i => $field)
<select class="form-control showName" id="selectNameType0" name="name[]" onchange="showType(0)">
<option value="Jan" {{ in_array('Jan', old('name')[$i] ?? [] ) ? 'selected' : '' }}>Jan</option>
<option value="Piet" {{ in_array('Piet', old('name')[$i] ?? [] ) ? 'selected' : '' }}>Piet</option>
<option value="Tom" {{ in_array('Tom', old('name')[$i] ?? [] ) ? 'selected' : '' }}>Tom</option>
<option value="Dean" {{ in_array('Dean', old('name')[$i] ?? [] ) ? 'selected' : '' }}>Dean</option>
<option value="Bert" {{ in_array('Bert', old('name')[$i] ?? [] ) ? 'selected' : '' }}>Bert</option>
</select>
@endforeach
问题:我还需要按添加任务"按钮才能显示第二个字段.
Question: And I also need to press "Add Task" button in order to display the second field.
=>您可能默认情况下仅在单击显示字段时才隐藏字段.在您的jQuery中删除此部分.
=> You probably hide your fields by default only when clicked the fields appear. Remove this part in your jQuery.
这篇关于旧的输入数组和动态字段-Laravel-Blade的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
