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>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.
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>