How to get value of closest hidden input field on button click

Question

I have this code in a loop ie: each delete button and csrf token shows as many times as there are database records:

<% for (const products of approved) { %>

    
        
        
            
                <%= products.title %>
                <%= products.address.city %>, <%= products.address.suburb %>
                
                    Added <%= moment(products.createdAt).fromNow() %>
                
            
        
    
    
         Edit
        
         Delete
    

<% } %>

I want to get the value of the csrf token that is in the same vicinity as the button that was clicked.

document.body.addEventListener("click", e => {
  if (!e.target.matches(".delete")) return;
  e.preventDefault();


  const deleteBtn = e.target;
  const csrf = document.querySelector("[name=_csrf").value;
  const productId = deleteBtn.dataset.id;

  console.log(csrf);

});

I tried using 'closest' but that was an epic fail.

  const deleteBtn = e.target;
  const csrf = deleteBtn.closest("[name=_csrf]").value;

I also tried:

const csrf = deleteBtn.parentNode.querySelector("[name=_csrf]").value;

But that gives me error:

Uncaught TypeError: Cannot read property 'value' of null at HTMLBodyElement.document.body.addEventListener.e

user_2813224 · Answer

In the demos the e.currentTarget has changed from:

document.body.addEventListener(...

to:

document.querySelector('.buttons-to-right').addEventListener(...

Use previousElementSibling, see Demo 1. If that doesn't work, try using e.currentTarget and then get a reference from there, see Demo 2. BTW you can apply the following to nchors that are used for buttons:


The forward slash / disables the default behavior of jumping so you don't have to use e.preventDefault().

Demo 1


const getCSRF = e => {

  const tgt = e.target;
  if (tgt.matches(".delete")) {

    const input = tgt.previousElementSibling;
    const csrf = input.value;
    const productId = tgt.dataset.id;

    console.log(csrf);
  }
};

document.querySelector('.buttons-to-right').addEventListener("click", getCSRF);

  
    
    
      
        
          
        
        
        
          Added 
        
      
    
  
  
     Edit

    
     Delete
  





Demo 2


const getCSRF = e => {

  const tgt = e.target;
  const cur = e.currentTarget;

  if (tgt.matches(".delete")) {

    const input = cur.querySelector('[name=_csrf]');
    const csrf = input.value;
    const productId = tgt.dataset.id;

    console.log(csrf);
  }

};

document.querySelector('.buttons-to-right').addEventListener("click", getCSRF);

  
    
    
      
        
          
        
        
        
          Added 
        
      
    
  
  
     Edit

    

     Delete

user_3634538 · Answer

Try getting the containing element and query for the target field, like so:

document.querySelectorAll('a.delete').forEach(button => {
  button.addEventListener('click', function(e) {
    e.preventDefault();

    var csrf = this.parentElement.querySelector('[name="_csrf"]').value;

    console.log(csrf);
  });
});


  
    
      
        
      
    
    
      
        Product title 1
        Address 2
        
          Added 01/15/2019
        
      
    
  
  
     Edit
    
     Delete
  



  
    
      
        
      
    
    
      
        Product title 2
        Address 2
        
          Added 01/15/2019
        
      
    
  
  
     Edit
    
     Delete

user_5756397 · Answer

Use this script.

How to get value of closest hidden input field on button click

3 Answers

Demo 1

Demo 2