как получить значение текстовой области, сгенерированной для цикла / javascript

Question

Я должен вставить значение из текстового поля в базу данных по нажатию кнопки.Эти текстовые поля создаются пользовательским вводом / кликом.Поэтому, если я назначу идентификатор или класс, он будет одинаковым для всех элементов.Даже если я сделаю его уникальным, как я получу значение текстовых полей, соответствующих нажатию кнопки.Код выглядит примерно так:

 <% for(var i=0;i < post_data.length;i++){%>
 <div class="post-comment">
          <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
          <button class="btn btn-sm btnComment" id="<%= post_data[i].post_id %>" name="">
            <i class="fas fa-redo"></i>
          </button>
  </div>
  <%}%>

введите описание изображения здесь

Плохо, но я не мог все объяснить.Мне нужно значение из textarea, когда я нажимаю на кнопку изогнутой стрелки.

Answer 1

Вот как вы можете сделать это без jquery:

const buttons = document.querySelectorAll('.btn')
buttons.forEach(button => button.addEventListener('click', (event) => {
  // init listeners for buttons

  const value = event.target.parentNode // get to the textarea through the parent (div)
    .querySelector('textarea').value;
  console.log(value)
}))

<div class="post-comment">
  <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
  <button class="btn btn-sm btnComment" id="" name="">
            <i class="fas fa-redo"></i>1
          </button>
</div>
<div class="post-comment">
  <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
  <button class="btn btn-sm btnComment" id="" name="">
            <i class="fas fa-redo"></i>2
          </button>
</div>
<div class="post-comment">
  <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
  <button class="btn btn-sm btnComment" id="" name="">3
            <i class="fas fa-redo"></i>
          </button>
</div>

Answer 2

Нет необходимости добавлять какой-либо идентификатор, просто захватите данные предыдущего элемента, используя Jquery, используя следующий код.

  $(document).on('click','.btnComment',function(){
        var CommentText = $(this).prev().val(); 
        alert(CommentText);
    });

Проверьте рабочую скрипку здесь

Answer 3

Запустите этот фрагмент.Вы можете читать текст, используя prev ().

$('.btn').on('click', function(){
	alert($( this ).prev().val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-comment">
          <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
          <button class="btn btn-sm btnComment" id="" name="">
            <i class="fas fa-redo"></i>1
          </button>
  </div>
 <div class="post-comment">
          <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
          <button class="btn btn-sm btnComment" id="" name="">
            <i class="fas fa-redo"></i>2
          </button>
  </div>
 <div class="post-comment">
          <textarea class="comment-box" name="" id="" cols="80" rows="1" spellcheck="false"></textarea>
          <button class="btn btn-sm btnComment" id="" name="">3
            <i class="fas fa-redo"></i>
          </button>
  </div>

Answer 4

Используя метод jquery следующим образом:

$("button[name^=t]").click(function(){
     //process
}

Вышеуказанный метод будет вызываться всякий раз, когда нажимается button, имя которого начинается с 't'.