Получить значения различных элементов с помощью $ (this)

Question

РЕДАКТИРОВАТЬ: Решено !, я также обновил код на будущее. когда кто-то будет искать такого рода проблемы.

Благодаря: Nesaje

У меня есть div, который генерируется с использованием al oop. Внутри этого div есть элемент fieldset для переключателей и ввода текста. Я могу получить значение радиокнопки с событием change, но не могу получить ввод текста. Переключатели и текст генерируются из l oop, поэтому у меня нет указания c ID.

$("body").on("change", "#star-rate input:radio", function(e) {
  var score = $(this).val();
  var comment = $(this)
    .parents('.row.stars-comment-container') // Find common parent container (notice class name ;)
    .find('input[name=comment]')                         // Once there, find input with name = comment (name can be duplicated)
    .val();
  console.log('comment: ' + comment + ' - score:' + score);
});

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <div class="col-12" id="star-rate" style="padding-top:10px">
  <div class="row stars-comment-container">
  <!-- (Genarated via loop)This is expected to be repeated => stars and comments together. -->
    <div style="padding-top:7px; width:110px"><span class="pull-right" style="font-size:16px"><b>Rate:&nbsp;</b></span>
    </div>
    <div class="star-rate">
      <fieldset class="rate">
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="5.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="4.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="3.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="2.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="1.00" />
      </fieldset>
    </div>
    <div class="col-12">
        <input type="text" class="form-control" name="comment">
    </div>
  </div>
  <!-- Moved inside common parent container -->
  <!-- class="col-12"><input type="text" class="form-control" name="comment" id="comment"></div> -->
</div>

Answer 1

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

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

    <div class="col-12" id="star-rate" style="padding-top:10px">
  <div class="row stars-comment-container"> <!-- This is expected to be repeated => stars and comments together. -->
    <div style="padding-top:7px; width:110px"><span class="pull-right" style="font-size:16px"><b>Rate:&nbsp;</b></span>
    </div>
    <div class="star-rate">
      <fieldset class="rate">
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="5.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="4.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="3.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="2.00" />
        <input type="radio" data-id="{{$fA->id}}" id="s5-{{$fA->id}}" name="score" value="1.00" />
      </fieldset>
    </div>
    <div class="col-12">
        <input type="text" class="form-control" name="comment">
    </div>
  </div>
  <!-- Moved inside common parent container -->
  <!-- class="col-12"><input type="text" class="form-control" name="comment" id="comment"></div> -->
</div>

С этим на месте рассмотрите следующий JS фрагмент

$("body").on("change", "#star-rate input:radio", function(e) {
  var score = $(this).val();
  var comment = $(this)
    .parents('.row.stars-comment-container') // Find common parent container (notice class name ;)
    .find('input[name=comment]')                         // Once there, find input with name = comment (name can be duplicated)
    .val();
  console.log('comment: ' + comment + ' - score:' + score);
});

Это должно решить вашу проблему.

Answer 2

хотя я все еще не уверен, что именно вы хотите, но что я получаю по вашему вопросу, что при отправке формы вам нужно это значение в текстовом поле, или если вы хотите просто получить значение ввода текста, вы можете сделать это на KeyUp. Так, в случае 1, когда вам нужно получить комментарий к отправке формы:

$(selector).submit(function(){
    var textVal = $('#comment').val();
});  

, а для случая 2 вы можете использовать keyup, когда пользователь печатает:

$("body").on("keyup", "#comment", function(e) {
   var textValue= $(this).val();
   console.log('comment: ' + textValue);
 });