<?php foreach ($communities as $community) { ?>
<div class="community-container">
<p><?php echo $community->Title ?></p>
<button class="del-btn" data-id="<?php echo $community->ID ?>">Delete</button>
</div>
<?php } ?>
<Script>
const deleteBtns = document.getElementsByClassName('del-btn');
var deleteBtnsArray = Array.from(deleteBtns);
deleteBtnsArray.map(deleteBtn => {
deleteBtn.addEventListener('click', () => {
const delRequest = new XMLHttpRequest();
let params = [];
params = `deleteCommunity=true&communityID=${deleteBtn.dataset.id}`;
delRequest.open('POST', '/ajax/delete-community');
delRequest.onreadystatechange = function() {
if (delRequest.responseText === 'success') {
deleteBtn.parentElement.remove();
}
}
delRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
delRequest.send(params);
})
})
</Script>
I have communities list on my page and each community item has a delete button. Now when I click on a delete button I want to delete related community item.
But...
I can inspect these delete buttons from the browser and change it's data-id value to something else(if a data-id of a delete button is 10, I can change it to 1000). Then when I click on that delete button after changing its data-id value from the client side, it will delete some other community instead correct one. (If a community exists with that changed data-id value) because buttons data-id is changed and JavaScript code takes that value to make AJAX request. I can't stop user changing data-id from the client-side. Therefore, How can I handle this situation if user changed data attributes from client side?
Extra information
$communities is a array of community objects and each community item has a Name and ID.
You could read the data- prop(s) after the page loads. Store them in an array or whatever and then delete the data- prop(s) from the elements.
Be aware that validation should probably happen somewhere on the server side instead of client side
// Wrap everything in an IIFE so we don't create global variables
(() => {
const ID_MAP = new WeakMap();
const onClickAction = ({ currentTarget }) => {
// Exit if there is no ID stored
if(!ID_MAP.has(currentTarget)) return;
// Retrieve and log ID
const id = ID_MAP.get(currentTarget);
console.log(id);
}
const btns = document.querySelectorAll('button');
for(const btn of btns) {
// Skip if it doesn't have an ID
if(!btn.dataset.id) continue;
// Store and hide `data-id` attribute
ID_MAP.set(btn, btn.dataset.id);
btn.removeAttribute('data-id');
// Add event listener
btn.addEventListener('click', onClickAction, false);
}
})();<button data-id="001">id: 001</button>
<button data-id="002">id: 002</button>
<button data-id="003">id: 003</button>
<button data-id="004">id: 004</button>
<button data-id="005">id: 005</button>EDIT: using suggestions from comments (event delegation)
// Wrap everything in an IIFE so we don't create global variables
(() => {
const ID_MAP = new WeakMap();
const onClickAction = ({ target }) => {
// Exit if it's not a button
if(target.nodeName !== 'BUTTON') return;
// Exit if there is no ID stored
if(!ID_MAP.has(target)) return;
// Retrieve and log ID
const id = ID_MAP.get(target);
console.log(id);
}
const btns = document.querySelectorAll('button');
for(const btn of btns) {
// Skip if it doesn't have an ID
if(!btn.dataset.id) continue;
// Store and hide `data-id` attribute
ID_MAP.set(btn, btn.dataset.id);
btn.removeAttribute('data-id');
}
// Add event listener, instead of `document` you can also use a common parent container
document.addEventListener('click', onClickAction, false);
})();<button data-id="001">id: 001</button>
<button data-id="002">id: 002</button>
<button data-id="003">id: 003</button>
<button data-id="004">id: 004</button>
<button data-id="005">id: 005</button>