Add a extra input to a form using jquery in laravel

Question

In one scenario, my laravel app use laravel datatable to populate the table field. In the action section, I created a form for each row enable user to add a product to the order.

In my controller:

return Datatables::of($products)
        ->removeColumn('id')
        ->addColumn('action',function($product){
            return \Form::open(['method'=>'POST','action'=>['OrderController@postLineItemAdd'],'class'=>'form']).'
        <input type="hidden" name="product_id" value="'.$product->id.'" />
        <input type="number" class="qty_picker_input" name="quantity" value="" step="1" min="0" size="3"/>
        <input type="submit" name="submit" value="Add" class="btn pull-right add_this_item" />
        '.\Form::close();
        })->make(true);

In my view:

<table class="table table-striped table-bordered table-hover datatable" id="product_table_for_order" style="width:100%">
 <thead>
  <tr>
   <th class="cell-tight">Part Number</th>
   <th>Product</th>
   <th class="cell-tight">PU</th>
   <th class="cell-tight">PU HQ</th>
   <th class="text-center" style="width: 100px;">
    <a href="/orders/{{$order->id}}" class="btn btn-xs"><i class="icon-check"> Done</i></a>
   </th>
  </tr>
 </thead>
 <tbody>
 </tbody>
 </table>

Javascript: The problem is here. When I use the jquery to attach additional input field to current form. The input field never attached to the form. How can I fix that?

@push('scripts')
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    // jquery getting data for product table
    $(function() {
        $('#product_table_for_order').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{!! route('line_items/getdata',[$order->id]) !!}',
            columns: [
                { data: 'product_code', name: 'product_code' },
                { data: 'product_name', name: 'product_name' },
                { data: 'pack_unit', name: 'pack_unit' },
                { data: 'pack_unit_hq', name: 'pack_unit_hq' },
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ]
        });
    });

    $(document).ready(function(){
   //this id variable would get the $order->id for current view page 
        var id= $("#order_id2").attr('data-item');
        var input = $("<input>")
            .attr("type", "hidden")
            .attr("name", "order_id").val(id);
        console.log(id);
        $('.form').append(input);
    });
</script>
@endpush

Answer 1

Hmm the problem seems to be that your $(document).ready() is happening before the Ajax request has a chance to answer and create the cell. The best way to handle it would be with createdCell within Datatables, so put something like this in your Datatables JS:

$('#product_table_for_order').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('line_items/getdata',[$order->id]) !!}',
        columns: [
            { data: 'product_code', name: 'product_code' },
            { data: 'product_name', name: 'product_name' },
            { data: 'pack_unit', name: 'pack_unit' },
            { data: 'pack_unit_hq', name: 'pack_unit_hq' },
            { 
                data: 'action', 
                createdCell: function (td, cellData, rowData, row, col) {
                          var id= $("#order_id2").attr('data-item');
                          var input = $("<input>")
                         .attr("type", "hidden")
                         .attr("name", "order_id").val(id);
                         console.log(id);
                         $(td).find('.form').append(input);
                }
                name: 'action', 
                orderable: false, 
                searchable: false
            }
        ]
    });