Uncaught TypeError: Illegal invocation using laravel / ajax

Solution for Uncaught TypeError: Illegal invocation using laravel / ajax
is Given Below:

I’m trying to when I switch a checkbox change the column paye in the database to 1 and change the column date_paiement.

So I’m using the following code :

I have the following modal form :

<div class="modal fade bd-example-modal-lg" id="formModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="date_payement" method="post" action="projets"   enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <input type="hidden" id="id_hidden" name="id_projet" />
                    <div class="form-group">
                        <label for="casting_date_naissancee">Date de payement</label>
                        <div class="input-group date">
                            <input type="text" class="form-control" id="date_paiement" name="date_paiement">
                                <span class="input-group-text input-group-append input-group-addon" id="spanEstPaymentDate">
                                    <i class="simple-icon-calendar"></i>
                                </span> 
                            </div>
                       </div>
                       <div class="form-group" align="center">
                           <input type="hidden" name="action" id="action" />
                           <input type="hidden" name="hidden_id" id="hidden_id" />
                           <input type="submit" name="action_button" id="action_button" class="btn btn-warning" value="Enregistrer" />
                        </div>
                        <div class=" col-md-6">
                            <span id="form_result"></span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

And the following script:

$(document).ready(function() {
    $(document).on('change', '.selectRow1', function() {
        $('.modal-title').text("Saisir la date de paiement");
        $('#action_button').val("Enregistrer");
        $('#action').val("Enregistrer");
        $('#formModal').modal('show');
        var paye = $(this).prop('checked') == true ? 1 : 0;
        console.log(paye);
        var id = $(this).attr('id');
        console.log(id);
        $('#date_payement').on('submit', function(event) {
            event.preventDefault();
            if ($('#action').val() == 'Enregistrer') {
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: 'projets/paiement',
                    data: {
                        'paye': paye,
                        'id_projet': id,
                        'date_paiement': new FormData(this)
                    },
                    success: function(data) {
                        console.log(data)
                    }
                });
            }
        });
    });
});

And this is the controller:

public function paiement(Request $request) {
    $request->validate(['paye'=>'required','id_projet'=>'required','date_paiement'=>'required']);
    $projet = Projet::find($request->id_projet);
    if($projet){
        $projet->paye = $request->paye;
        $projet->date_paiement = $request->date_paiement;
        $projet->save();
        return response()->json(['success'=>'Status change successfully.']);
    }
    return response()->json(['failed'=>'Status change failed.'],422);
}

So I want when I switch the selected box I should get the paye if it is 0 or 1 and show the modal form to write the date_paiement and change into the database the two columns paye and date_paiement.

But with this code I get the following error :

Uncaught TypeError: Illegal invocation

If you have any idea, please help

You’re using FormData incorrectly, you have to pass that as the data, not part of it.
Also, you have to specify processData: false, to prevent $.ajax from trying to convert formdata to string and contentType: false, to prevent $.ajax from trying set an incorrect content type.

$('#date_payement').on('submit', function(event) {
  event.preventDefault();
  if ($('#action').val() == 'Enregistrer') {
    var data = new FormData(this);
    data.append('paye', paye);
    data.append('id_projet', id);
    $.ajax({
      type: "post",
      dataType: "json",
      url: 'projets/paiement',
      data: data,
      processData: false,
      contentType: false,
      success: function(data) {
        console.log(data)
      }
    });
  }
});