Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

HurairiDz's avatar

How to populate list from dropdown in a dynamically input fields form.

I need some pointers on this one. I have managed to create a dynamically input fields via ajax which contains text box and select dropdown. Problem is whenever i add a new record the dropdown data is not populated and im hitting the wall right now. I am aware that i can just add option value to the select dropdown but how if i want to use a variable like in my form in the ajax function? The $fs variable should return a list from a query in my controller. For the first record the list shows but for the newly added row it doesnt.

my form

              <tr>
                  {{-- <td>1</td> --}}
               <td>
                   {!!  Form::select('fs_name_5[]',$fs, null,['class'=>'form-control','id'=>'fs_name']) !!}
               </td>
               <td>
                   {!!  Form::text('fs_address_5[]',null,['class'=>'form-control','id'=>'fs_address']) !!}
               </td>
               <td>
                       {!!  Form::text('state_id[]', null, ['class'=>'form-control','state_id']) !!}
               </td>
               <td>
                   {!!  Form::text('fs_operation_date_5[]',null, ['class'=>'datepicker','id'=>'datepicker']) !!}
               </td>
               <td><button type="button" name="add" id="add" class="btn btn-success">Tambah</button></td>
              </tr>
   </tbody>```

ajax

```$('#add').click(function(){  
        i++;  
        $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added">'+
        '<td><select name="fs_name_5[]" placeholder="Enter FS Name" class="form-control" /></td>'+
        '<td><input type="text" name="fs_address_5[]" placeholder="Enter FS Address" class="form-control"/></td>'+
        '<td><input type="text" name="state_id[]" value="" placeholder="Select A State" class="form-control">'+
        '<td><input type="text" name="fs_operation_date_5[]" placeholder="Enter FS Date" class="form-control" id="datepicker"/></td>'+
        '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
   }); ```
0 likes
2 replies
HurairiDz's avatar

unfortunately this is a legacy project i need to use JQuery to achieve this

Please or to participate in this conversation.