JQuery 加载的输入未传递给 controller

Question

I made a form where a table of input will be loaded via ajax depending on the selected value of the "machine" dropdown in create.blade.php.

Whenever I submit the the form, and use dd($request), it only returns the following:

array:5 [▼
  "_token" => "KRCNWU8jxnT2RSrCrNOuGX9tfdC0TVUWxO3gKVCP"
  "machine" => "14"
  "breakdowndate" => null
  "breakdowntime" => null
  "Add" => "Submit"
]

create.blade.php

    <div id="add" class="modal fade" role="dialog">
  <div class="modal-dialog modal-xl adjust-modal-xl">

    <!-- Modal content-->
        <div class="modal-content">
      <!-- <div class="modal-header text-center">
        
        
        
      </div> -->
            <div class="modal-body">
                <form class="form-horizontal" action="{{url('breakdown/store')}}" method="POST" id="add-form">
                    {{csrf_field()}}
                    @if (count($errors->store) > 0)
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->store->all() as $error)
                                    <li class="small">{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="form-group row">
                        <label class="label-control col-lg-2">Machine:</label>
                        <div class="col-lg-4">
                            <select  name="machine" id="machine" class="form-control chosen-select">
                                <option value=""></option>
                                @forelse($machines as $machine)
                                <option value="{{$machine->id}}">({{$machine->section}}) {{$machine->machine_no}}</option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="label-control col-lg-2">Parts:</label>
                        <div class="col-lg-12">
                            <div id="partlist">
                                
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="label-control col-lg-2">Date of Breakdown:</label>
                        <div class="col-lg-4">
                            <input type="date" name="breakdowndate" id="breakdowndate" class="form-control ">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="label-control col-lg-2">Time of Breakdown:</label>
                        <div class="col-lg-4 input-group"  style="align-self: flex-start;">
                            <input type="text" name="breakdowntime" id="breakdowntime" class="form-control datetimepicker-time" autocomplete="off" data-toggle="datetimepicker" data-target="#breakdowntime">
                            <div class="input-group-append"><span class="input-group-text"><small>Military Time</small></span></div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-lg-12 pull-right">
                            <input type="submit" name="Add" class="btn btn-primary pull-right">
                        </div>
                        
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

index.blade.php jQuery Section

$("#machine").change(function(){
                var machineid = $(this).val();
                if(machineid !== '')
                {
                    $.ajax({
                        url: "{{url('breakdown/getParts')}}/"+machineid,
                        type: 'get',
                        dataType: 'json',
                        success:function(data){
                            var partadd = '';
                            // partadd+='<input type="checkbox" onclick="checkAll()" id="checkall"/> '
                            // partadd+='<label><h6>Select All</h6></label><br>'
                            partadd+='<table class="table table-bordered table-striped">';
                            partadd+='<thead>';
                            partadd+='<tr>';
                            partadd+='<th><input type="checkbox" onclick="checkAll()" id="checkall"/></th>'
                            partadd+='<th class="text-center">Part(Level II)</th>';
                            partadd+='<th class="text-center">Disassembly</th>';
                            partadd+='<th class="text-center">Measuring</th>';
                            partadd+='<th class="text-center">Inspection</th>';
                            partadd+='<th class="text-center">Correction</th>';
                            partadd+='<th class="text-center">Assembly</th>';
                            partadd+='<th class="text-center">Total</th>';
                            partadd+='<th class="text-center">Start Date</th>';
                            partadd+='<th class="text-center">Start Time</th>';
                            partadd+='<th class="text-center">End Date</th>';
                            partadd+='<th class="text-center">End Time</th>';
                            partadd+='</tr>';

                            partadd+='</thead>';
                            partadd+='<tbody>';
                            // console.log(data);
                            for(var i = 0;i < data.length;i++){
                                var partname = data[i].name;
                                var partid = data[i].id;
                                var partdescription = data[i].description;
                                var partdisassembly = data[i].disassembly !== null ? data[i].disassembly : "00:00";
                                var partmeasuring = data[i].measuring !== null ? data[i].measuring : "00:00";
                                var partinspection = data[i].inspection !== null ? data[i].inspection : "00:00";
                                var partcorrection = data[i].correction !== null ? data[i].correction : "00:00";
                                var partassembly = data[i].assembly !== null ? data[i].assembly : "00:00";
                                var partmanhours = data[i].manhours !== null ? data[i].manhours : "00:00";

                                

                                


                                partadd+='<tr>';
                                partadd+='<td><input type="checkbox" id="part-'+partid+'" class="partcheck" name="part[]" value="'+partid+'"/> </td>';
                                partadd+='<td><label><h6>'+partname+' '+partdescription+'</h6></label><br></td>';
                                partadd+='<td><input type="text" name="disassembly['+partid+']" id="part-disassembly-'+partid+'" class="form-control datetimepicker-part disassembly" data-toggle="datetimepicker" data-target="#part-disassembly-'+partid+'" value="'+partdisassembly+'"></td>';
                                partadd+='<td><input type="text" name="measuring['+partid+']" id="part-measuring-'+partid+'" class="form-control datetimepicker-part" data-toggle="datetimepicker" data-target="#part-measuring-'+partid+'" value="'+partmeasuring+'"></td>';
                                partadd+='<td><input type="text" name="inspection['+partid+']" id="part-inspection-'+partid+'" class="form-control datetimepicker-part" data-toggle="datetimepicker" data-target="#part-inspection-'+partid+'" value="'+partinspection+'"></td>';
                                partadd+='<td><input type="text" name="correction['+partid+']" id="part-correction-'+partid+'" class="form-control datetimepicker-part" data-toggle="datetimepicker" data-target="#part-correction-'+partid+'" value="'+partcorrection+'"></td>';
                                partadd+='<td><input type="text" name="assembly['+partid+']" id="part-assembly-'+partid+'" class="form-control datetimepicker-part" data-toggle="datetimepicker" data-target="#part-assembly-'+partid+'" value="'+partassembly+'"></td>';
                                partadd+='<td><input type="text" name="total['+partid+']" id="part-total-'+partid+'" class="form-control datetimepicker-part" data-toggle="datetimepicker" data-target="#part-total-'+partid+'" value="'+partmanhours+'" readonly></td>';
                                partadd+='<td><input class="form-control" type="date" name="startdate['+partid+']" id="part-startdate-'+partid+'"></td>';
                                partadd+='<td style="width:8%!important;"><input class="form-control datetimepicker-part" type="text" name="starttime['+partid+']" id="part-starttime-'+partid+'" autocomplete="off" data-toggle="datetimepicker" data-target="#part-starttime-'+partid+'" value="00:00"></td>';
                                partadd+='<td style="width:5%!important;"><input class="form-control" type="date" name="enddate['+partid+']" id="part-enddate-'+partid+'"></td>';
                                partadd+='<td style="width:8%!important;"><input class="form-control datetimepicker-part" type="text" name="endtime['+partid+']" id="part-endtime-'+partid+'" autocomplete="off" data-toggle="datetimepicker" data-target="#part-endtime-'+partid+'" value="00:00"></td>';
                                partadd+='</tr>';
                            }

                            partadd+='</tbody>';

                            partadd+='</table>';
                            $("#partlist").html(partadd);

                            // $(function () {
                         //        $('.datetimepicker-part').datetimepicker({
                         //            format: 'HH:mm'
                         //        });
                         //        $('.datetimepicker-part').on('change.datetimepicker', function(){
                            //      var elementid = $(this).attr('id');
                            //      var id = $(this).attr('id').match(/\d+/);
                            //      getTotalPart(id);
                            //     });
                         //    });
                            
                        }

                    });
                }
            });

web.php

Route::post('breakdown/store', 'BreakdownController@store');
Route::get('breakdown/getParts/{machine}', 'BreakdownController@getParts');

BreakdownController.php

dd($request->all());

Everything works fine except for the controller part. Whenever I use dd($request->all()), it only returns this:

array:5 [▼
      "_token" => "KRCNWU8jxnT2RSrCrNOuGX9tfdC0TVUWxO3gKVCP"
      "machine" => "14"
      "breakdowndate" => null
      "breakdowntime" => null
      "Add" => "Submit"
    ]

I need to get the ajax loaded inputs however only the input fields in create.blade.php modal are being included.

Answer 1

Ok, so apparently, my html in index.blade.php was lacking an </table> closing tag. Now it works and I get this now:

array:16 [▼
  "_token" => "6Dej3itbusd4AjzN879BWDrT243cDz4P7FQRQvH5"
  "machine" => "13"
  "part" => array:5 [▶]
  "disassembly" => array:5 [▶]
  "measuring" => array:5 [▶]
  "inspection" => array:5 [▶]
  "correction" => array:5 [▶]
  "assembly" => array:5 [▶]
  "total" => array:5 [▶]
  "startdate" => array:5 [▶]
  "starttime" => array:5 [▶]
  "enddate" => array:5 [▶]
  "endtime" => array:5 [▶]
  "breakdowndate" => null
  "breakdowntime" => null
  "Add" => "Submit"
]

So please disregard this question