title: Mave multiple datatables temporary data to database in laravel 5.5
body: <p>Hi I wonder how to save the data from my temporary datatable data,
  I use a modal form to call the data, and fill it into a texte field then use a button to send it to temprary datatable,</p>
  
  <p>I want to when I press the save buttons data will be stored in the database table purchase_order_details</p>
  
  <p>and also related to purchase_orders table,</p>
  
  <p>here is my code </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@extends('layouts.app')
  @section('content')
  
  &lt;div class="box"&gt;
      &lt;div class="box-header"&gt;
          &lt;h4 class="page-title"&gt;
              {{ $siteTitle }}
              &lt;a href="{{ route('admin.purchase_orders.index') }}" class="btn btn-info pull-right" style="vertical-align:middle; margin-top:-1%" data-toggle="tooltip" title="Back"&gt;&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt; Back&lt;/a&gt; 
          &lt;/h4&gt;
      &lt;/div&gt;
  
      {{-- Form po start here --}}
  
      {!! Form::open(['method' =&gt; 'POST', 'autocomplete' =&gt; 'off', 'id' =&gt; 'Simpan','data-toggle' =&gt; 'validator', 'files' =&gt; true,]) !!}
     
      &lt;div class="panel-body boxs"&gt;
          &lt;div class="row"&gt;
  
              &lt;div class="col-md-3 form-group"&gt;
                  &lt;label for="kode_trx" class="control-label"&gt;Kode&lt;span class="text-red"&gt;*&lt;/span&gt;&lt;/label&gt;
                  &lt;input class="form-control" required name="kode_trx" type="text" id="kode_trx" title="Kode Barang" readonly value="{{ $kodeTrx }}"&gt;
                  &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-3 form-group"&gt;
                  &lt;label for="no_po" class="control-label"&gt;No. PO&lt;span class="text-red"&gt;*&lt;/span&gt;&lt;/label&gt;
                  &lt;input class="form-control" required name="no_po" type="text" id="no_po" title="No PO" readonly value="{{ $kodeOto }}"&gt;
                  &lt;span class="help-block with-errors"&gt;&lt;/span&gt;             
              &lt;/div&gt;
  
              &lt;div class="col-md-3 form-group"&gt;
                  &lt;label for="supplier" class="control-label"&gt;Supplier&lt;span class="text-red"&gt;*&lt;/span&gt;&lt;/label&gt;
                  {{-- &lt;input type="hidden" name="supplier_id" required id="supplier_id"&gt;
                  &lt;input type="hidden" name="supplier_kode" required id="supplier_kode"&gt; --}}
  
                  {!! Form::hidden('supplier_id', old('supplier_id'), ['class' =&gt; 'form-control', 'required' =&gt; '', 'id' =&gt;'supplier_id']) !!}
                  {!! Form::hidden('supplier_kode', old('supplier_kode'), ['class' =&gt; 'form-control', 'required' =&gt; '', 'id' =&gt;'supplier_kode']) !!}
                  {!! Form::text('nama_supplier', old('nama_supplier'), ['class' =&gt; 'form-control', 'required' =&gt; '', 'data-target' =&gt; '#datasupplier', 'id' =&gt; 'nama_supplier', 'data-toggle' =&gt; 'modal', 'title' =&gt; 'Supplier', 'data-error' =&gt; 'Silahkan pilih supplier', 'onkeydown' =&gt; 'return false']) !!} 
                  &lt;span class="help-block with-errors" aria-invalid="Pilih Supplier Dulu"&gt;&lt;/span&gt;      
              &lt;/div&gt;
  
              &lt;div class="col-md-3 form-group"&gt;
                  &lt;label class="control-label"&gt;Contact Person&lt;/label&gt;
                  &lt;input class="form-control" required name="pic" type="text" id="pic" title="Kontak Supplier" data-toggle="tooltip" pattern="[a-zA-Z_\-.,/ ]*$" data-error="hanya huruf  (A-Z), dot (.), coma(,) and dash (-) yang dibolehkan." data-required-error="Field kontak person dibutuhkan"&gt;              
                  &lt;input class="form-control" required name="telp_pic" type="hidden" id="telp_pic" title="Telp PIC"&gt;
                  &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
  
            &lt;div class="form-group col-md-3"&gt;
              &lt;label for="delivery_date"&gt;Tgl Order&lt;span class="text-red"&gt;*&lt;/span&gt;&lt;/label&gt;
              &lt;div class="input-group date" oninput="setCustomValidity('')"&gt;
                &lt;div class="input-group-addon" oninput="setCustomValidity('')"&gt; 
                  &lt;i class="fa fa-calendar" oninput="setCustomValidity('')"&gt;&lt;/i&gt;
                &lt;/div&gt;
                
                &lt;input type="text" oninput="setCustomValidity('')" data-toggle="tooltip" title="tgl order" class="form-control pull-right" name="tanggal" id="tanggal" pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" required data-required-error="Tanggal order kosong" data-error="format tanggal dd-mm-yyyy" onkeydown="return false" placeholder="{{ date('d-m-Y') }}"&gt;
                &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group col-md-3"&gt;
              &lt;label for="top"&gt;T.O.P&lt;/label&gt;&lt;span class="text-red"&gt;*&lt;/span&gt;
              &lt;input type="text" name="top" required id="top" class="form-control" data-required-error="T.O.P Order kosong." &gt;
              &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group col-md-6"&gt;
              &lt;label class="control-label"&gt;Notes &lt;span class="text-red"&gt;&lt;/span&gt; &lt;/label&gt;
              &lt;textarea class="form-control " placeholder="" title="" data-toggle="tooltip" name="keterangan" cols="50" rows="10" id="keterangan" data-original-title="Catatan Untuk Supplier" style="height:60px!important;"&gt;&lt;/textarea&gt;
            &lt;/div&gt;
            &lt;input type="hidden" name="created_by" id="created_by" value="{{ Auth::user()-&gt;role-&gt;id }}"&gt;
          &lt;/div&gt;
  
  &lt;hr style="border: 0; border-top: 3px double #995ca8;"&gt;
  &lt;h4 class="page-title"&gt;Pilih Barang&lt;/h4&gt;
  &lt;hr style="border: 0; border-top: 3px double #995ca8;"&gt;
  
          &lt;div class="row"&gt;
            &lt;div class="col-md-3 form-group"&gt;
              &lt;label for="nama_barang" class="control-label"&gt;Nama Barang&lt;span class="text-red"&gt;*&lt;/span&gt;&lt;/label&gt;
              &lt;input class="form-control cacat" required name="nama_barang" type="text" id="nama_barang" title="Nama Barang" oninput="setCustomValidity('')" data-toggle="modal" data-target="#databarang" data-error="hanya huruf (A-Z), angka (0-9), dot (.), trademark (™) dan dash (-) yang dibolehkan" maxlength="70" onkeydown="return false"&gt;
              &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
              
              &lt;input class="form-control cacat" required name="id_barang" type="hidden" id="id_barang" title="ID Barang"&gt;
              &lt;input class="form-control cacat" required name="kode_barang" type="hidden" id="kode_barang" title="Kode Barang"&gt;
            &lt;/div&gt;
              {{-- pattern="[a-zA-Z_\-.™/^(|[1-9][0-9]*)]*$" 
              pattern="^(|[1-9][0-9]*)$"--}}
              
          {{-- &lt;/div&gt;
              
          &lt;div class="row"&gt; --}}
            &lt;div class="col-md-3 form-group"&gt;
                &lt;label for="model_barang" class="control-label"&gt;Model Barang&lt;span class="text-red"&gt;*&lt;/span&gt;&lt;/label&gt;
                &lt;input type="text" name="model_barang" required id="model_barang" readonly class="form-control cacat" data-required-error="Model barang kosong." required&gt;
                &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
            &lt;/div&gt;
          {{-- &lt;/div&gt;
          &lt;div class="row"&gt; --}}
                  
            &lt;div class="col-md-2 form-group"&gt;
                &lt;label for="width"&gt;Width&lt;/label&gt;
                &lt;input type="text" name="width" id="width" pattern="^(|[1-9][0-9]*)$" maxlength="4" data-error="Hanya angka dan awalan bukan 0" oninput="setCustomValidity('')" class="form-control cacat" data-required-error="Ukuran Barang Diperlukan" required&gt;
                &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="col-md-2 form-group"&gt;
                &lt;label for="depth"&gt;Depth&lt;/label&gt;
                &lt;input type="text" name="depth" id="depth" pattern="^(|[1-9][0-9]*)$" maxlength="4" data-error="Hanya angka dan awalan bukan 0" oninput="setCustomValidity('')" class="form-control cacat" data-required-error="Ukuran Barang Diperlukan" required&gt;
                &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="col-md-2 form-group"&gt;
                &lt;label for="height"&gt;Height&lt;/label&gt;
                &lt;input type="text" name="height" id="height" pattern="^(|[1-9][0-9]*)$" maxlength="4" data-error="Hanya angka dan awalan bukan 0" oninput="setCustomValidity('')" class="form-control cacat" data-required-error="Ukuran Barang Diperlukan" required&gt;
                &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-3 form-group"&gt;
                  &lt;label class="control-label"&gt;Qty &lt;span class="text-red"&gt;*&lt;/span&gt; &lt;/label&gt;
                  &lt;input type="text" name="qty" id="qty" required class="form-control cacat" oninvalid="this.setCustomValidity('Input Qty Order')" data-required-error="Qty order diperlukan" pattern="^(|[1-9][0-9]*)$" maxlength="10" onkeypress="isInputNumber(event)" oninput="setCustomValidity('')"&gt;
                  &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-3 form-group"&gt;
                  &lt;label for="harga_beli"  class="control-label"&gt;Harga Beli &lt;span class="text-red"&gt;*&lt;/span&gt; &lt;/label&gt;
                  &lt;input type="text" name="harga_beli" id="harga_beli" required class="form-control cacat" oninvalid="this.setCustomValidity('Harga beli')" data-required-error="Harga beli diperlukan" pattern="^(|[1-9][0-9]*)$" maxlength="10" onkeypress="isInputNumber(event)" oninput="setCustomValidity('')"&gt;
                  &lt;span class="help-block with-errors"&gt;&lt;/span&gt;
              &lt;/div&gt;
              
              &lt;div class="col-md-2 form-group" &gt;
                  &lt;label class="control-label" for="tambah"&gt; &amp;nbsp; &lt;span class="text-red"&gt;&lt;/span&gt;&lt;/label&gt;
                  &lt;a class="btn btn-success disabled tambahkan pull-right col-md-12" id="tambah" data-toggle="tooltip" title="Tambah Barang"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; Tambah&lt;/a&gt; 
  
                  {{-- &lt;a class="btn btn-success col-md-2 form-control btn-flat tambahkan disabled" id="tambah"&gt;&lt;i class='fa fa-plus'&gt;&lt;/i&gt;  Add  &lt;/a&gt;  --}}
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
        &lt;/div&gt;
    
    &lt;hr style="border: 0; border-top: 3px double #995ca8;"&gt;
    &lt;h4&gt;Detail PO&lt;/h4&gt;
    &lt;hr style="border: 0; border-top: 3px double #995ca8;"&gt;
    
    &lt;div class="table-responsive"&gt;
          &lt;table id="tb_detail_po" class="table table-bordered table-striped"&gt;
              &lt;thead&gt;
                  &lt;tr style=""&gt;
                      &lt;th width="10%" style="text-align: center"&gt;Kode&lt;/th&gt;
                      &lt;th width="20%"&gt;Nama&lt;/th&gt;
                      &lt;th width="10%" style="text-align: center"&gt;Tipe&lt;/th&gt;
                      &lt;th width="5%" style="text-align: center"&gt;W&lt;/th&gt;
                      &lt;th width="5%" style="text-align: center"&gt;D&lt;/th&gt;
                      &lt;th width="5%" style="text-align: center"&gt;H&lt;/th&gt;
                      &lt;th width="5%" style="text-align: center"&gt;Qty&lt;/th&gt;
                      &lt;th width="20%" style="text-align: center"&gt;Harga Beli&lt;/th&gt;
                      &lt;th width="20%" style="text-align: center"&gt;Total&lt;/th&gt;
                      &lt;th width="2px"&gt;Action&lt;/th&gt;
                      &lt;th hidden&gt;ID Barang&lt;/th&gt;
                      &lt;th hidden&gt;Kode PO&lt;/th&gt;
                      &lt;th hidden&gt;No PO&lt;/th&gt;
                      &lt;th hidden&gt;No User&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody id="mytbody" style="white-space:nowrap"&gt;&lt;/tbody&gt;
              &lt;tfoot style="border"&gt;
                  &lt;tr style="font-size: 15px;font-weight: 600; background-color: #ecf0f5;"&gt;
                    &lt;td colspan='8' style="border-top: 1px solid #dddddd; padding: 8px 10px 8px 10px"&gt;&lt;span style="float:right;"&gt;Qty Item&lt;/span&gt;&lt;/td&gt;
                    &lt;td colspan='1' style="border-top: 1px solid #dddddd; padding: 8px 10px 8px 10px"&gt;&lt;span style="float:right;" id ="totalItem"&gt;&lt;/span&gt; &lt;/td&gt;
                    &lt;td colspan='1' style="border-top: 1px solid #dddddd; padding: 8px 10px 8px 10px"&gt;&lt;span style="float:right;"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr style="font-size: 15px;font-weight: 600; background-color: #ecf0f5;"&gt;
                    &lt;td colspan='8' style="border-top: 0px solid #ffffff; padding: 8px 10px 8px 10px"&gt;&lt;span style="float:right;"&gt;Total PO&lt;/span&gt;&lt;/td&gt;
                    &lt;td colspan='1' style="border-top: 0px solid #ffffff; padding: 8px 10px 8px 10px"&gt;&lt;span style="float:right;" id="totalPurchaseOrder"&gt;&lt;/span&gt; &lt;/td&gt;
                    &lt;td colspan='1' style="border-top: 0px solid #ffffff; padding: 8px 10px 8px 10px"&gt;&lt;span style="float:right;"&gt;&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tfoot&gt;
          &lt;/table&gt;
      &lt;/div&gt;  
        {{-- &lt;table width="100%" cellspacing="0" cellpadding="0" style="width: 100%; border-collapse: collapse;" id="total_po"&gt;
            &lt;tbody&gt;
                &lt;tr style="font-size: 15px;"&gt;
                    &lt;td style="padding: 15px 0 15px 30px; font-weight: 600; text-align: right"&gt;Total Item&lt;/td&gt;
                    &lt;td style="padding: 15px 30px 15px 0; font-weight: 600; text-align: right;" id="TotalItem"&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr style="font-size: 15px; color: rgb(66,181,73); background-color: rgba(111, 107, 107, 0.1);"&gt;
                    &lt;td colspan="6" rowspan="2" style="padding: 15px 0 15px 30px; font-weight: 600; text-align: right"&gt;Total Price&lt;/td&gt;
                    &lt;td style="padding: 15px 30px 15px 0; font-weight: 600; text-align: right;" id="totalSalary"&gt;
                      
                    &lt;/td&gt;
                &lt;/tr&gt;
                
                &lt;tr&gt;
                    &lt;td style="padding: 0 0 10px 30px"&gt;&lt;/td&gt;
                    &lt;td style="padding: 0 0 10px 30px"&gt;&lt;/td&gt;
                &lt;/tr&gt;
                
            &lt;/tbody&gt;
        &lt;/table&gt; --}}
          &lt;button type="submit" class="btn btn-success btn-lg fa fa-save save pull-right" id="Simpan"&gt; Simpan&lt;/button&gt;
      &lt;/div&gt;
      {!! Form::close() !!}
  &lt;/div&gt;
  
  
  @include('admin.purchase_orders.datasuplai')
  @include('admin.purchase_orders.databarang')
  
  @stop
  
  @section('javascript')
  @parent
  
  &lt;script src="https://cdn.datatables.net/plug-ins/1.10.15/api/sum().js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  // $(document).ready(function() {
  //     $('#tb_detail_po').dataTable({ 
  //   "sPaginationType": "full_numbers",
  //   "footerCallback": function ( row, data, start, end, display ) {
  //     var api = this.api(), data;  
  //     // Remove the formatting to get integer data for summation
  //     var intVal = function ( i ) {
  //      return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0;
  //     };
    
  //     // total_salary over all pages
  //     total_salary = api.column( 8 ).data().reduce( function (a, b) {
  //      return intVal(a) + intVal(b);
  //     },0 );
      
  //     // total_page_salary over this page
  //     total_page_salary = api.column( 8, { page: 'current'} ).data().reduce( function (a, b) {
  //      return intVal(a) + intVal(b);
  //     }, 0 );
      
  //     total_page_salary = parseFloat(total_page_salary);
  //     total_salary = parseFloat(total_salary);
  //     // Update footer
  //     $('#totalSalary').html(total_page_salary.toFixed(2)+"/"+total_salary.toFixed(2));    
  //    },  
  //  });
  // });
  
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(function () {
        $("#tb_detail_po").DataTable({
          paging:false, searching:false, ordering:false,
        //   columnDefs:[{
        //   targets:[7,8], render: $.fn.dataTable.render.number('.',',','','Rp. ')
        // }],
        "sPaginationType": "full_numbers",
      "footerCallback": function ( row, data, start, end, display ) {
      var api = this.api(), data;  
      // Remove the formatting to get integer data for summation
      var intVal = function ( i ) {
       return typeof i === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof i === 'number' ? i : 0;
      };
    
      // total_salary over all pages
      total_salary = api.column( 8 ).data().reduce( function (a, b) {
       return intVal(a) + intVal(b);
      },0 );
  
          total_item = api.column( 6 ).data().reduce( function (a, b) {
       return intVal(a) + intVal(b);
      },0 );
      
      // total_page_salary over this page
      total_page_salary = api.column( 8, { page: 'current'} ).data().reduce( function (a, b) {
       return intVal(a) + intVal(b);
      }, 0 );
      
      total_page_salary = parseFloat(total_page_salary);
      total_salary = parseFloat(total_salary);
          total_item = parseInt(total_item);
      // Update footer
  
          if (total_salary &lt;= 0 &amp;&amp; total_item &lt;=0 ){
            $('#totalPurchaseOrder').html('');
            $('#totalItem').html('');
          }
          else{
        // $('#totalPurchaseOrder').html(total_page_salary.toFixed()+"/"+total_salary.toFixed());    
        $('#totalPurchaseOrder').html(total_salary.toFixed());    
        $('#totalItem').html(total_item.toFixed());    
          }
     }
  
        });
        $("#tblSupliers2").DataTable({
          paging:false, searching:true
        });
        $("#tblBarang").DataTable({
          paging:false, searching:true
     });
  
      //AJAX SAVE HERE 
      // alert(tabel.rows().data().toArray());
      $(document).on('submit',function(e){
        if(!e.isDefaultPrevented())
        {
          var tabel = $("#tb_detail_po").DataTable();
          var jumlah = tabel.rows().count();
          if(jumlah == 0)
          {
            swal({
                    title: "Barang PO Tidak Boleh Kosong",
                    text: "Masukan Data Barang Yang Akan di PO",
                    type: "warning",
                    timer: 2000
                });
          }
          else
          {
            var _data = {
              no_nota: $('input[name=id]').val(),
              customer: $('input[name=IdCustomer]').val(),
              karyawan: $('input[name=karyawan]').val(),
              notelp: $('input[name=notelp]').val(),
              tanggal: $('input[name=tanggal]').val(),
              tb_detail_po: tabel.rows().data().toArray(),
            };
    
            $.ajax({
              url: "{{ url('admin.purchase_orders.store') }}",
              type: "POST",
              method: "POST",
              data: _data,
              success: function(data)
              {
                obj = JSON.parse(data);
                swal({
                    title: "Sukses",
                    text: obj.message,
                    type: "success",
                    timer: 2000,
                    button: "ok",
                }, function(){
                  window.location = "{{ route('admin.purchase_orders.index') }}";
                });
              }
            });
          }
        }
        return false;
      });
  
    });
  
  &lt;/script&gt;
  
  {{-- Panggil FUnction --}}
  {{-- Isi Value Field Supplier Dari Modal --}}
  &lt;script type="text/javascript"&gt;
     $('.pilihsupplier').on('click',function(){
         $('.help-block').text('');
         $('.form-group').removeClass('has-error');
         var IDSupplier=$(this).closest('tr').children('td.IDSupplier').text();
         var KodeSupplier=$(this).closest('tr').children('td.KodeSupplier').text();
         var NamaSupplier =$(this).closest('tr').children('td.NamaSupplier').text();
         var PICSupplier =$(this).closest('tr').children('td.PICSupplier').text();
         var TelpSupplier =$(this).closest('tr').children('td.TelpSupplier').text();
         // var EmailSupplier =$(this).closest('tr').children('td.EmailSupplier').text();
         var datasupplier = $('#datasupplier');
         
           $('#supplier_id').val(IDSupplier);
           $('#supplier_kode').val(KodeSupplier);
           $('#nama_supplier').val(NamaSupplier);
           $('#pic').val(PICSupplier);
           $('#telp_pic').val(TelpSupplier);
           // $('#EmailSupplier').val(EmailSupplier);
           panggil(); /*Function untuk cek konidisi pada buttom simpan di detail barang po*/
           datasupplier.modal('hide'); 
          // $('#tanggal').focus();
          $('#top').focus();
     });
  &lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
   $('.pilihbarang').on('click',function(){
    $('.help-block').text('');
    $('.form-group').removeClass('has-error');
    var IdBarang=$(this).closest('tr').children('td.IdBarang').text();
    var KdBarang=$(this).closest('tr').children('td.KdBarang').text();
    var NamaBarang =$(this).closest('tr').children('td.NamaBarang').text();
    var ModelBarang =$(this).closest('tr').children('td.ModelBarang').text();
    var Width =$(this).closest('tr').children('td.Width').text();
    var Depth =$(this).closest('tr').children('td.Depth').text();
    var Height =$(this).closest('tr').children('td.Height').text();
    var Stock =$(this).closest('tr').children('td.Stock').text();
    var Harga =$(this).closest('tr').children('td.Harga').text();
    var databarang = $('#databarang');
    
      $('#id_barang').val(IdBarang);
      $('#kode_barang').val(KdBarang);
      $('#nama_barang').val(NamaBarang);
      $('#model_barang').val(ModelBarang);
      $('#width').val(Width);
      $('#depth').val(Depth);
      $('#height').val(Height);
      $('#harga_beli').val('');
  
      databarang.modal('hide');
  
        $('#qty').val(1);
        $("#qty").focus();
        panggil(); /*Function untuk cek konidisi pada buttom simpan di detail barang po*/
   });
  &lt;/script&gt;
      
  &lt;script&gt;
    $('#nama_barang,#width,#depth,#height,#qty, #harga_beli').keyup(function (){
        if ($('#nama_barang').val()=='' || $('#width').val()=='' || $('#depth').val()=='' || $('#height').val()=='' || $('#qty').val()=='' || $('#harga_beli').val()=='') {
          $('#tambah').addClass('disabled');
        };
  
        if ($('#nama_barang').val()!='' &amp;&amp; $('#width').val()!='' &amp;&amp; $('#depth').val()!='' &amp;&amp; $('#height').val()!='' &amp;&amp; $('#qty').val()!='' &amp;&amp; $('#harga_beli').val()!='') {
          $('#tambah').removeClass('disabled');
        };
    });
  &lt;/script&gt;
  
  &lt;script&gt;
      $(document).ready(function(){
        $('#tambah').on('click', function(){
          $('#tambah').addClass('disabled');
             hapusReq();
        });
      });
  
  
  &lt;/script&gt;
  
  {{-- Script Untuk Tambah data table detail  --}}
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
        var t = $('#tb_detail_po').DataTable();
        var i = 1;
  
      $('.tambahkan').on('click', function() {
          var IdBarang = $('#id_barang').val();
          var KdBarang = $('#kode_barang').val();
          var NamaBarang = $('#nama_barang').val();
          var ModelBarang = $('#model_barang').val();
          var Width = $('#width').val();
          var Depth = $('#depth').val();
          var Height = $('#height').val();
          var Qty = $('#qty').val();
          var Harga = $('#harga_beli').val();
          var IdPurchase = $('#kode_trx').val();
          var NoPo = $('#no_po').val();
          var UserId = $('#created_by').val();
          var Total = $('#qty').val() * $('#harga_beli').val();
          var Action = "&lt;a class='btn btn-danger btn-xs Hapus' title='Remove Item'&gt; &lt;span class='fa fa-minus-square'&gt;&lt;/span&gt; &lt;/a&gt;"
          
  
          var row = t.row.add( [
              KdBarang,
              NamaBarang,
              ModelBarang,
              Width,
              Depth,
              Height,
              Qty,
              Harga,
              Total,
              Action,
              IdBarang,
              IdPurchase,
              NoPo,
              UserId,
          ] ).draw(false);
          t.row(row).column(0).nodes().to$().addClass('IdBarang');
          t.row(row).column(10).nodes().to$().css('display','none');
          t.row(row).column(11).nodes().to$().css('display','none');
          t.row(row).column(12).nodes().to$().css('display','none');
          t.row(row).column(13).nodes().to$().css('display','none');
          t.row(row).column(8).nodes().to$().css('text-align','right');
          t.row(row).column(7).nodes().to$().css('text-align','right');
          
  
  
           $('#id_barang').val('');
           $('#kode_barang').val('');
           $('#nama_barang').val('');
           $('#model_barang').val('');
           $('#width').val('');
           $('#depth').val('');
           $('#height').val('');
           $('#qty').val('');
           $('#harga_beli').val('');
  
      })
    })
      
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
     $('#tb_detail_po tbody').on('click', '.Hapus', function(e){
        var t = $('#tb_detail_po').DataTable();
        t.row($(this).closest('tr')).remove().draw(false);
   })
  &lt;/script&gt;
  
  &lt;script&gt;
       function panggil()
      {
        $('.save').removeClass('disabled');
        
      }
  
      function hapusReq(argument) {
        var cls = document.getElementsByClassName('cacat');
  
        for(var i = 0; i &lt; cls.length; i++) {
        cls[i].removeAttribute('required');
        }
      }
  &lt;/script&gt;
  
  {{-- End Panggil FUnction --}}
  
  
  &lt;script&gt;
   function isInputNumber(evt) {
    var ch = String.fromCharCode(evt.which);
    if(!(/[0-9]/.test(ch))){
     evt.preventDefault();
    }   
   }
    
   function isInputString(evt) {
    var cg = String.fromCharCode(evt.which);
    if((/[0-9]/.test(cg))){
     evt.preventDefault();
    }   
   }
  &lt;/script&gt;
  
  &lt;script&gt;
   var dateToday = new Date();
   var dates = $("#tanggal").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    dateFormat: 'dd-mm-yy',
    minDate: dateToday,
    onSelect: function(selectedDate) {
     var option = this.id == "from" ? "minDate" : "maxDate",
      instance = $(this).data("datepicker"),
      date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
     dates.not(this).datepicker("option", option, date);
    } , 
    onClose: function(){
     this.focus();
     $("#top").focus();
    }
   });
  &lt;/script&gt;
  
  
  
  @endsection</code></pre>
  </div>
  </div>
  </p>
  
  <p>mycontroller store method is empty because I dont know how to save it yet,</p>