Как получить данные из массива текстового поля с помощью кнопки с помощью этой кнопки

Question

У меня проблема с получением текста из динамического массива пары textarea-button. Каждая кнопка в массиве как-то всегда указывает на первую текстовую область.

это мой фрагмент кода.

//submit findings 
 
$('#table').on('click', 'input#accept', function() { 
 

 
    var id = $('textarea#<?php echo $valas->id; ?>').val(); 
 

 
    alert(id); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<?php foreach ($appointment as $item=>$valas) { ?> //... 
 

 
<td colspan="4"> 
 
    <textarea id="<?php echo $valas->id; ?>" style="resize:none;" class="form-control" name="finding" cols="30" data-id="<?php echo $valas->id; ?>" rows="3"> 
 
    </textarea> 
 
</td> 
 
<td colspan="1"> 
 
    <input id="accept" data-id="<?php echo $valas->id; ?>" type="button" class="btn btn-success" value="re-submit"> 
 
    <input id="reject" data-id="<?php echo $valas->id; ?>" type="button" class="btn btn-danger" onclick="confirm('are you sure you want to reject this prescription?')" value="reject"> 
 
</td> 
 

 
<?php }?>

Извините за плохой английский

-Edit по koenpeters, скопированный из comments-

сгенерированного JS

$('#table').on('click', 'input#accept', function() { 
    var id = $('textarea #').val(); 
    alert(id); 
}) 

Сгенерировано HTML

<td colspan="4"> 
    <textarea id="finding" style="resize:none;" class="form-control" name="finding" cols="30" data-id="335" rows="3"></textarea> 
</td> 
<td colspan="1"> 
    <input id="accept" data-id="335" type="button" class="btn btn-success" value="re-submit"> 
    <input id="reject" data-id="335" type="button" class="btn btn-danger" onclick="confirm('are you sure you want to reject this prescription?')" value="reject"> 
</td> 

Answer 1

Посмотрите на свою созданную JS. Он говорит $('textarea #'). Кажется, он пропустил сам идентификатор.

В качестве альтернативы тому, что вы сделали: я бы сделал это, посмотрев текстовое поле, которое находится в том же tr, что и кнопки, которые были нажаты. Что-то вроде этого:

JS

$('#table').on('click', 'input#accept', function() { 
    var id = $(this).closest('tr').find('textarea').val(); 
    alert(id); 
}) 

демо HTML

<table id="table"> 
    <tr> 
     <td colspan="4"> 
      <textarea id="finding" style="resize:none;" class="form-control" name="finding" cols="30" data-id="335" rows="3"></textarea> 
     </td> 
     <td colspan="1"> 
      <input id="accept" data-id="335" type="button" class="btn btn-success" value="re-submit"/> 
      <input id="reject" data-id="335" type="button" class="btn btn-danger" onclick="confirm('are you sure you want to reject this prescription?')" value="reject"/> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      <textarea id="finding" style="resize:none;" class="form-control" name="finding" cols="30" data-id="335" rows="3"></textarea> 
     </td> 
     <td colspan="1"> 
      <input id="accept" data-id="335" type="button" class="btn btn-success" value="re-submit"/> 
      <input id="reject" data-id="335" type="button" class="btn btn-danger" onclick="confirm('are you sure you want to reject this prescription?')" value="reject"/> 
     </td> 
    </tr> 
</table> 

Смотрите рабочую демо: https://jsfiddle.net/yxeyefx8/