Как получить при помощи jquery значение input по id, при услорвии, что id динамический?

Question

[Verygoodman]

Здравствуйте. Подскажите, пожалуйста, как решить такую задачку:

На странице может быть несколько форм для комментариев, значение textarea которых необходимо получить при помощи jquery.

$('textarea#comment-id').val(). здесь не подходит, так как у каждой формы может динамически меняться id, например:

<textarea name="content" id="{{$comment->id}}" rows="3"></textarea>

, где {{$comment->id}} равен идентификатору комментария, под которым находиться форма.

<textarea name="content" id="12" rows="3"></textarea>
<textarea name="content" id="13" rows="3"></textarea>
<textarea name="content" id="14" rows="3"></textarea>

Получается, что форм может быть несколько, и идентификаторы у форм всегда разные. Как получить значение конкретной формы не пойму.

Answer 1

[ThunderCat]

Значения не просто так же получаем, а по какому-то евенту? Вот от таргета евента и ищите, можно даже не использовать ид.

Comments

[Verygoodman]

Уже вижу, что по ивенту будет скорее всего оптимально получить данные из поля. Я думал, что может еще есть некие премудрости на этот счет.

[ThunderCat]

Verygoodman, что значит оптимально? По сути это единственный адекватный метод, есть еще варианты с дата-атрибутами, где в таргете может лежать ид, но это все равно будет зависеть от таргета, так что в любом случае так оно и работает.

[Verygoodman]

Вот, что я сделал. Не могу получить значение textarea

<textarea name="content" class="form-control" id="textarea-reply-{{$answer->id}}" rows="3"></textarea>
 <button id="add-reply-{{$answer->id}}" type="submit" class="btn btn-outline-info float-right">Ответить</button>

Кликая по кнопке, я получаю ее числовое id, которое равное значению e.target.id.
Далее, я при помощи интерполяции строк получаю textarea по id, но не могу получить значение при помощи функции val(). В консоле пишет undefined.

$(document).on('click', 'button[id^="add-reply-"]', function (e) {
        e.preventDefault();
        let textarea = $(`#textarea-reply-${e.target.id}`).val();
        console.log(textarea);
    });

[ThunderCat]

Verygoodman, а теперь подумайте что у вас будет здесь #textarea-reply-${e.target.id}
и по уму лучше не на клик вешать, а на субмит формы, тогда искать можно в форме, типа $(this).find(textarea);

[Verygoodman]

Object

[ThunderCat]

Verygoodman, ок, '#textarea-reply-' + 'add-reply-666' - у вас точно есть такой селектор????

[Verygoodman]

ThunderCat, Действительно, уже не не понимаю, что приклеиваю и что получается. Засиделся...

Так работает:

<textarea name="content" class="form-control" id="textarea-reply-{{$answer->id}}" rows="3"></textarea>
<button id="reply-{{$answer->id}}" type="submit">Ответить</button>

$(document).on('click', 'button[id^="reply-"]', function (e) {
        e.preventDefault();
        let textarea = $(`#textarea-${e.target.id}`).val();
    });

[Verygoodman]

ThunderCat Спасибо за подсказки, сам бы думал на много дольше как решить эту задачу.

[Verygoodman]

ThunderCat Кстати, сделал через сабмит формы, как вы и советовали. Так оказалось более удобнее.