javascript - 旧输入数组和动态字段 - Laravel - Blade

Question

验证失败后。这些值被闪现到字段中。

现在，我正在尝试使用旧输入来显示用户添加数据的所有动态字段。因此，我使用一个名为“name”的数组并循环遍历它们以确定数组中存储了多少个名称。这决定了我需要显示的字段数。但我的领域是一个选择领域。这已经在数组中检查选择了哪个字段。

因此，例如，用户从名为“姓名”的字段中选择“Jan”。使用动态字段，添加一个新字段。此处用户选择“Piet”。他提交了，但是他在表单的其他地方犯了一个错误，验证失败。现在，我在这两种情况下显示的两个选择字段(“名称”)都是 Piet，而不是 piet 和 Jan。我还需要按“添加任务”按钮才能显示第二个字段。

我想我需要添加一些唯一 ID。但是我不知道我该怎么做，因为我已经在一个数组中为选择选项工作了。感谢您的输入

Blade 模板。

@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--;
        })
    });

Answer 1

确实需要添加一个ID。

您也可以将此方法用于其余代码。

@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

问题:我还需要按“添加任务”按钮才能显示第二个字段。

=> 您可能默认隐藏您的字段，仅当单击字段出现时。在您的 jQuery 中删除此部分。