When pressing button to trigger event nothing happens

user_12454233 0
Viewed 55

I have a button that has a data-id with a value of 1. I need to pass this id to getCarDetails.php during a fetch() call. The getCarDetails needs this id for a query. The php is working fine as I tested it on a normal submit form and returns the jSON I need. However, this script doesn't want to work. I've tried everything.

function loadCarDetails(event) {
  const id = event.currentTarget.getAttribute("data-id");
  const data = new FormData();
  data.append("car_id", id);
  fetch("getCarDetails.php", {
      method: "POST",
      data
    })
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error ${response.status}`);
      }
      return response.json();
    })
    .then(carDetails => {
      // ...use the car details here...
    })
    .catch(error => {
      // ...handle/reject error here...
    });
}
<div class="car-item">
  <div class="row">
    <p>Ford Fiesta</p>
  </div>

  <div class="row">
    <button type="button" class="btn" data-id="1">View</button>
  </div>
</div>

html javascript
2 Answers

Since your buttons are dynamically generated, they need an additional class that you can identify:

<button type="button" class="btn btnview" data-id="1">View</button>

Then, add an event listener for them at the end of the javascript:

document.querySelectorAll('.btnview')
    .forEach((e, i) => e.addEventListener('click', loadCarDetails));

This means that when the user clicks one of the buttons, it would call the loadCarDetails function for that button.

user_18582800

You're not passing that function in a callback on the event handler of the button

               <div class="row">
                    <button type="button" onClick={(e) => loadCarDetails(e)} class="btn" data-id="1">View</button>
                </div>
user_111273960
Related