Как использовать AJAX запрос для выбора значения переключателя и ввода текста при обратном вызове?

Question

Данные формы правильно заполняются во всех текстовых полях ввода. Но для переключателей ничего не происходит, за исключением того, что значение элемента изменяется, но не отображается. Я знаю его, потому что, основываясь на имени класса, он меняет значение. Но как мне отличить полевые входы от радиовходов? спасибо!

$(function() {
   $(".task-listing").click(function() {
  $.ajax({
      type: 'POST',
      url: 'http://localhost:8090/HELPERSITE/src/php/listing-info-get.php',
      dataType: 'json',
      data: 'pid=' + $(this).attr("id"),
      success: function(response) {
        console.log(response);

        Object.keys(response[0]).map(function(k) {
            var el = $('.' + k);
            if (el.prop('type') == 'radio') {
              el.filter(function(i, button) {
                return button.value == response[0][k];
              }).prop('checked', true);
            } else {
              $('.' + k).val(response[0][k]);
            }
        })
      }
  });
});
});

Answer 1

Вам необходимо установить свойство checked соответствующей кнопки, если тип radio.

$(function() {
  $(".task-listing").click(function() {
      $.ajax({
          type: 'POST',
          url: 'http://localhost:8090/HELPERSITE/src/php/listing-info-get.php',
          dataType: 'json',
          data: 'pid=' + $(this).attr("id"),
          success: function(response) {
            console.log(response);

            Object.keys(response[0]).map(function(k) {
                var el = $('.' + k);
                if (el.prop('type') == 'radio') {
                  el.filter(function(i, button) {
                    return button.value == response[0][k];
                  }).prop('checked', true);
                } else {
                  $('.' + k).val(response[0][k]);
                }
                if (response.negotiate == 'approve') {});
            }
          })
      });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="task-title-reg" name="task-title-reg" value="">
<textarea class="task-description-reg" name="task-description-reg" rows="4" cols="50" value=""></textarea>

<label for="local-reg">Local</label>
<input type="radio" name="task-location-reg" value="Local">
<label for="remote-reg">Remote</label>
<input type="radio" class="task-location-reg" name="task-location-reg" value="Remote">

<label for="approve-reg">Approve</label>
<input type="radio" class="task-negotiations-reg" name="negotiate" value="Approve">
<label for="deny-reg">Deny</label>
<input type="radio" class="task-negotiations-reg" name="negotiate" value="Deny">