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>

JavaScript
​x
 
<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>

JavaScript
 
<?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.">'
});

JavaScript
 
$('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() + '">'
  }
});

JavaScript
 
$('.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>

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