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

@ZakariaAcharki It print out 140001. which is the correct number I want to get for the new hidden input form value? — dlfjj
– dlfjj, Commented Oct 5, 2018 at 15:49

Jaime Rojas · Accepted Answer · 2018-10-05 16:47:18Z

2

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

answered Oct 5, 2018 at 16:47

Jaime Rojas

5592 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dlfjj Over a year ago

Wow, you are right on point. The problem is exactly what you mentioned. The Ajax request render before the value can attach the form. You saved my day. Thx, bro.

Collectives™ on Stack Overflow

Add a extra input to a form using jquery in laravel

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related