Question 41750 in PHP Question posted in
Official manual can be found here.

How to target property id in vanilla javascript? – PHP

So i have a list of customers with name and id in a button and i will like to delete each customers by obviously targeting the id.

<?php

foreach ($customers as $customer)
{
    echo '<button id="btn" onclick="showDelete('.$customer['id'].')">'.$customer['name'].'</button>
    <button id="btn-delete" value="'.$customer['id'].'" style="display:none;">Delete</button>
    ';
}

<script>
function showDelete(id)
{
    let deleteId = id
  let btn = document.getElementById("btn-delete")
  let deleteValue = btn.value
  console.log(deleteValue)
  if ( deleteId === deleteValue ){
      document.getElementById("btn-delete").style.display = "block";
}
</script>

Any time i trigger the button only the first value of the delete button shows

How do i target each name and delete them using vanilla javascript??

Tags:

3

Answers


  1. 0

    Simply slightly amend your code to include the id if you really wish to use the id approach

    Assumption : the id (in this case is $customer[‘id’]) is unique (which is normally the case say if the id is the key), and if this is not the case, then create a unique id by say incrementing a variable such as $index inside the loop.

    So the code is

    <?php

foreach ($customers as $customer)
{
    echo '<button id="btn'. $customer['id'] . '" onclick="showDelete('.$customer['id'].')">'.$customer['name'].'</button>
    <button id="btn-delete' . $customer['id'] . '" value="'.$customer['id'].'" style="display:none;">Delete</button>
    ';
}

<script>
function showDelete(id)
{
    let deleteId = id
  let btn = document.getElementById("btn-delete" + id)
  let deleteValue = btn.value
  console.log(deleteValue)
  if ( deleteId === deleteValue ){
      document.getElementById("btn-delete"+id).style.display = "block";
}
</script>
    Login or Signup to reply.
  2. 0

    In the PHP code, the $customer['id'] is appended to the id string and also added as a value property. In the JavaScript code, the comparison between deleteId and deleteValue is unnecessary because they have been set as the same value.

    function showDelete(id) {
  document.getElementById("btn-delete"+id).style.display = "block";
}
    Login or Signup to reply.
  3. 0

    This might be helpful

    1. php:
    
<?php $customers = (object) [
    ['name' => 'foo', 'id' => 1],
    ['name' => 'bar', 'id' => 2],
    ['name' => 'baz', 'id' => 3],
]; ?>
<?php foreach ($customers as $customer) : ?>
    <button id="_<?= $customer['id'] ?>" onclick="showDelete(_<?= $customer['id'] ?>)"><?= $customer['name'] ?></button>
<?php endforeach ?>
    1. JavaScript
    <script>
    function showDelete(el) {
        el.parentNode.removeChild(el);
    }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search