在laravel中使用jquery向表单添加额外输入

在一个场景中，我的laravel应用程序使用laravel datatable填充表字段。在action部分，我为每一行创建了一个表单，使用户可以向订单中添加产品

在我的控制器中：

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

返回数据表：：of（$products）
->removeColumn（'id'））
->addColumn（'action'，函数（$product）{
return\Form:：open（['method'=>'POST'，'action'=>['OrderController@postLineItemAdd']，'class'=>'form']）
'.\Form:：close（）；
})->使（真实）；

我认为：

<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：问题就在这里。当我使用jquery将额外的输入字段附加到当前表单时。输入字段从未附加到表单。我怎样才能解决这个问题

@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

@push（'scripts'）
//jquery获取产品表的数据
$（函数（）{
$（“#产品(表)用于(订单)”）.DataTable({
处理：对，
服务器端：是的，
ajax:“{！！路由（'line_items/getdata'，[$order->id]）！！}”，
栏目：[
{数据：'产品代码'，名称：'产品代码'}，
{数据：'产品名称'，名称：'产品名称'}，
{数据：'pack_unit'，名称：'pack_unit'}，
{数据：'pack_unit_hq'，名称：'pack_unit_hq'}，
{数据：'action'，名称：'action'，可排序：false，可搜索：false}
]
});
});
$（文档）.ready（函数（）{
//此id变量将获取当前视图页面的$order->id
var id=$（“#order_id2”）.attr（'data-item'）；
变量输入=$（“”）
.attr（“类型”、“隐藏”）
.attr（“名称”、“订单id”）.val（id）；
console.log（id）；
$（'.form'）。追加（输入）；
});
@端推

Hmm问题似乎是您的

$（document）.ready（）

在Ajax请求有机会回答和创建单元格之前发生。最好的处理方法是在Datatables中使用

createdCell

，因此在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
            }
        ]
    });

$（“#产品#表（用于订单）”。数据表({
处理：对，
服务器端：是的，
ajax:“{！！路由（'line_items/getdata'，[$order->id]）！！}”，
栏目：[
{数据：'产品代码'，名称：'产品代码'}，
{数据：'产品名称'，名称：'产品名称'}，
{数据：'pack_unit'，名称：'pack_unit'}，
{数据：'pack_unit_hq'，名称：'pack_unit_hq'}，
{ 
数据：“行动”，
createdCell：函数（td、cellData、rowData、row、col）{
var id=$（“#order_id2”）.attr（'data-item'）；
变量输入=$（“”）
.attr（“类型”、“隐藏”）
.attr（“名称”、“订单id”）.val（id）；
console.log（id）；
$（td）.find（'.form'）.append（输入）；
}
名称：“行动”，
可订购：错误，
可搜索：false
}
]
});

Hmm问题似乎是您的

$（document）.ready（）

在Ajax请求有机会回答和创建单元格之前发生。最好的处理方法是在Datatables中使用

createdCell

，因此在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
            }
        ]
    });

$（“#产品#表（用于订单）”。数据表({
处理：对，
服务器端：是的，
ajax:“{！！路由（'line_items/getdata'，[$order->id]）！！}”，
栏目：[
{数据：'产品代码'，名称：'产品代码'}，
{数据：'产品名称'，名称：'产品名称'}，
{数据：'pack_unit'，名称：'pack_unit'}，
{数据：'pack_unit_hq'，名称：'pack_unit_hq'}，
{ 
数据：“行动”，
createdCell：函数（td、cellData、rowData、row、col）{
var id=$（“#order_id2”）.attr（'data-item'）；
变量输入=$（“”）
.attr（“类型”、“隐藏”）
.attr（“名称”、“订单id”）.val（id）；
console.log（id）；
$（td）.find（'.form'）.append（输入）；
}
名称：“行动”，
可订购：错误，
可搜索：false
}
]
});

What

console.log（id）显示？@ZakariaAcharki它打印出140001。我想为新的隐藏输入表单值获取的正确数字是什么？什么
console.log（id）显示？@ZakariaAcharki它打印出140001。我想得到的新隐藏输入表单值的正确数字是什么？哇，你说得对。问题正是你提到的。Ajax请求在值可以附加到表单之前呈现。你救了我一天。谢谢，兄弟。哇，你说得对。问题正是你提到的。Ajax请求在值可以附加到表单之前呈现。你救了我一天。谢谢，兄弟。