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.

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

回答1:

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.

=> You probably hide your fields by default only when clicked the fields appear. Remove this part in your jQuery.

来源：https://stackoverflow.com/questions/57872319/old-input-array-and-dynamic-fields-laravel-blade

标签

javascript

jquery

laravel

select

dynamic