How to create a report for each?

Question

I want to create a report for each order with the bootstrap modal. How do I do this?

<button type="button" class="btn btn-primary" data-action="{{ route('admin.orders.report', $order->id) }}" data-bs-toggle="modal" data-bs-target="#report" data-id="{{ $order->id }}">Report</button>

script

$('#report').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget);
  var action = button.data('action');
  var orderId = button.data('id');
  var modal = $(this);
  modal.find('form').attr('action', action);
  document.getElementById("orderId").value = orderId;
});

web.php

Route::get('orders/report/{order}', [App\Http\Controllers\Admin\OrderController::class, 'report'])->name('orders.report');

Controller

public function report(Order $order)
{
  return view('Admin.orders.pdf', compact('order'));
}

modal

<div class="modal fade" id="report" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="report" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="{{ route('admin.orders.report', $order->id) }}" method="post">
        @csrf
        <input id="orderIdUn" type="hidden" name="order_id" value="">
        <button type="submit" class="btn btn-success">Yes</button>

I see this error.

Uncaught TypeError: document.getElementById(...) is null

Answer 1

You didn't assign the mentioned id to any element. Change this:

<input id="orderIdUn" type="hidden" name="order_id" value="">

to this:

<input id="orderId" type="hidden" name="order_id" value="">

And because you specified the method in your form to POST you have to change your route method to POST too (It could be GET but it's safer this way). In web.php file:

Route::post('orders/report/{order}', [App\Http\Controllers\Admin\OrderController::class, 'report'])->name('orders.report');