javascript - Can't get $id variable from view in controller and DB using Ajax

In view i can see variable $id, but when i send it using Ajax, I am getting NULL in DB.

I am sending variable $id from view using Ajax like this:

$.ajax({
            url:'{{ route("dynamic-field2.insert") }}',
            method:'post',
            data:$(this).serialize(), proform: <?php echo $id ?>,
            dataType:'json',
            beforeSend:function(){
                $('#save').attr('disabled','disabled');
            },

I am trying to get it in controller using this:

if($request->ajax())
     {
    ...
$number = $request->id;

This is full code of script in view:

<script>
$(document).ready(function(){

 var count = 1;

 dynamic_field(count);

 function dynamic_field(number)
 {
  html = '<tr>';
        html += '<td><input type="text" name="name[]" class="form-control" /></td>';
        html += '<td><input type="text" name="PKWIU[]" class="form-control" /></td>';
        html += '<td><input type="text" name="quantity[]" class="form-control" /></td>';
        html += '<td><input type="text" name="unit[]" class="form-control" /></td>';
        html += '<td><input type="text" name="netunit[]" class="form-control" /></td>';
        html += '<td><input type="text" name="nettotal[]" class="form-control" /></td>';
        html += '<td><input type="text" name="VATrate[]" class="form-control" /></td>';
        html += '<td><input type="text" name="grossunit[]" class="form-control" /></td>';        
        html += '<td><input type="text" name="grosstotal[]" class="form-control" /></td>';
        if(number > 1)
        {
            html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
            $('tbody').append(html);
        }
        else
        {   
            html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
            $('tbody').html(html);
        }
 }

 $(document).on('click', '#add', function(){
  count++;
  dynamic_field(count);
 });

 $(document).on('click', '.remove', function(){
  count--;
  $(this).closest("tr").remove();
 });

 $('#dynamic_form').on('submit', function(event){
        event.preventDefault();
        $.ajax({
            url:'{{ route("dynamic-field2.insert") }}',
            method:'post',
            data:$(this).serialize(), proform: <?php echo $id ?>,
            dataType:'json',
            beforeSend:function(){
                $('#save').attr('disabled','disabled');
            },
            success:function(data)
            {
                if(data.error)
                {
                    var error_html = '';
                    for(var count = 0; count < data.error.length; count++)
                    {
                        error_html += '<p>'+data.error[count]+'</p>';
                    }
                    $('#result').html('<div class="alert alert-danger">'+error_html+'</div>');
                }
                else
                {
                    dynamic_field(1);
                    $('#result').html('<div class="alert alert-success">'+data.success+'</div>');
                }
                $('#save').attr('disabled', false);
            }
        })
 });

});
</script>

This is full code of controller:

<?php

namespace App\Http\Controllers;
use DB;
use Illuminate\Http\Request;
use App\DynamicField;
use Validator;
use App\Proform; 


class DynamicField2Controller extends Controller
{
    function index()
    {
     return view('proforms.add');
    }

    function insert(Request $request)
    {

        

     if($request->ajax())
     {
         
      $rules = array(
       'name.*'  => 'required',
       'PKWIU.*'  => 'required',
       'quantity.*'  => 'required',
       'unit.*'  => 'required',
       'netunit.*'  => 'required',
       'nettotal.*'  => 'required',
       'VATrate.*'  => 'required',
       'grossunit.*'  => 'required',
       'grosstotal.*'  => 'required',
       'proform_id.*'  => 'required',
      );
      $error = Validator::make($request->all(), $rules);
      if($error->fails())
      {
       return response()->json([
        'error'  => $error->errors()->all()
       ]);
      }
      /*
      $autonumber = DB::table("proforms as proforms")
      ->select(DB::raw('MAX(id) as id'))  
      ->get();     
      
      $number = $autonumber[0]->id;
        */
      $autonumber2 = DB::table("dynamic_fields as dynamic_fields")
      ->select(DB::raw('MAX(id) as id'))  
      ->get();
      
      
      $autonumber2[0]->id++;
      $number2 = $autonumber2[0]->id;
     
      $number = $request->id; 
      $name = $request->name;
      $PKWIU = $request->PKWIU;
      $quantity = $request->quantity;
      $unit = $request->unit;
      $netunit = $request->netunit;
      $nettotal = $request->nettotal;
      $VATrate = $request->VATrate;
      $grossunit = $request->grossunit;
      $grosstotal = $request->grosstotal;
      for($count = 0; $count < count($name); $count++)
      {
       $data = array(
        'proform_id' => $number, 
        'id_pozycji' => $number2++,  
        'name' => $name[$count],
        'PKWIU'  => $PKWIU[$count],
        'quantity' => $quantity[$count],
        'unit'  => $unit[$count],
        'netunit' => $netunit[$count],
        'nettotal'  => $nettotal[$count],
        'VATrate' => $VATrate[$count],
        'grossunit'  => $grossunit[$count],
        'grosstotal' => $grosstotal[$count],
        
       );
       $insert_data[] = $data; 
      }

      DynamicField::insert($insert_data);
      
      return response()->json([
       'success'  => 'Data Added successfully.'
      ]);
     }
    }
}

This is full code of my view:

<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Laravel 5.8 - DataTables Server Side Processing using Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>
 <body>
 
@extends('layouts.app')


@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Dodaj pozycje do proformy numer <?php echo $id ?></h2>
            </div>

        </div>
    </div>


    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif


  

 

 

    <div class="table-responsive">
                <form method="post" id="dynamic_form">
                 <span id="result"></span>
                 <table class="table table-bordered table-striped" id="user_table">
               <thead>
                <tr>
                    <th width="10%">Nazwa towaru lub us?�ugi</th>
                    <th width="10%">PKWiU</th>
                    <th width="10%">Ilo?�?�</th>
                    <th width="10%">Jednostka</th>
                    <th width="10%">Cena netto</th>
                    <th width="10%">Netto razem</th>
                    <th width="10%">Stawka VAT</th>
                    <th width="10%">Brutto jednostka</th>
                    <th width="10%">Brutto razem</th>
                    <th width="10%">Action</th>
                </tr>
               </thead>
               <tbody>

               </tbody>
               <tfoot>
                <tr>
                                <td colspan="2" align="right">&nbsp;</td>
                                <td>
                  @csrf
                  <input type="submit" name="save" id="save" class="btn btn-primary" value="Save" />
                 </td>
                </tr>
               </tfoot>
           </table>
                </form>
                @endsection   
   </div>
  
 </body>
</html>


<script>
$(document).ready(function(){

 var count = 1;

 dynamic_field(count);

 function dynamic_field(number)
 {
  html = '<tr>';
        html += '<td><input type="text" name="name[]" class="form-control" /></td>';
        html += '<td><input type="text" name="PKWIU[]" class="form-control" /></td>';
        html += '<td><input type="text" name="quantity[]" class="form-control" /></td>';
        html += '<td><input type="text" name="unit[]" class="form-control" /></td>';
        html += '<td><input type="text" name="netunit[]" class="form-control" /></td>';
        html += '<td><input type="text" name="nettotal[]" class="form-control" /></td>';
        html += '<td><input type="text" name="VATrate[]" class="form-control" /></td>';
        html += '<td><input type="text" name="grossunit[]" class="form-control" /></td>';        
        html += '<td><input type="text" name="grosstotal[]" class="form-control" /></td>';
        if(number > 1)
        {
            html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
            $('tbody').append(html);
        }
        else
        {   
            html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
            $('tbody').html(html);
        }
 }

 $(document).on('click', '#add', function(){
  count++;
  dynamic_field(count);
 });

 $(document).on('click', '.remove', function(){
  count--;
  $(this).closest("tr").remove();
 });

 $('#dynamic_form').on('submit', function(event){
        event.preventDefault();
        $.ajax({
            url:'{{ route("dynamic-field2.insert") }}',
            method:'post',
            data:$(this).serialize(), id: "<?php echo $id ?>",
            dataType:'json',
            beforeSend:function(){
                $('#save').attr('disabled','disabled');
            },
            success:function(data)
            {
                if(data.error)
                {
                    var error_html = '';
                    for(var count = 0; count < data.error.length; count++)
                    {
                        error_html += '<p>'+data.error[count]+'</p>';
                    }
                    $('#result').html('<div class="alert alert-danger">'+error_html+'</div>');
                }
                else
                {
                    dynamic_field(1);
                    $('#result').html('<div class="alert alert-success">'+data.success+'</div>');
                }
                $('#save').attr('disabled', false);
            }
        })
 });

});
</script>






<p class="text-center text-primary"><small>ARTplus 2020</small></p>










 
 </body>
</html>

Answer

Solution:

Let try below code:

    var id = "<?php echo $id; ?>";
    data: $(this).serialize() + '&proform=' + id,

Source