Editing form with jquery-confirm

I’m using jquery-confirm, and I need to capture the name of the element which i clicked to edit.

jQuery and jQuery-confirm

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
</head>

PHP

<?php
    $products = array(['name'=>'Balloon'],
        ['name'=>'Bike']);
?>

<table>
    <thead>
      <tr>
        <th>Name</th>            
        <th>Edit</th>
      </tr>
    </thead>    
    <tbody>
      <?php foreach($products as $prod) { ?>
        <tr>
          <td><?php echo $prod['name'] ?></td>
          <td><a class="edit" href="#">Edit Product</a></td>
        </tr>
      <?php } ?>
    </tbody>
</table>

SCRIPT

$('a.edit').confirm({
    content: '<input type="text" value="$ Name of the product.">'
});

Obs: Where It’s written “$ Name of the product”, should appear the name of each product that I click.

Answer

You can use this.$target to get a tag which is clicked then using .closest('tr').find('td:eq(0)').text() get first td content.

Demo Code :

$('.edit').confirm({
  content: function() {
  //get closest tr and find get product name..
    return '<input type="text" value="' + this.$target.closest('tr').find('td:eq(0)').text().trim() + '">'
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>
        Abc
      </td>
      <td><a class="edit" href="#">Edit Product</a></td>
    </tr>
    <tr>
      <td>
        Abcd
      </td>
      <td><a class="edit" href="#">Edit Product</a></td>
    </tr>
    <tr>
      <td>
        Abce
      </td>
      <td><a class="edit" href="#">Edit Product</a></td>
    </tr>

  </tbody>
</table>

Advertisement

Answer