Save button in Laravel Blade + JavaScript fetch not triggering (no console log, no network request)

Question

I’m working on a Laravel Blade view (monitoring.blade.php) where I have an edit and save button for each row. The edit button works, but when I click the save button, nothing happens — no console logs, no network requests, no errors.

<table id="scholarsTable">
  <tbody>
    <tr>
      <td>
        <span class="display-text" data-field="course">Math</span>
        <input type="text" class="edit-input hidden" value="Math" data-field="course" data-monitoring-id="1" data-scholar-id="1">
      </td>
      <td>
        <button class="edit-btn">Edit</button>
        <button class="save-btn hidden">Save</button>
      </td>
    </tr>
  </tbody>
</table>

<script>
document.body.addEventListener('click', function(e) {
  if (e.target.classList.contains('edit-btn')) {
    const row = e.target.closest('tr');
    row.querySelectorAll('.edit-input').forEach(i => i.classList.remove('hidden'));
    row.querySelectorAll('.display-text').forEach(s => s.classList.add('hidden'));
    e.target.classList.add('hidden');
    row.querySelector('.save-btn').classList.remove('hidden');
  }

  if (e.target.classList.contains('save-btn')) {
    const row = e.target.closest('tr');
    const input = row.querySelector('.edit-input');
    console.log("Would send to backend:", {
      monitoring_id: input.dataset.monitoringId,
      scholar_id: input.dataset.scholarId,
      field: input.dataset.field,
      value: input.value
    });
  }
});
</script>

I tried adding a console.log() inside the JavaScript click event to verify if the save button was being detected:

document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('save-btn')) {
        console.log("Save button clicked");
    }
});

But when I click the “Save” button, nothing appears in the console, and no network request is sent to my Laravel backend route (admin.reports.monitoring.update-field).

I also checked:

The button has the correct class (save-btn)
The script is included at the bottom of the Blade file (inside <script> tags)
Other parts of the script (like column toggles) are working
The same logic works perfectly in another file (applicants.blade.php)

I expected the console log to appear and for the data to be sent to the backend (to update or create a record in the scholar_monitorings table), but nothing happens when the button is clicked.

Prabath Abeysinghe · Accepted Answer · 2025-10-19 17:33:01Z

1

Looks like the problem is still the script is not included in the blade correctly just push the js to blade directly and debug .

`@push('scripts')
 <script>
   // your JS here
 </script>
@endpush`

answered Oct 19 at 17:33

Prabath Abeysinghe

468 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Save button in Laravel Blade + JavaScript fetch not triggering (no console log, no network request)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related